A bloat-free and beautiful responsive grid system.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A responsive grid system completely void of bloat and un-needed features.

Basic Usage

Download or clone this whole repository, or use the format below within the body element to get started.

<div class="container">
    <div class="row">

        <div class="col-8">
            <p>I take up 2/3rds of this row!</p>

        <div class="col-4">
            <p>I only take up 1/3rd of this row.</p>


The container element holds rows.

The row element holds columns.

The column elements hold vertical content. They should total out to twelve per row. A column of 8 width takes up 2/3rds of the row, therefore a column of 4 width takes up 1/3rd of the row.



The font is set default to Open Sans through Google Fonts.


This system only utilizes H1, H2, and H3 elements. Add the others as you need them.

Text Alignment

text-left, text-right, text-justify, center (this one works on any type of content.)

Font Weight

text-light, text-medium, text-bold


Use the button class on a div nested inside of an anchor element to create a button.


Use the code class on a div to display a code block. To preserve code formatting, use a pre element.


To create a simple nav bar, simply create a div with the class nav. Include a p element with anchor elements nested inside.

<nav class="nav">
    <p><a href="#">LinkOne</a> |
    <a href="#">LinkTwo</a> |
    <a href="#">LinkThree</a> |
    <a href="#">LinkFour</a></p>


To adjust spacing, there are a few utility classes.

To add a little space above or below any element, you can use pad-top-x and pad-bottom-x respectively, x being 0, 5, 10, 15, 20, or 25.