@citizensadvice/gutters
v1.0.3
Published
Creates negative horizontal margins when combined with the widths utility classes to build grids.
Downloads
5
Keywords
Readme
Gutters
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" />