Ingrid is derived from Neat by Thoughbot, cut to the absolute minimum.
Copy ingrid.scss to some place where you can import it in your Sass files.
@import "ingrid";
-
$ingrid-gutter
default: 1rem
Overwrite this to set the gutter between each column. -
$ingrid-visual-color
default: rgba(255, 0, 0, 0.1) Overwrite this to set the color of the columns in the auxilliary visual grid.
A container will just clear the column floats. Ingrid will not set max-width, padding or center your divs. That's up to you 💁.
@include ingrid-container;
Ingrid grids are always composed of 12 columns. You can set a column to take up 1-12 columns:
@include ingrid-column(<columns>);
Where <columns> is the number of columns.
You can push a column by n columns like this:
@include ingrid-push(<columns>);
Where <columns> is the number of columns to push
To aid development you can create a visual grid on the container:
@include ingrid-visual;
A huge thanks to Thoughtbot for Neat (and all their other wonderful tools). The reason for this little library arose when I had to work on a project that used a super old version of RubySass, where I tried to cut down compilation time. (I really miss LibSass)