Utilities are single-purpose styles that provide the backbone for layout. Once these are set, they should be considered immutable and never change or be extended. Each utility is designed to do one thing well, while making its usage simple and obvious with short, humanized naming conventions.
Use these utilities to alter default typographic styles.
Use the following layout utilities to alter default HTML layout.
Use utilites to create a media object.
For a container with a flexible center, use a double-sided media object.
Margin and padding utilities are based on a global white space scale defined with variables. These utilities use a shorthand naming convention.
Shorthand | Description |
---|---|
m | Margin |
p | Padding |
t | Top |
r | Right |
b | Bottom |
l | Left |
x | X-axis (left and right) |
y | Y-axis (top and bottom) |
n | Negative (margin only) |
1 | --space-1 (default .5rem) |
2 | --space-2 (default 1rem) |
3 | --space-3 (default 2rem) |
4 | --space-4 (default 4rem) |
Use these utilities to reset or alter default margins. Negative x-axis margins are used to offset padding. Margin auto is used to horizontally center block-level elements with a set width.
Padding utilities are only available in symmetrical orientations. This is to normalize the spacing used around elements.
These styles allow for conditionally showing and hiding elements using a mobile-first approach.
Prefix | Description |
---|---|
(no prefix) | Not scoped to a breakpoint |
sm- | --breakpoint-sm (default: min-width 40em) |
md- | --breakpoint-md (default: min-width 52em) |
lg- | --breakpoint-lg (default: min-width 64em) |
To adjust the default breakpoints, declare custom media queries after importing the file via Rework, or manually adjust them in CSS.
Resize the browser window to see the effect.
Control wrapping at different screen widths.
These styles alter the default document flow.
Use positions with caution. They are often unnecessary and commonly misused.
See the Guide to Basics for more info.
Utility styles use the following variables. To alter these defaults, declare new values after importing Basscss with Rework.