Skip to content
This repository was archived by the owner on Feb 2, 2024. It is now read-only.

grids.scss

Jump to bottom
Cameron Wardzala edited this page Oct 14, 2019 · 7 revisions

Dependencies

Spacing Utils

Based on Bootstrap Spacing Utils.

we include a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

How it works

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.

Notation

Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

The classes are named using the format {property}{sides}-{breakpoint}-{size} for xs, sm, md, lg, and xl.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
  • 3 - (by default) for classes that set the margin or padding to $spacer
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3
  • auto - for classes that set the margin to auto

Grids

Based on Flexbox Grid.

Basic Syntax

All you need to remember is .row and .col-{breakpoint}-{column count}.

<div class="row">
    <div class="col-xs-12"></div>
</div>

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, lg, and xl viewport widths.

Fluid

Percent based widths allow fluid resizing of columns and rows.

Offsets

Offset a column. .col-{breakpoint}-offset-{column count 1-12}

Auto Widths

Add any number of auto sizing columns to a row. Let the grid figure it out. .col-{breakpoint}

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column.

  • .start-{breakpoint}
  • .center-{breakpoint}
  • .end-{breakpoint}
  • .top-{breakpoint}
  • .middle-{breakpoint}
  • .bottom-{breakpoint}

Distribution

Add classes to distribute the contents of a row or column.

  • .around-{breakpoint}
  • .between-{breakpoint}

Reordering

Add classes to reorder columns.

  • .first-{breakpoint}
  • .last-{breakpoint}

Reversing

Use .row.reverse to reverse the order of the columns.

Clone this wiki locally