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
.gridworks 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
gridclass to
rowand long
grid__colclasses to simple
col.
Open your style.css or toast.css file and around line 43, you will see
.gridjust rename this to
.row.
Now search for
.grid__coland 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-namespaceand
$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
.gridclass, 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-4classes. 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.
