Speed Up Development
Awesome Responsive Mixins
Super Lightweight
fGrid is a responsive and customisable grid system for Sass styled websites. It's built to be flexible and small and is suitable for a wide range of projects.
Please Note We're currently specifying and building fGrid, docs are sparse and there's probably some nasty bugs. If you spot issues please report them!
How it works
fGrid's core comprises of a set of definitions for a grid and Sass mixins to simplify responsive styling. The HTML layout for this row is shown.
fGrid can be used explicitly, as in the example, where fGrid classes are placed in the HTML. Alternately using Sass' @extend feature, your own classes can be used.
This is the preferred approach when the classes used are semantically named, such as article for the main body of content or aside for a supplementary item.
<div class="grid-wrap">
<div class="grid-row">
<div class="grid-5">
<p>fGrid's core comprises of a set of definitions for a grid and Sass mixins to simplify responsive styling. The HTML layout for this row is shown.</p>
...
</div>
<div class="grid-7">
<code>
...
</code>
</div>
</div>
</div>
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
We love it for its ease of use and extensibility powers.
Bourbon is a simple and lightweight mixin library for Sass.
Some of the fancy bits of fGrid need Bourbon, and frankly if you're using fGrid you should use Bourbon, it's awesome!