The idea of JAGS was to create a grid system that could be used to rapidly create a consistent, responsive, liquid grid that would 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, none seemed to tick all the boxes:
Liquid columns
Percentage widths make them liquid, so they will fill the space available.
You can easily add fixed widths to create a stepped layout if you wish.
Minimal HTML
Progressive class names and the use of CSS attribute selectors make the HTML quick and easy to build (though you can go a little crazy with nesting if you wish!).
CSS media queries
Media queries can be customized easily to allow the grid to respond at breakpoints that suite the content.
Legacy browser support…
If you want it! JAGS will work with IE7+ with a little help from Respond. Heck it will even work with IE6 if you use Selectivizr!
Usage
Simply add the CSS file:
<link rel="stylesheet" media="all" href="jags.min.css" />
Then 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 JS polyfill for CSS3 Media Queries, such as Respond which should be added to the <head>:
<script src="js/respond/respond.min.js"></script>
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 using:
$ sass jags.scss:jags.min.css --style compressed
or expanded:
$ sass jags.scss:jags.css --style expanded
Some notes
There are a few things you might like to know…
Mobile-first
The media queries have been structured in a "mobile-first" approach from 0px up, but feel free to customise they how 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.
What about IE6?
IE6 was supported but has been dropped since version 0.4 of JAGS. That said, it can be done and requires a JavaScript polyfill called Selectivizr for CSS attribute selector support.