{% set title = 'Utility' %} {% set isdocs = true %} {% extends '../../layouts/default.html' %} {% block content %} {% include '../../partials/_docs-nav.html' %}

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.

Typography

Change typographic styles and defaults with these utilities.

{% include '../../partials/_example.html' with { file: 'type-utilities.html' } %}

Layout

Change the default document flow with display, float, and other utilities.

{% include '../../../examples/layout-utilities.html' %}

Media Object

Create a media object using basic utilities.

{% include '../../partials/_example.html' with { file: 'media-object.html' } %}

Double-Sided Media Object

For a container with a flexible center, use a double-sided media object.

{% include '../../partials/_example.html' with { file: 'double-media-object.html' } %}

White Space Scale

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)

Margins

Change or reset default margins using the global white space scale. Negative x-axis margins are used to offset padding. Margin auto is used to horizontally center block-level elements with a set width.

{% include '../../../examples/margins.html' %}

Padding

Padding utilities are only available in symmetrical orientations. This is to normalize the spacing used around elements.

{% include '../../../examples/padding.html' %}

Margins and padding should never be declared outside of these utilities. This is meant to help create consistent rhythm and avoid magic numbers. If, for some reason, the default white space scale does not accomodate your design, customize and extend it before implementation.

Responsive States

These styles allow for conditionally showing and hiding elements using a mobile-first approach.

Prefix Naming Convention

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.

{% include '../../../examples/responsive-states.html' %}

Example

Resize the browser window to see the effect.

{% include '../../partials/_example.html' with { file: 'responsive-show-hide.html' } %}

Responsive Line Break

Control wrapping at different screen widths.

{% include '../../partials/_example.html' with { file: 'responsive-line-break.html' } %}

Positions

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.

{% include '../../../examples/positions.html' %}

Default Variables

Utility styles use the following variables. To alter these defaults, declare new values after importing Basscss with Rework.

{% include '../../../examples/utility-variables.html' %}

NPM

Utility styles are also available as a standalone NPM module.

npm install basscss-utilities

{% endblock %}