gridline

gridline

^{450B gzipped}

Demo

➤ 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
--width	.gridline	100%	px	Width of the layout.
--padding	.gridline	20px	px, vw	Sets indents between columns.
--gap	.gridline	20px	px, vw	Sets indents between columns. 0px to turn off gap.
--column	child	1	integer or decimal	Sets column width.
--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