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 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.
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.
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.
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.
. That’s all now you can use following classes in your HTML.
around line 33 and 34.
class, If you are using custom classes as a wrapper or out container, don’t forget to set the maximum width for your site.
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.
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.
classes. To target medium screen devices, you have 4 columns grid. For small screen devices, you have 2 columns grid.
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.