@citizensadvice/gutters NPM

Gutters

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

Class name	Value
`.gutter`	\$spacing-2 (0.5rem) or (8px)

.gutter {
  margin-left: -8px;
  margin-right: -8px;
}

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`

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

$ 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" />

6 years ago

6 years ago

6 years ago

6 years ago