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.
bower install freestyle-gridOf course, you can use compiled CSS files only.
<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.
<div class="fgrid fgrid-small-3 fgrid-large-6">
<p class="fgrid-item">Lorem Ipsum…</p>
…
</div>Note: ul/li markup is not required.
<ul class="fgrid fgrid-small-2 fgrid-large-5">
<li class="fgrid-item"><img …></li>
…
</ul>
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 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- 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>Made in Prague by Martin Michalek (martin@vzhurudolu.cz).
