Eric Bailey
a5b474895a
* Initial library setup
* Add docblocks
* Some cleanup
* New storybook
* Playing around
* Remove silly test, use for...in
* Memo
* Memo
* Add hooks example
* Tweak colors, bit of cleanup
* Improve macro handling
* Add some more examples
* Rename for better diff
* Cleanup
* Add nested context example
* Add todo
* Less break more perf
* Buttons, you get the idea
* Fix test
* Remove temp colors
* Add a few more common macros
* Docs
* Perf improvements
* Alf go brrrr
* Update breakpoint handling
* I think it'll work
* Better naming, better code
* Fix typo
* Some renaming
* More complete pass at Tailwind naming
* Build out storybook
* Playing around with curves
* Revert "Playing around with curves"
This reverts commit 6b0e0e5c9d.
* Smooth brain
* Remove outdated docs
* Some docs, fix line-height values, export tokens
57 lines
1.2 KiB
Markdown
57 lines
1.2 KiB
Markdown
# Application Layout Framework (ALF)
|
|
|
|
A set of UI primitives and components.
|
|
|
|
## Usage
|
|
|
|
Naming conventions follow Tailwind — delimited with a `_` instead of `-` to
|
|
enable object access — with a couple exceptions:
|
|
|
|
**Spacing**
|
|
|
|
Uses "t-shirt" sizes `xxs`, `xs`, `sm`, `md`, `lg`, `xl` and `xxl` instead of
|
|
increments of 4px. We only use a few common spacings, and otherwise typically
|
|
rely on many one-off values.
|
|
|
|
**Text Size**
|
|
|
|
Uses "t-shirt" sizes `xxs`, `xs`, `sm`, `md`, `lg`, `xl` and `xxl` to match our
|
|
type scale.
|
|
|
|
**Line Height**
|
|
|
|
The text size atoms also apply a line-height with the same value as the size,
|
|
for a 1:1 ratio. `tight` and `normal` are retained for use in the few places
|
|
where we need leading.
|
|
|
|
### Atoms
|
|
|
|
An (mostly-complete) set of style definitions that match Tailwind CSS selectors.
|
|
These are static and reused throughout the app.
|
|
|
|
```tsx
|
|
import { atoms } from '#/alf'
|
|
|
|
<View style={[atoms.flex_row]} />
|
|
```
|
|
|
|
### Theme
|
|
|
|
Any values that rely on the theme, namely colors.
|
|
|
|
```tsx
|
|
const t = useTheme()
|
|
|
|
<View style={[atoms.flex_row, t.atoms.bg]} />
|
|
```
|
|
|
|
### Breakpoints
|
|
|
|
```tsx
|
|
const b = useBreakpoints()
|
|
|
|
if (b.gtMobile) {
|
|
// render tablet or desktop UI
|
|
}
|
|
```
|