How to use Cute Grids

This is a golden age for frameworks, with dozens for us to choose from. We have great options like Bootstrap and Foundation, but sometimes these frameworks deliver more than we want.

Sometimes, all we need is a clean, and responsive grid. Cue: Cute Grids.

Why use Cute Grids?

The idea behind Cute Grids is to get you away from a full featured framework, and focus on just the grid.

Cute Grids take a mobile-first approach, so that all of your websites work on mobile as well as desktop. The framework is completely adaptable and includes five media queries with em widths specified for five different device sizes.

Cute Grids is a great option if all you really need is a grid system, it has loads of benefits and none of the clutter.

The basics

In order to get up and running with Cute Grids you just need to link to the CSS file and you’re done. There are no JavaScript files, no complicated CSS inclusions and no combinations, just a single file:

<link href=“css/cutegrids.min.css” rel="stylesheet">

(You can also include nomalize.css to ensure you have a reset for your webpage if you like, but all you really need is the Cute Grids CSS file.)

After this, you’re ready to start using Cute Grids. You can start by defining a row:

<div class=“row”></div>

Once you’ve defined the row, you need to divide it into columns. You do so by adding a new div with the class keywords “cute” followed by the column width, followed by the device name, separated by hyphens. Each row must add up to a total of 12 columns, like so:

<div class="row">
    <div class=“cute-3-laptop”>
            content here....
    </div>
    <div class=“cute-3-laptop”>
            content here....
    </div>
    <div class=“cute-6-laptop">
            content here....
    </div>
</div>

In this case you can see that we’re targeting laptops, which means that this grid will have 3 columns except when the device’s width is smaller than the width set by the class, in which case the column’s width will be 100%.

The best thing about Cute Grids is that whilst being minimal, it still managed to pack in some in-depth features. You can have two sets of classes in a column, for example, one for laptop and another for tablet, like so:

<div class="row">
    <div class=“cute-3-laptop cute-6-tablet”> content here.... </div>
    <div class=“cute-3-laptop cute-6-tablet”> content here.... </div>
    <div class=“cute-6-laptop cute-12-tablet“> content here.... </div>
</div>

As you can see, if you set a second class you can define different widths for different devices. In this case you’ll have 3 columns on laptops and desktops, but on tablet you’ll have 2 columns in the first row and 1 spanning the whole row beneath.

This is because the total must add up to 12.

You can, if you wish, also nest columns.

Offsetting columns

You can add offsets to your columns by adding “offset” to the class name after the device, like so:

<div class=“cute-6-tablet cute-2-tablet-offset”>
    Content Here
</div>

This will offset your grid by two columns.

Changing column order

When building responsive sites you may sometimes need to change the order of your columns, especially when switching between desktop and phone. To do that, you use “push” and “pull” keywords in your classes:

<div class="row">
    <div class=“cute-4-desktop cute-8-tablet-push"> 
        Content Here
    </div>
    <div class=“cute-8-desktop cute-4-tablet-pull">
        Content Here
    </div>
</div>

This will switch the order of the columns in your design when viewed on a tablet.

Centering columns

It’s also really easy to center a column using just classes. In keeping with the rest of this framework, you just need to add the “center” keyword to the class name:

<div class="row">
    <div class=“cute-12-tablet center-tablet”> 
        Content Here
    </div>
</div>

And because we can center columns, we can also uncenter them, with similar syntax:

<div class="row">
    <div class=“cute-12-desktop center-desktop uncenter-tablet”> 
        Content Here
    </div>
</div>

Show or hide columns

Occasionally, you’ll want to hide a column altogether on a particular device. Cute Grids allows you to do so, with the “hide” and “show” keywords:

<div class="row">
    <div class=“cute-12-desktop .hide-tablet .show-phone”> 
        Content Here
    </div>
</div>

In this case the column will be hidden at tablet sizes and shown at phone sizes.

Responsive images

You can even make your images responsive using Cute Grids, to do that you just need to add the class “responsive-img” to your image.

<img src=”images/image.png” class=”responsive-img”/>

Final thoughts

As you can see Cute Grids is an easy to setup and use solution, but at the same time it’s very powerful and affords you a great deal of control.

It’s a great grid framework to look at for your projects, combing power with simplicity.