Gridline NPM | npm.io

➤ Install

yarn add gridline

➤ Import

CSS

@import "gridline/dist";

SCSS

@import "gridline/src";

➤ Usage

<div class="gridline">
  <div>
    ...
  </div>
  ...
</div>

➤ Settings

Container

HTML class	Requires a child	Description
`.gridline`	—	Will create a container that will occupy the full width of the layout.
`.gridline--center`	—	Creates a container aligned to the center of the layout.
`.gridline--left`	—	Creates a container, the left edge of which will be stretched to the left edge of the layout.
`.gridline--right`	—	Creates a container, the right edge of which will be stretched to the right edge of the layout.
`.gridline--scrolling`	required	Will create a container that, when overflowing with content horizontally, will receive a horizontal scroll.
`.gridline--collapse`	—	Lines up the grid in a single column.

CSS styling

Variable	Target	Default	Unit	Description
`--gridline-width`	`.gridline`	`100%`	`px`	Width of the layout.
`--gridline-padding`	`.gridline`	`20px`	`px`, `vw`	Sets indents between columns.
`--gridline-gap`	`.gridline`	`20px`	`px`, `vw`	Sets indents between columns. `0px` to turn off gap.
`--gridline-column`	child	`1`	integer or decimal	Sets column width.
`--gridline-offset`	child	`0`	integer or decimal	Sets the column offset to the right.