Getting started with Toast: A light-weight responsive CSS grid

Toast is a really light-weight fully responsive CSS grid. Toast grid was created by Dan Eden, the man behind animate.css and baseline.js.

If you are already using Bootstrap, Foundation or any other CSS framework, You might ask why you should learn a new grid system.

The number one reason to use Toast grid system is that, it is very light, no-nonsense grid system, for creating responsive websites quickly and easily.

Bootstrap, Foundation and many other CSS framework allow you to create responsive, mobile first websites quickly as well but they are not really light weight. CSS frameworks are very powerful but they offer a lot of features and functionality that you might not need in every project. That means a lot of unused code on your production site.

Toast is just 313 lines of code and 7KB uncompressed, while the minified version of bootstrap 3.2 CSS is 106KB (6200 lines of code).

Toast Grid basics

Toast Grid is fully responsive and customizable. Toast uses pixel for gutters, not rem, ems or percentages. You can also customize Toast’s CSS classes, if you don’t like to use default lengthy CSS classes for grid columns.

Toast supports Sass. So if you are already using Sass you can very easily customize CSS classes, default gutters (spacing between grid columns) etc. But even if you don’t know how to use Sass, no problem, simply open toast.css in your code editor and use search and replace feature to replace default class names with your own class names for grid and columns.

Getting started with Toast Grid

Getting started with Toast grid is very simple and easy. If you are an absolute beginner. don’t worry, I will explain everything. Create a new file and save it as index.html and add following code to it:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Taost Grid System</title>
<link rel="stylesheet" href="taost.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- page content goes here -->
</body>
</html>

I am using two different CSS files, toast.css and style.css file but you can use a single file. Either rename toast.css to style.css file and delete other style.css file or copy all code from the toast.css file and paste it into style.css file and delete the toast.css file.

Just like Bootstrap and foundation grid system, Toast offers different CSS classes to create multiple columns layout very easily. Here you can see the basic markup to create a simple two column layout with Toast grid:

<div class="grid">
<div class="grid__col grid__col--6-of-12">
A half-width column.
</div>
<div class="grid__col grid__col--6-of-12">
A half-width column.
</div>
</div>

In Toast Grid

.grid

works as a container for your columns and two create columns for your layout you will have to use

grid__col grid__col--*-of-*

classes. Just replace * with number of columns you need e.g

grid__col grid__col--6-of-12

.

Bootstrap offers a simple 12 column grid, but Toast offers 2, 3, 4, 5, 6, 8 and 12 columns grid system known as Toast Column Groups. It allows you to create a multi-column layout very easily.

In above example, I have used 12 column grid to create two equal columns layout but you can also use following variation of Toast grid to create two equal columns layout.

Example one: 2 column grid

<div class="grid">
<div class="grid__col grid__col--1-of-2">
A half-width column.
</div>
<div class="grid__col grid__col--6-of-2">
A half-width column.
</div>
</div>

Example two: 4 column grid

<div class="grid">
<div class="grid__col grid__col--2-of-4">
A half-width column.
</div>
<div class="grid__col grid__col--2-of-4">
A half-width column.
</div>
</div>

Example three: 8 column grid

<div class="grid">
<div class="grid__col grid__col--4-of-8">
A half-width column.
</div>
<div class="grid__col grid__col--4-of-8">
A half-width column.
</div>
</div>

All of above examples will generate two equal columns. But what if you need 5 equal columns for your site? With default 12 column grid you cannot create 5 equal columns without using extra classes but with Toast’s 5 column group, you can do it very easily. See example below:

<div class="grid">
<div class="grid__col grid__col--1-of-5">
A half-width column.
</div>
<div class="grid__col grid__col--1-of-5">
A half-width column.
</div>
<div class="grid__col grid__col--1-of-5">
A half-width column.
</div>
<div class="grid__col grid__col--1-of-5">
A half-width column.
</div>
<div class="grid__col grid__col--1-of-5">
A half-width column.
</div>
</div>

12 column grid is most popular and widely used. 12 columns gris system allow you to create multiple columns layout for different projects. I personally like to use 12 columns grid.

Rename default classes

As you can see Toast’s classes are very long but you can rename all these classes very easily with Sass variables or just use search and replace feature. So lets rename Toast’s default

grid

class to

row

and long

grid__col

classes to simple

col

.

Open your style.css or toast.css file and around line 43, you will see

.grid

just rename this to

.row

.

Now search for

.grid__col

and replace it with

col

. That’s all now you can use following classes in your HTML.

<div class="row">
<div class="col col--6-of-12">
A half-width column.
</div>
<div class="col col--6-of-12">
A half-width column.
</div>
</div>

If you are using Sass, then simply rename

$toast-grid-namespace

and

$toast-grid-column-namaspace 

around line 33 and 34.

Maximum width for your site layout

To set a maximum width of, for example, 960px you can add custom CSS in your style.css file or simply use a div with a class of container or wrapper and set your desired maximum width:

.grid{max-widht: 960px; margin: 0 auto;}
.row{max-widht: 960px; margin: 0 auto;}
.container{max-widht: 960px; margin: 0 auto;}
.wrapper{max-widht: 960px; margin: 0 auto;}

If you are using default classes, just set maximum width for the 

.grid

class, If you are using custom classes as a wrapper or out container, don’t forget to set the maximum width for your site.

Additional classes

Toast Grid also offers different classes for your grids and columns for example push, pull and no-gutter classes. If you don’t want to use push and pull classes in your project, You can disable them with Sass.

You can use following classes

  • col--push-2-of-12

    to push columns

  • col--pull-2-of-12

    to pull columns

  • col--ab

    align bottom

  • col--am

    align middle

  • row--no-gutter

    to remove gutter (spacing between columns)

  • col--d-first

    to reorder columns

  • col--d-last

    to reorder columns

  • col--centered

    for centered columns

Small and medium grid

Just like Bootstrap, Toast also offers CSS classes to target small and medium screen devices. That means, if you need a multicolumn layout for small or medium screen devices, you can apply additional classes.

To target medium screen devices, You can add

col--m-*-of-4

classes. To target medium screen devices, you have 4 columns grid. For small screen devices, you have 2 columns grid.

Final words

Toast is a very light-weight and fully customizable responsive grid system. So if you are looking for an alternative to Bootstrap and Foundation frameworks, you should give it a try.

Tahir Taous loves to write about WordPress, Theme Development, Responsive Design and Blogging. He is an expert when it comes to use awesome tools and techniques to create and customize WordPress Themes. Download WordPress Theme Development Toolkit, which reveals best tools for Responsive WordPress theme development. More articles by Tahir Taous
  • AntoxaGray

    I have fairly good PC (i5, Nvidia GTX 960, 8 GB Ram) but responsive sites lag for me for some reason, they scroll slower and especially lag when I try to resize pages. Maybe its something to do with overbloated sites that use them.

    I like the idea of them though.

  • So that is why my class of grid__col–m-6-of-12 does not work. Is it is said in the article, the grid for tablet and mobile gives us only 4 columns to play. I also checked the exported CSS file and that is indeed the case.

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress