Spacing
Spacing utilities allow you to adjust the margins and/or padding of an element or group of elements. Refer to Spacing in Visual Style to learn more about the naming conventions used below.
Margin
Use margin utilities to adjust the spacing between elements.
Stack
Stack adds margin to the bottom (block-end) of an element. You can append a size to change the default value.
| Class | Value |
|---|---|
.lwj-stack-xs |
5px |
.lwj-stack, .lwj-stack-sm |
10px |
.lwj-stack-md |
20px |
.lwj-stack-lg |
30px |
.lwj-stack-xl |
60px |
You can also override the default value with the --stack-size custom property.
| Custom Property | Default Value | Description |
|---|---|---|
--stack-size |
10px | Bottom margin value |
Example
A heading with a bottom margin followed by a paragraph.
Learn from the web's leading experts.
Every Thursday, Jason pair programs with the brightest minds in web development to learn something new in 90 minutes.
HTML
<p class="lwj-stack lwj-heading-2">Learn from the web's leading experts.</p>
<p>Every Thursday, Jason pair programs with the brightest minds in web development to learn something new in 90 minutes.</p>Flow
Flow adds margin to the bottom of all direct children of an element. Use this utility instead of applying the stack utility to each child element. The last child element will not include a bottom margin to avoid adding unwanted additional space to the bottom of a flow container. You can append a size to change the default value.
| Class | Value |
|---|---|
.lwj-flow-xs |
5px |
.lwj-flow, .lwj-flow-sm |
10px |
.lwj-flow-md |
20px |
.lwj-flow-lg |
30px |
.lwj-flow-xl |
60px |
You can also override the default value with the --flow-size custom property.
| Custom Property | Default Value | Description |
|---|---|---|
--flow-size |
10px | Bottom margin value of children |
You can also use the stack utility inside of a flow block to override the margin value for an individual child element.
Example
A heading with a bottom margin of 10px, followed by several paragraphs of text with bottom margins of 20px.
Build for maintainability to boost shipping velocity.
Maintainable code should be easy to delete. Optimizing for deletion makes code easier to refactor, or even fully replace — and it can be hot-swapped without other systems ever noticing or needing to care.
Reducing the external surface area of the codebase starts as building for maintainability, but it results in much higher velocity.
For example, your team might have an API written in Node. Later, you may decide to rebuild in Go or Rust to solve a performance bottleneck. As long as the rebuilt API has the same endpoints, arguments, and return values, none of the services consuming that API don’t even need to be made aware of the change — they’ll just see a performance boost once the new version rolls out.
Nothing can reach its internals and touch things if the API stays accurate. You don’t have to worry that changing a line of code will break the whole codebase. There’s no way for some other piece of code to reach beyond the API boundary.
HTML
<div class="lwj-flow-md">
<p class="lwj-stack lwj-heading-1">Build for maintainability to boost shipping velocity.</p>
<p>Maintainable code should be easy to delete. Optimizing for deletion makes code easier to refactor, or even fully replace — and it can be hot-swapped without other systems ever noticing or needing to care.</p>
<p>Reducing the external surface area of the codebase starts as building for maintainability, but it results in much higher velocity.</p>
<p>For example, your team might have an API written in Node. Later, you may decide to rebuild in Go or Rust to solve a performance bottleneck. As long as the rebuilt API has the same endpoints, arguments, and return values, none of the services consuming that API don’t even need to be made aware of the change — they’ll just see a performance boost once the new version rolls out.</p>
<p>Nothing can reach its internals and touch things if the API stays accurate. You don’t have to worry that changing a line of code will break the whole codebase. There’s no way for some other piece of code to reach beyond the API boundary.</p>
</div>Padding
Use padding utilities to adjust the spacing inside of an element.
Inset Square
Inset Square adds equal padding to all sides of an element.
You can override the default value with the --inset-size custom property.
| Custom Property | Default Value | Description |
|---|---|---|
--inset-size |
10px | Padding value |
Example
A heading and paragraph inside of a container with equal padding on all sides.
Learn from the web's leading experts.
Every Thursday, Jason pair programs with the brightest minds in web development to learn something new in 90 minutes.
HTML
<div class="lwj-surface lwj-inset-square">
<p class="lwj-stack lwj-heading-2">Learn from the web's leading experts.</p>
<p>Every Thursday, Jason pair programs with the brightest minds in web development to learn something new in 90 minutes.</p>
</div>