Description
gridss provides a mobile-first 12-column grid applied using object oriented css. It weights in at ~2kb.
Installation & Usage
npm install --save gridss
<link rel="stylesheet" href="https://unpkg.com/gridss/grid.min.css">
Docs
The source code is quite explanatory, but here are the general classes you can apply:
Container
Span Columns
.col-{1..12}
.col-s-{1...12}
.col-m-{1...12}
.col-l-{1...12}
.col-xl-{1...12}
Start-End Columns
.col-s-{1...12}-{1-12}
.col-m-{1...12}-{1-12}
.col-l-{1...12}-{1-12}
.col-xl-{1...12}-{1-12}
For example:
<div class="gridss"> <div class="col-12 col-s-10 col-m-8 col-l-6 col-xl-4"> 12 columns mobile 10 columns x-small and above 8 columns medium and above 6 columns large and above 4 columns x-large and above </div> </div>
<div class="gridss"> <div class="col-1-8"></div> <div class="col-8-13"></div> </div>
What do you mean by mobile first?
It means that the sized-based grid classes function on that size and larger.
mobile first grid (like gridss): col-l-6 applied to widths at or above "large"
non-mobile first grid: col-l-6 applied to width at or below "large"
License
MIT