A Deliciously Simple Framework



Uses placeholder selectors to reduce the size of your HTML. No one likes messy.

Create Fast

Creating website layouts fast & responsive will be a breeze. Fast & smart building.


Allows you the freedom to do what you want with your code. Make it your own.

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:

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 class="col super-dope">
            I'm dope

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;

What people say about Crumpet