Saphire CSS
Index
Containers
Centers an element and caps its width. Available in 100px steps from 300 to 1800
(e.g. .contain-600, .contain-1200).
contain-300, contain-400, contain-500, contain-600, contain-700, contain-800, contain-900, contain-1000, contain-1100, contain-1200, contain-1300, contain-1400, contain-1500, contain-1600, contain-1700, contain-1800
Example:
<div class="contain-1200 p-mobile-1250">
...content...
</div>These often are used in conjunction with one of the p-mobile-* classes, which will add padding to the left and right of a section below a pixel dimension. This usually works well when 50px larger than the contain class, so for instance, these work well together: contain-1200 p-mobile-1250
Columns – Fluid Grid
columns-fluid
A flex-based 12-column grid. Wrap columns in .columns-fluid, then size each
child with one of the following (each roughly n/12 of the row's width):
col-1, col-2, col-3, col-4, col-5, col-6, col-7, col-8, col-9, col-10, col-11, col-12
Example:
<div class="columns-fluid collapse-800">
<div class="col-4">...</div>
<div class="col-8">...</div>
</div>columns-fluid.collapse-*
Add alongside .columns-fluid to stack all columns to full width below the given
breakpoint.
collapse-500, collapse-600, collapse-700, collapse-800, collapse-900, collapse-1000, collapse-1100, collapse-1200, collapse-1300
Columns – Flex
columns-flex
A flex row for fixed/fluid column layouts (e.g. a fixed sidebar next to a fluid content
column). Children use .col-fluid to grow, or one of the fixed-width classes below.
Example:
<div class="columns-flex">
<div class="col col-100"></div>
<div class="col col-fluid"></div>
</div>Fixed-width columns
Used inside .columns-flex for a fixed pixel width column:
col-20, col-25, col-50, col-60, col-65, col-75, col-85, col-100, col-125, col-150, col-200, col-250, col-300, col-350, col-400, col-500, col-600
Centering a column's own content
Centers a .columns-flex child's own content horizontally or vertically (flex on the column itself):
col.center-horizontal, col.center-vertical
.columns-flex.collapse-*
Stacks the flex columns vertically below the given breakpoint.
collapse-400, collapse-500, collapse-600, collapse-700, collapse-800, collapse-900, collapse-1000, collapse-1100, collapse-1200, collapse-1300
Standard tile sets
A quick flex row with even gutters: children with class .col are sized to 48%
(halves) or 32% (thirds), spaced with justify-content: space-between.
flex-tiles-halves, flex-tiles-thirds
Columns – CSS Grid
.columns-grid
A CSS grid row, defaults to 3 equal columns with a 40px column gap
(grid-template-columns: repeat(3, minmax(0, 1fr))).
Example:
<div class="columns-grid columns-grid-3 column-gap-40 collapse-800">
<div>...</div>
<div>...</div>
<div>...</div>
</div>columns-grid-*
Combine with .columns-grid to set the column count:
columns-grid-1, columns-grid-2, columns-grid-3, columns-grid-4, columns-grid-5
column-gap-*
Combine with .columns-grid to override the column gap:
column-gap-10, column-gap-20, column-gap-30, column-gap-40, column-gap-50, column-gap-75, column-gap-100
row-gap-*
Combine with .columns-grid to set the row gap:
row-gap-10, row-gap-20, row-gap-30, row-gap-40, row-gap-50, row-gap-75
columns-grid.collapse-*
Drops to a single column below the given breakpoint:
collapse-400, collapse-500, collapse-600, collapse-700, collapse-800, collapse-900, collapse-1000, collapse-1100, collapse-1200
Alignment & Flex Helpers
Example:
<div class="horizontal-right horizontal-left-lessthan-800">
...content...
</div>Vertical alignment
Turns an element into a flex container and vertically centers (or bottom-aligns) its children:
vertical-center, vertical-bottom
Horizontal alignment
Turns an element into a flex container and centers (or right-aligns) its children horizontally:
horizontal-center, horizontal-right
horizontal-left-lessthan-*
Combine with .horizontal-right to switch back to left-aligned below the given breakpoint:
horizontal-left-lessthan-600, horizontal-left-lessthan-700, horizontal-left-lessthan-800, horizontal-left-lessthan-900, horizontal-left-lessthan-1000, horizontal-left-lessthan-1100
Floats, Display & Positioning
Example:
<div>
<img class="left" src="..." alt="" />
<p>Text wraps around the floated image.</p>
<div class="clear"></div>
</div>Floats
Standard float/clear helpers:
left, right, clear
Display
.inline-block sets display: inline-block; .inline-block-middle sets vertical-align: middle; .block sets display: block:
inline-block, inline-block-middle, block
.position-relative
Sets position: relative.
Sizing
.box-sizing-border-box sets box-sizing: border-box;
.width-100 and .height-100 set 100% width/height;
.min-height-100px sets a 100px minimum height:
box-sizing-border-box, width-100, height-100, min-height-100px
Max Width
Example:
<div class="max-600">
...content...
</div>max-*
Sets max-width in 100px steps:
max-300, max-400, max-500, max-600, max-700, max-800, max-900, max-1000
max-80
Sets max-width: 80%.
max-remove-*
Combine with .max-80 to remove the max-width below the given breakpoint:
max-remove-900, max-remove-1000, max-remove-1100, max-remove-1200
image-max-*
Caps an image's max-width:
image-max-200, image-max-300, image-max-400, image-max-500
heading-max-*
Caps the max-width of any h1/h2/h3 inside the element:
heading-max-200, heading-max-250, heading-max-300, heading-max-350, heading-max-400, heading-max-500, heading-max-600, heading-max-700, heading-max-800, heading-max-900
Example:
<div class="heading-max-400">
<h2>This heading won't grow past 400px wide</h2>
</div>heading-center
Centers any h1/h2/h3 inside the element via margin: 0 auto.
text-max-*
Caps the max-width of any paragraph or list inside the element:
text-max-400, text-max-500, text-max-600, text-max-700, text-max-800, text-max-900, text-max-1000
Example:
<div class="text-max-600">
<p>This paragraph won't grow past 600px wide</p>
</div>Text Utilities
Example:
<p class="text-center">Centered text</p>Alignment
Alert / error text
Red text; .text-alert is also bold:
text-alert, text-error
.text-italic
font-style: italic.
.text-two-columns
Splits text into 2 CSS columns (with a 2em gap) at 600px and above.
Responsive text-align overrides
Combine with .text-right or .text-center to force left alignment
below the given breakpoint (also re-aligns any h1–h4/p inside):
text-left-500, text-left-600, text-left-700, text-left-800, text-left-900, text-left-1000
Combine with .text-left or .text-right to force center alignment
below the given breakpoint (also re-aligns any h1–h4/p inside):
text-center-500, text-center-600, text-center-700, text-center-800, text-center-900, text-center-1000, text-centered-1000
List Utilities
Example:
<ul class="list-bulleted">
<li>Item one</li>
<li>Item two</li>
</ul>Removing bullets
Removes bullet styling (list-style-type: none), including on nested uls:
list-standard, list-no-bullets
.list-bulleted
Forces disc bullets and indents list items 18px.
Multi-column lists
Lays out list items into 2 or 3 CSS columns (75px gap by default), with items kept whole (break-inside: avoid-column):
list-2-columns, list-3-columns
.gutter-*
Combine with .list-2-columns to change its column gap:
gutter-50, gutter-75, gutter-100, gutter-125, gutter-150
.collapse-*
Combine with .list-2-columns or .list-3-columns to drop to a single column below the given breakpoint:
collapse-600, collapse-700, collapse-800, collapse-900, collapse-1000
.list-fa
Removes bullets and prepends a Font Awesome icon (default: a right-pointing icon) before each
<li>.
Font Awesome icon variants
Combine with .list-fa to swap in a different Font Awesome icon for the list marker:
list-check, list-check-square, list-check-square-o, list-check-circle, list-check-circle-o, list-stars, list-chevron, list-chevron-circle, list-caret
Padding
Example:
<div class="p-t-50 p-b-50">
...content...
</div>.p-* (all sides)
All-sides padding in fixed pixel steps:
p-10, p-15, p-20, p-25, p-30, p-35, p-40, p-50, p-60, p-70, p-75, p-100, p-125, p-150, p-200, p-250
.p-t-*
Padding-top in fixed pixel steps:
p-t-5, p-t-10, p-t-15, p-t-20, p-t-25, p-t-30, p-t-40, p-t-50, p-t-70, p-t-75, p-t-100, p-t-125, p-t-150, p-t-200, p-t-250
.p-b-*
Padding-bottom in fixed pixel steps:
p-b-1, p-b-5, p-b-10, p-b-15, p-b-20, p-b-25, p-b-30, p-b-40, p-b-50, p-b-70, p-b-75, p-b-100, p-b-125, p-b-150, p-b-200, p-b-250
.p-l-*
Padding-left in fixed pixel steps:
p-l-5, p-l-10, p-l-15, p-l-20, p-l-25, p-l-30, p-l-35, p-l-40, p-l-50, p-l-60, p-l-70, p-l-75, p-l-100, p-l-125, p-l-150, p-l-200, p-l-300
.p-r-*
Padding-right in fixed pixel steps:
p-r-5, p-r-10, p-r-15, p-r-20, p-r-25, p-r-30, p-r-35, p-r-40, p-r-50, p-r-60, p-r-70, p-r-75, p-r-100, p-r-125, p-r-150, p-r-200, p-r-250, p-r-300, p-r-350
.p-tb-*
Padding-top and padding-bottom together, in matching pixel steps:
p-tb-10, p-tb-20, p-tb-25, p-tb-30, p-tb-40, p-tb-50, p-tb-70, p-tb-75, p-tb-100, p-tb-125
.p-remove-*
Zeroes out all padding below the given breakpoint:
p-remove-600, p-remove-700, p-remove-800, p-remove-900, p-remove-1000, p-remove-1100, p-remove-1200
.p-mobile-*
Adds 5% left/right padding (plus border-box sizing) below the given breakpoint. Commonly used
as a page-edge gutter, e.g. .p-mobile-1250.
p-mobile-550, p-mobile-600, p-mobile-650, p-mobile-700, p-mobile-750, p-mobile-800, p-mobile-850, p-mobile-900, p-mobile-950, p-mobile-1000, p-mobile-1050, p-mobile-1100, p-mobile-1150, p-mobile-1200, p-mobile-1250, p-mobile-1300, p-mobile-1350, p-mobile-1400, p-mobile-1450, p-mobile-1500, p-mobile-1550, p-mobile-1600, p-mobile-1650, p-mobile-1700, p-mobile-1750, p-mobile-1800, p-mobile-1850
Responsive Visibility
Example:
<div class="hide-lessthan-800">
Only visible at 800px and wider
</div>.hide
display: none, unconditionally.
.hide-lessthan-*
Hides the element below the given breakpoint:
hide-lessthan-400, hide-lessthan-500, hide-lessthan-600, hide-lessthan-700, hide-lessthan-800, hide-lessthan-900, hide-lessthan-1000, hide-lessthan-1100, hide-lessthan-1200, hide-lessthan-1300, hide-lessthan-1400, hide-lessthan-1500, hide-lessthan-1600, hide-lessthan-1700, hide-lessthan-1800
.hide-morethan-*
Hides the element above the given breakpoint:
hide-morethan-400, hide-morethan-500, hide-morethan-600, hide-morethan-700, hide-morethan-800, hide-morethan-900, hide-morethan-1000, hide-morethan-1100, hide-morethan-1200, hide-morethan-1300, hide-morethan-1400, hide-morethan-1500, hide-morethan-1600, hide-morethan-1700, hide-morethan-1800