You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Commit 2669279
Browse filesBrowse the repository at this point in the historyBrowse files
Copy file name to clipboardExpand all lines: frontend/purestack.studio/guides/styling/typography.mdx
+7Lines changed: 7 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -123,6 +123,13 @@ Use utility classes when a single element needs a particular look, for example a
123
123
-`fw-100` through `fw-900` set the weight.
124
124
-`lh-0` through `lh-7` set the line height from `1.0` to `1.7`.
125
125
126
+
For deliberate adjustments, use `tracking-normal`, `tracking-tight`, or
127
+
`tracking-wide`. Use `text-balance` for headings and `text-pretty` for supporting
128
+
copy, with `max-w-heading` or `max-w-prose` to limit line length. `tabular-nums`
129
+
keeps digits equally wide when the font supports it, which helps metrics and
130
+
changing counters. `text-inherit` keeps a text role's color aligned with its
131
+
parent surface.
132
+
126
133
`fs-*` classes change the **size only**. They do not apply the derived line height, so large text keeps the line height of its surroundings. For multiline text at a large size, add a matching `lh-*` class, as the specimen above does:
Copy file name to clipboardExpand all lines: frontend/purestack.studio/guides/styling/utility-css-classes.mdx
+49-7Lines changed: 49 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,20 +16,24 @@ nav:
16
16
PureStack generates a small vocabulary of reusable CSS classes alongside its component styles. Use them in MDX markup, in a component's `class` or `bodyClass` prop, or in a TypeScript `html` template. They are generated for each configured theme, so classes that use palette colors or font sizes follow the active skin.
17
17
18
18
<Paneltone="info"bodyClass="p-3"class="mb-5">
19
-
<pclass="text-eyebrow mt-0">Release note</p>
20
-
<h2class="mt-0 mb-2">A clearer way to build</h2>
21
-
<pclass="mb-0">Spacing and type follow the site's theme.</p>
<h2class="max-w-heading text-balance tracking-tight mt-0 mb-2">A clearer way to build</h2>
32
+
<pclass="max-w-prose text-pretty tracking-normal mb-0">Spacing and type follow the site's theme.</p>
29
33
</Panel>
30
34
```
31
35
32
-
Here `bodyClass` styles the Panel's body, while `class` styles the elements inside it. This distinction matters for components with their own wrapper and internal content. The [component catalog](/components/) shows which props each component exposes.
36
+
Here `bodyClass` styles the Panel's inner body, while `class` styles its root. This distinction matters for components with their own wrapper and internal content. The [component catalog](/components/) shows which props each component exposes.
33
37
34
38
The class names below come from PureStack's utility and component style generators. They are not Tailwind-style arbitrary values: a class works when the generator defines it. For a repeated design pattern, add a named style in your site's TypeScript styles; use utilities for local composition and small adjustments.
35
39
@@ -86,10 +90,29 @@ The other numeric type controls are `fw-100` through `fw-900`, in steps of 100,
86
90
| --- | --- |
87
91
|`text-left`, `text-center`, `text-right`| Physical text alignment. |
88
92
|`text-start`, `text-end`, `text-justify`| Logical start/end alignment or justified text. |
93
+
|`text-balance`| Balances line lengths in short text, such as a heading, using `text-wrap: balance`. |
94
+
|`text-pretty`| Improves paragraph line breaks using `text-wrap: pretty`. |
95
+
|`text-inherit`| Inherits the parent's text color, including on a colored surface. |
96
+
|`tracking-normal`, `tracking-tight`, `tracking-wide`| Set letter spacing to `normal`, `-0.025em`, or `0.1em`. |
97
+
|`tabular-nums`| Requests equal-width digits from the font with `font-variant-numeric: tabular-nums`. Useful for metrics, prices, tables, and counters. |
89
98
|`uppercase`, `lowercase`| Text transform. |
90
99
|`underline-hover`, `underline-active`| Underline on hover or on active interaction; `underline-active` also recognizes an `.active` class. |
91
100
|`text-ellipsis`| Sets `text-overflow: ellipsis` only. Combine it with a constrained width, `overflow-hidden`, and `ws-nowrap` for a single-line ellipsis. |
92
101
102
+
Wrapping, tracking, inherited color, and numeric utilities override the
103
+
corresponding declaration from a text role. They leave its other properties
104
+
alone. `tracking-normal`, for example, resets a label's letter spacing without
105
+
changing its size or weight. Tabular digits depend on support in the selected
106
+
font.
107
+
108
+
Combine wrapping with a line-length limit when introducing a section:
109
+
110
+
```mdx
111
+
<h2class="max-w-heading text-balance tracking-tight">A thoughtful foundation for your next idea</h2>
112
+
<pclass="max-w-prose text-pretty tracking-normal">Keep supporting copy readable without forcing the rest of the layout to use the same width.</p>
113
+
<strongclass="fs-h1 tabular-nums">1,248</strong>
114
+
```
115
+
93
116
PureStack also has editorial role classes. They set a combination of font size, weight, color, transform, line height, and/or margin, depending on the role:
94
117
95
118
| Role | Current treatment |
@@ -140,6 +163,18 @@ For any name in this table, `hidden-{name}` hides at widths **up to and includin
140
163
<pclass="hidden-lg-up">Shown below 1024px</p>
141
164
```
142
165
166
+
`hidden-empty` hides an element only while it matches `:empty`. Use it for
An empty container is hidden; adding content restores its normal display.
174
+
Comments do not count as content, but literal whitespace text does, so keep an
175
+
unused wrapper free of spaces or newlines inside it. The utility does not hide
176
+
text-only content. It can be combined with `d-flex` or `d-grid`.
177
+
143
178
There is no general `md:p-3` or `md:d-flex` syntax in this utility set. Responsive Flex classes and the `Grid` component have their own explicit APIs, described next.
144
179
145
180
## Flex and Grid composition
@@ -183,6 +218,8 @@ For grid children, `justify-self-start`, `justify-self-center`, `justify-self-en
183
218
| --- | --- |
184
219
|`w-full`, `h-full`|`width: 100%` or `height: 100%`. |
185
220
|`max-w-full`| Caps width at `100%`; combine with a fixed width to fit a smaller container. |
221
+
|`max-w-heading`| Limits line length to `20ch`, useful for short headings. |
222
+
|`max-w-prose`| Limits line length to `65ch`, useful for paragraphs and introductions. |
186
223
|`min-w-0`| Allows a flex or grid child to shrink below its content's preferred width. |
187
224
|`max-h-inspector`| Limits height to `24rem`. |
188
225
|`overflow-visible`, `overflow-auto`, `overflow-hidden`| Set overflow on both axes. |
@@ -197,6 +234,11 @@ For grid children, `justify-self-start`, `justify-self-center`, `justify-self-en
197
234
198
235
`auto-fit` is a specialized width utility that sets `width: 1%`; it is not a CSS Grid `auto-fit` track rule. Use it only when that width behavior is intended.
199
236
237
+
The text-width utilities set only `max-width`, not `width`. The `ch` unit is
238
+
based on the font's zero glyph, so the resulting width follows the type size.
239
+
They add no padding, centering, or responsive variants; use `mx-auto` when a
240
+
block should be centered.
241
+
200
242
## Borders, radius, and opacity
201
243
202
244
Border width classes use pixels. `b-1`, `b-2`, and `b-3` set a solid border on all sides. `bx-*`, `by-*`, `bt-*`, `br-*`, `bb-*`, and `bl-*` set the specified edges; `0` removes a width on those edges. For example, `bb-1` adds a solid one-pixel bottom border, and `b-0` removes all border widths.
0 commit comments