GridKit
Lightweight Sass grid framework.
Installation
npm install gridkitImport the main file into your project to use the available tools:
@import "./node_modules/gridkit/core/gridkit";Optional: Import the utility classes into your project:
@import "./node_modules/gridkit/core/utilities";See Usage below for instructions on how to override defaults.
Usage
Variables
The following variables can be overidden in your project. If using the utility classes, these variables should be changed before the utility classes are imported:
$breakpoint: 896px !default;
$gutter: 20px !default;The column width variables should not be overridden:
$one-half: calc((100% - (#{$gutter} * 1)) / 2);
$one-third: calc((100% - (#{$gutter} * 2)) / 3);
$one-fourth: calc((100% - (#{$gutter} * 3)) / 4);
$one-fifth: calc((100% - (#{$gutter} * 4)) / 5);
$one-sixth: calc((100% - (#{$gutter} * 5)) / 6);
$one-seventh: calc((100% - (#{$gutter} * 6)) / 7);
$one-eighth: calc((100% - (#{$gutter} * 7)) / 8);
$one-ninth: calc((100% - (#{$gutter} * 8)) / 9);
$one-tenth: calc((100% - (#{$gutter} * 9)) / 10);
$one-eleventh: calc((100% - (#{$gutter} * 10)) / 11);
$one-twelfth: calc((100% - (#{$gutter} * 11)) / 12);
$two-thirds: calc(#{$one-third} * 2 + #{$gutter});
$two-fourths: calc(#{$one-fourth} * 2 + #{$gutter});
$two-fifths: calc(#{$one-fifth} * 2 + #{$gutter});
$two-sixths: calc(#{$one-sixth} * 2 + #{$gutter});
$two-sevenths: calc(#{$one-seventh} * 2 + #{$gutter});
$two-eighths: calc(#{$one-eighth} * 2 + #{$gutter});
$two-ninths: calc(#{$one-ninth} * 2 + #{$gutter});
$two-tenths: calc(#{$one-tenth} * 2 + #{$gutter});
$two-elevenths: calc(#{$one-eleventh} * 2 + #{$gutter});
$two-twelfths: calc(#{$one-twelfth} * 2 + #{$gutter});
$three-fourths: calc(#{$one-fourth} * 3 + (#{$gutter} * 2));
$three-fifths: calc(#{$one-fifth} * 3 + (#{$gutter} * 2));
$three-sixths: calc(#{$one-sixth} * 3 + (#{$gutter} * 2));
$three-sevenths: calc(#{$one-seventh} * 3 + (#{$gutter} * 2));
$three-eighths: calc(#{$one-eighth} * 3 + (#{$gutter} * 2));
$three-ninths: calc(#{$one-ninth} * 3 + (#{$gutter} * 2));
$three-tenths: calc(#{$one-tenth} * 3 + (#{$gutter} * 2));
$three-elevenths: calc(#{$one-eleventh} * 3 + (#{$gutter} * 2));
$three-twelfths: calc(#{$one-twelfth} * 3 + (#{$gutter} * 2));
$four-fifths: calc(#{$one-fifth} * 4 + (#{$gutter} * 3));
$four-sixths: calc(#{$one-sixth} * 4 + (#{$gutter} * 3));
$four-sevenths: calc(#{$one-seventh} * 4 + (#{$gutter} * 3));
$four-eighths: calc(#{$one-eighth} * 4 + (#{$gutter} * 3));
$four-ninths: calc(#{$one-ninth} * 4 + (#{$gutter} * 3));
$four-tenths: calc(#{$one-tenth} * 4 + (#{$gutter} * 3));
$four-elevenths: calc(#{$one-eleventh} * 4 + (#{$gutter} * 3));
$four-twelfths: calc(#{$one-twelfth} * 4 + (#{$gutter} * 3));
$five-sixths: calc(#{$one-sixth} * 5 + (#{$gutter} * 4));
$five-sevenths: calc(#{$one-seventh} * 5 + (#{$gutter} * 4));
$five-eighths: calc(#{$one-eighth} * 5 + (#{$gutter} * 4));
$five-ninths: calc(#{$one-ninth} * 5 + (#{$gutter} * 4));
$five-tenths: calc(#{$one-tenth} * 5 + (#{$gutter} * 4));
$five-elevenths: calc(#{$one-eleventh} * 5 + (#{$gutter} * 4));
$five-twelfths: calc(#{$one-twelfth} * 5 + (#{$gutter} * 4));
$six-sevenths: calc(#{$one-seventh} * 6 + (#{$gutter} * 5));
$six-eighths: calc(#{$one-eighth} * 6 + (#{$gutter} * 5));
$six-ninths: calc(#{$one-ninth} * 6 + (#{$gutter} * 5));
$six-tenths: calc(#{$one-tenth} * 6 + (#{$gutter} * 5));
$six-elevenths: calc(#{$one-eleventh} * 6 + (#{$gutter} * 5));
$six-twelfths: calc(#{$one-twelfth} * 6 + (#{$gutter} * 5));
$seven-eighths: calc(#{$one-eighth} * 7 + (#{$gutter} * 6));
$seven-ninths: calc(#{$one-ninth} * 7 + (#{$gutter} * 6));
$seven-tenths: calc(#{$one-tenth} * 7 + (#{$gutter} * 6));
$seven-elevenths: calc(#{$one-eleventh} * 7 + (#{$gutter} * 6));
$seven-twelfths: calc(#{$one-twelfth} * 7 + (#{$gutter} * 6));
$eight-ninths: calc(#{$one-ninth} * 8 + (#{$gutter} * 7));
$eight-tenths: calc(#{$one-tenth} * 8 + (#{$gutter} * 7));
$eight-elevenths: calc(#{$one-eleventh} * 8 + (#{$gutter} * 7));
$eight-twelfths: calc(#{$one-twelfth} * 8 + (#{$gutter} * 7));
$nine-tenths: calc(#{$one-tenth} * 9 + (#{$gutter} * 8));
$nine-elevenths: calc(#{$one-eleventh} * 9 + (#{$gutter} * 8));
$nine-twelfths: calc(#{$one-twelfth} * 9 + (#{$gutter} * 8));
$ten-elevenths: calc(#{$one-eleventh} * 10 + (#{$gutter} * 9));
$ten-twelfths: calc(#{$one-twelfth} * 10 + (#{$gutter} * 9));
$eleven-twelfths: calc(#{$one-twelfth} * 11 + (#{$gutter} * 10));Mixins
Grid
.grid {
@include grid();
}Outputs:
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
> div {
margin-right: 0;
margin-left: 0;
}
}Column
.column {
@include column(one-third);
}Outputs:
.column {
width: calc((100% - (#{$gutter} * 1)) / 2);
}Contributing
Command to compile Sass:
sass core/__index.scss:gridkit.css --style compressed
