Girder is a simple yet versatile grid designed for building with Sass, a fantastic pre-processor. It builds flexible layouts divided into logical sections and its designed to be used with Sass, its also super simple to use it with pure CSS. View the examples
To get started just include the Girder CSS file in your document before your site's custom styles so you can reference the layout classes from Girder.
<link rel="stylesheet" href="girder.css"> <link rel="stylesheet" href="css/example.css">
The basic structure in HTML which hooks on to this can vary based on your approach, the only important part is to use the self-clearing
.row classes as your building blocks:
<main class="container"> <section class="features row"> <div class="unit third"> <p>First column.</p> </div> <div class="unit third"> <p>Second column.</p> </div> <div class="unit third"> <p>Third column.</p> </div> </section> </main>
Note Using the Sass version of Girder you won't need the
class="unit third" from this example, instead you'll want to use the unit & responsive-unit mixins.