Documentation · library 1.1.1
Documentation
A map of the sections and three routes through them: ship today, understand the design, look up an answer.
Start here
Getting started
Five steps from an empty directory to a coloured button on screen. Everything deeper lives on the neighbouring pages.
- 1Getting started5 min
- 2Installation9 min
- 3Configuration6 min
Install the package and its required peers
npm i @feugene/granularity @feugene/granum @floating-ui/dom vuepnpm add @feugene/granularity @feugene/granum @floating-ui/dom vueyarn add @feugene/granularity @feugene/granum @floating-ui/dom vuebun add @feugene/granularity @feugene/granum @floating-ui/dom vueGet started4
From an empty directory to a working component.
- IntroductionWhat Granularity is, and the one decision that shapes everything else about it.
- Getting startedFive steps from an empty directory to a coloured button on screen. Everything deeper lives on the neighbouring pages.
- InstallationWhat gets installed, why exactly that, and where it goes — dependencies or devDependencies. Plus icons and optional integrations.
- ConfigurationDefaults for a subtree through GrConfigProvider, the order they resolve in, auto-import and the runtime adapter.
Concepts4
How the library is built: themes, accessibility, languages, weight.
- ThemingRoles, not hex codes: how to rebrand without touching a single component, and why a theme is assembled rather than typed out.
- AccessibilityThe keyboard contract, the overlay stack, the live region and the contrast rules — what the library guarantees and what holds it.
- LocalizationThe library brings no i18n stack of its own: the locale, the dictionaries and where the choice is stored stay with the application. Three languages ship.
- PerformanceGranularity is the product's main promise. This page shows what it is measured in and how to verify it yourself.
Integrations4
Fitting it into your stack: types, server rendering, tests, Storybook.
- TypeScriptTypes arrive with the subpath: props, emits, the instance and the tokens. Plus web-types for JetBrains, which almost nobody knows about.
- SSRThe package is safe for server rendering as a whole. The caveats are not about safety but about what exactly arrives from the server.
- TestingHelpers for testing your application, the limits of jsdom, and the rules without which a test goes green on broken code.
- StorybookThe library has no Storybook of its own and will not have one. How to plug the components into yours — config, theme, overlays and the main trap.
Upgrades and support3
How long a version lives, moving between majors, common breakages.
- VersioningWhat 1.x promises, how the packages of the family are tied together by versions, and what the library does not promise yet.
- MigrationMoving between majors: what the move from 0.x to 1.0 broke and how to make it.
- TroubleshootingSymptom, cause, fix. Collected from the cases that actually broke rather than from imaginary ones.
Nothing here matches. Try the search for the whole site — ⌘K.
Look up an answer
- Which keys a component takes, what happens to focus and to a screen readerAccessibility →
- Whether this works on the server and what arrives from itSSR →
- How to wire translations up and how many languages the library speaksLocalization →
- Where the types come from and why the compiler cannot see themTypeScript →
- What to test with and what jsdom cannot checkTesting →
- How long the 1.x line will live and what counts as a breaking changeVersioning →
Elsewhere on the site
Components116 components across 8 packages, each with a playground, examples and an API table.Components →FoundationsTokens, colour roles, the type scale and the rest of the visual language.Foundations →API referenceComposables, directives and utilities outside the components.API reference →ChangelogWhat changed between versions, release by release.v1.1.1 →