A CSS grid system created for developing consistent, responsive and liquid grids.
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>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 jags.css file:
$ sass jags.scss:jags.css --style expandedor compressed:
$ sass jags.scss:jags.min.css --style compressed --sourcemap=noneThere are a few things you might like to know...
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.
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.
- 3.0.0 Added new grid variations (33/66, 25/75);
- 2.1.0 Added project to bower;
- 2.0.0 Adopted loose BEM syntax for better CSS performance;
- 1.1.0 Changed to semantic versioning.
Copyright © 2013 @lawlesscreation
Licensed under MIT
- Nothing.