robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
1# Application Layout Framework (ALF)
2
3A set of UI primitives and components.
4
5## Usage
6
7Naming conventions follow Tailwind — delimited with a `_` instead of `-` to
8enable object access — with a couple exceptions:
9
10**Spacing**
11
12Uses "t-shirt" sizes `xxs`, `xs`, `sm`, `md`, `lg`, `xl` and `xxl` instead of
13increments of 4px. We only use a few common spacings, and otherwise typically
14rely on many one-off values.
15
16**Text Size**
17
18Uses "t-shirt" sizes `xxs`, `xs`, `sm`, `md`, `lg`, `xl` and `xxl` to match our
19type scale.
20
21**Line Height**
22
23The text size atoms also apply a line-height with the same value as the size,
24for a 1:1 ratio. `tight` and `normal` are retained for use in the few places
25where we need leading.
26
27### Atoms
28
29An (mostly-complete) set of style definitions that match Tailwind CSS selectors.
30These are static and reused throughout the app.
31
32```tsx
33import { atoms } from '#/alf'
34
35<View style={[atoms.flex_row]} />
36```
37
38### Theme
39
40Any values that rely on the theme, namely colors.
41
42```tsx
43const t = useTheme()
44
45<View style={[atoms.flex_row, t.atoms.bg]} />
46```
47
48### Breakpoints
49
50```tsx
51const b = useBreakpoints()
52
53if (b.gtMobile) {
54 // render tablet or desktop UI
55}
56```