Crumpet

What's in the ingredients?

Super easy to understand and get started with, all of Crumpet’s code has been commented through out to give you a full understanding of each line, meaning you can spend all your precious time in the code editor. Here are the few files that Crumpet comes with to get you going:

• A index.html that gives you a little demo.
• A settings.scss file which has the frameworks settings in.
• A main.scss which has some demo styles, as well as some instruction on how to incorporate the grid into your site.

HTML Markup

Make a container, add a row and then slap in a column. Super straight forward, no messing around. Bish, bash, bosh.

<div class="container">
    <div class="row">
        <div class="col super-fresh">
            So fresh, so clean
        </div>
        <div class="col super-dope">
            I'm dope
        </div>
    </div>
</div>

Using The Grid

All you need to do is @extend a placeholder selector into a class. You can also hide certain elements and align text on different screen sizes. You can check them out in the settings.scss file.

.super-fresh {
    @extend %grid-5;
    @extend %tablet_grid-4;
    @extend %mobile_grid-2;
}

.super-dope {
    @extend %grid-7;
    @extend %tablet_grid-8;
    @extend %mobile_grid-10;
}