@citizensadvice/gutters

Creates negative horizontal margins when combined with the widths utility classes to build grids.

Usage no npm install needed!

<script type="module">
  import citizensadviceGutters from 'https://cdn.skypack.dev/@citizensadvice/gutters';
</script>

README

Gutters npm (scoped)

Creates negative horizontal margins when combined with the widths utility classes to build grids.

Classes

Class name Value
.gutter $spacing-2 (0.5rem) or (8px) 
.gutter {
  margin-left: -8px;
  margin-right: -8px;
}

Responsive gutter classes

To apply specific classes at set screen widths, use the following classes:

Class name Description
[aboveClassName]-ns Screens with a min-width of 48rem
[aboveClassName]-m Screens with widths from 48rem to 64rem
[aboveClassName]-l Screens with a min-width of 64rem

Examples

<div class="gutter gutter-ns">...</div>

Installation

$ npm install @citizensadvice/gutters

now import into your stylesheet...

@import '@citizensadvice/gutters/index.scss';

You can also make use of the unpkg service, try adding the link below to the head of your HTML file

<link src="https://unpkg.com/@citizensadvice/gutters@latest/build/gutters.css" />