grid-of10
An add-on module for Basscss. Includes responsive 10-column grid classes (so 5-columns as well). The default Basscss 12-column grid is great, but sometimes a 5 or 10 column layout is needed.
10-column layout
.gridof10-1 .gridof10-1 .gridof10-1 .gridof10-1 .gridof10-1 .gridof10-1 .gridof10-1 .gridof10-1 .gridof10-1 .gridof10-1
5-column layout
.gridof10-2 .gridof10-2 .gridof10-2 .gridof10-2 .gridof10-2
Responsive Grid
Use Basscss breakpoint styles to change the grid at different screen widths for responsive layouts.
Apply a 5-column grid from the small breakpoint and up with the .sm-gridof10-2
class.
.gridof10-10 .sm-gridof10-2 .gridof10-10 .sm-gridof10-2 .gridof10-10 .sm-gridof10-2 .gridof10-10 .sm-gridof10-2 .gridof10-10 .sm-gridof10-2
Responsive - grid-of10 with Basscss Grid
Combine grid-of10 with the 12-column Basscss Grid classes in responsive layouts. The default size is 100% based on the Basscss Grid class, .col-12
. Apply a 5-column grid with grid-of10, from the medium breakpoint and up with the .md-gridof10-2
class.
.col-12 .md-gridof10-2 .col-12 .md-gridof10-2 .col-12 .md-gridof10-2 .col-12 .md-gridof10-2 .col-12 .md-gridof10-2
Install
npm --save-dev grid-of10
CDN Link
Or use the CDN Link
Usage
PostCSS
;
Notes
This module is meant to be an add-on for Basscss. To use, first install a Basscss project (Basscss, Bassplate, Ace, etc... ) with NPM, and then include @import 'grid-of10';
in the source css file.
These examples assume the document's box-sizing has been set to border-box using a method similar to CSS-Tricks...
MIT license