gridline

gridline

^{450B gzipped}

Demo

➤ Install

``console
yarn add gridline
`



➤ Import

CSS
`scss
@import "gridline/dist";
`

SCSS
`scss
@import "gridline/src";
`



➤ Usage

`html


| 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. |



➤ Continue to the edge

To extend the left or right column to the edge of the window, you need to add the .edge class to the column, or a class that has edge in its name.

➤ Scrolling

In order for a horizontal scroll to appear when the container overflows, it is necessary to add a styling class to the parent container .gridline--scrolling, and add a .scrolling class or a class containing scrolling` in the name to the child block.

➤ License

gridline is released under MIT license