A simple, mobile-first SASS Grids System inspired by Susy 3. This is tailored to the common grid system I use in my projects.
- prepare yourself for CSS Grid Layout, 'cause that's why Susy 3.
- require asymmetric grid layout.
- build a more advanced grid system of your own.
Two reasons:
- Susy 3 dropped off all of mixins from 2, all it offers are functions. This requires you to build wrapper mixins and functions to fully tailor it for your needs. So rather than creating these wrappers on top of Susy 3, I dug deep into it's source code, learned how it works, and tailor it's logic to match only the stuff I need.
- I love creating a system of my own, where every aspect is fully relevant to what I need, rather than using an existing library bloated of stuff I don't need. This doesn't mean libraries are overkill in general, it's just part of my own learning goal.
If you like to just use a straight-forward, symmetic, mobile-first grid system, then you're welcome!
Simple Grids is available as an npm module.
npm install sass-simple-grids --save-dev
@import 'path-to-node-modules/sass-simple-grids/simple-grids';
Just include all your grid settings for multiple breakpoints in one go:
@include register-grids((
/*
* This will be default setting,
* if grid functions/mixins are used outside of grid-breakpoint().
*/
base: (
columns: 8,
gutters: 1/4, // or .25
),
/**
* Succeeding breakpoints require a 'breakpoint' key,
* which will be used as the min-width media query.
* It can be a unitless number, which will be suffixed with `px`.
*/
medium: (
breakpoint: 768,
columns: 12,
gutters: .15,
),
/**
* Static gutters are accepted,
* `calc` will be used here for span calculations
*/
large: (
breakpoint: 1280,
columns: 16,
gutters: 16px,
),
));
@include grid-breakpoint($setting-name) {
@content
}
This is similar to that of Susy 2's susy-breakpoint
mixin. The difference is that you don't have to pass a raw media query together with a layout map,
just the name of your registered grid setting:
.column {
width: span(1); /* This will be calculated from the 'base' setting (8 columns) */
margin-right: gutter(); // Will compute the 'base' gutter
/* Just pass the setting name to the mixin */
@include grid-breakpoint('medium') {
width: span(1); /* This will be calculated from the 'medium' setting (12 columns) */
margin-right: gutter(); /* Will compute the 'medium' gutter */
}
@include grid-breakpoint('large') {
width: span(1); /* This will be calculated from the 'large' setting (16 columns) */
margin-right: gutter(); /* Will compute the 'large' gutter */
}
}
In case you haven't notice, you don't need to pass a new grid context to the span.
grid-breakpoint
will make use of the named setting, making it available inside its block scope.
Just make sure that the setting name matches one of your registered grid settings. Else, an error will be thrown out.
The npm package includes demo files.
- Go to the
node_modules/sass-simple-grids
folder. - Run
npm install
. - Run
npm run demo
. This will compile demo assets and boot up a server atlocalhost:3131
for the demo page.
To follow :)