The idea of JAGS was to create a grid system that could be used to rapidly consruct responsive, liquid grids that were consistent and would easily adapt to various device sizes.
What makes this one different?
Well, maybe nothing! There are lots of CSS grid systems out there, but at the time most seemed overcomplicated or lacked particular features/support. JAGS was created to use:
Liquid columns
Percentage widths make them liquid, so they will fill the space available. You can easily add fixed width to create a stepped layout if you wish.
Consistent HTML
Ever seen a large project with .col, .column, .grid all doing the same thing?! JAGS loosely follows the BEM syntax to ensure your grid system is consistent.
CSS media queries
The CSS breakpoints (as well as the column gutters) can be customized allowing the grid to be configured to suite the content.
Legacy browser support…
JAGS will work with IE6+*, with a little help from Respond, and will gracefully degrade to a linear solution for browers that don't support media queries.
Usage
To get started you can either:
- Clone the repo:
git clone https://github.com/lawlesscreation/just-another-grid-system.git - Or install with Bower:
bower install just-another-grid-system
Then it's just a case of adding the CSS file to your HTML:
<link rel="stylesheet" media="all" href="path/to/jags.css" />
Or import the SCSS file into your main SCSS project:
@import "path/to/jags.scss";
Finally, take a look at the different layouts to find the grid you require. You can nest the code to create even more complex grids!
If you need Internet Explorer support for IE7-IE8 you will need a JavaScript polyfill for the CSS media queries, such as Respond, which should be added to the <head>:
<script src="js/respond/respond.min.js"></script>
Development
SCSS
If you need to change some of the defaults like the media query breakpoints, margins or borders you can do using the _vars.scss and recompile the SCSS:
$ sass jags.scss:jags.css --style expanded
or compressed:
$ sass jags.scss:jags.min.css --style compressed
Some notes
There are a few things you might like to know…
Mobile-first
The media queries have been structured with a "mobile-first" approach from 0px up, but feel free to customise them if you wish!
Equal height columns
By default JAGS doesn't come with the equal height columns script that I'm using here, but feel free to use the one in the demo.
* Works in IE6?!
Yes and no. The grids work fine with the exception of the border variations because IE6's support for adjoining classes is a little flakey.