FreestyleGrid
Common grids like the Bootstrap's one are great for common layout. But sometimes your page or UI component needs irregular layout – for example 3, 5 or 11 columns grid. Then you need irregular grid. FreestyleGrid.
FreestyleGrid is a tiny LESS layout module for fluid and responsive – but irregular – grid. Suitable for non-layout grids such as thumbnails. Great for fast prototyping. Based on idea behind Block Grid from Foundation framework.
Table of contents
Installation
bower install freestyle-gridOf course, you can use compiled CSS files only.
Examples & demos
1st example: 1/3 layout everywhere
<ul class="fgrid fgrid-3">
<li class="fgrid-item">Lorem Ipsum…</li>
…
</ul>
Have you noticed that you don't need to write markup for layout row? Yes, writing layout markup with FreestyleGrid is really fast.
2nd example: 1/3 layout on small & 1/6 on large displays
<div class="fgrid fgrid-small-3 fgrid-large-6">
<p class="fgrid-item">Lorem Ipsum…</p>
…
</div>Note: ul/li markup is not required.
3rd example: 1/2 layout on small & 1/5 on large displays with thumbnails
<ul class="fgrid fgrid-small-2 fgrid-large-5">
<li class="fgrid-item"><img …></li>
…
</ul>
Configuration
You are welcome to change FreestyleGrid behavior with LESS variables:
- Generate your own classes with
@include-html-classesset tofalseand our mixins. - Change grid parameters with
@gutter-widthand@max-columns. - Move breakpoints up or down by changing values of
@small-grid-startand@large-grid-start.
FreestyleGrid and Bootstrap
FreestyleGrid cooperation with Bootstrap you can easily try in this demo or source file. FreestyleGrid has LESS mixin, to help generate breakpoints and layout for any grid system, not only the Bootstrap one.
IE8 support
IE8- doesn't support Media Queries so you need to use Respond.js polyfill.
And if your grid items (.fgrid-item) are of unequal height, then you have to add <div class="clearfix"> when starting new layout row. This is because IE8 and lower versions lacks :nth-of-type support.
So the IE8 simplified markup looks like this:
<head>
…
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<style>
img { width: auto } /* http://stackoverflow.com/questions/8610077/height-auto-in-internet-explorer-8-and-below */
</style>
<![endif]-->
</head>
<body>
<ul class="fgrid fgrid-small-2 fgrid-large-5">
<li class="fgrid-item"><img …></li>
…
<!--[if lt IE 9]><div class="clearfix"></div><![endif]-->
…
</ul>
</body>Author and licence
Made in Prague by Martin Michalek (martin@vzhurudolu.cz).
