Hello

toad.css is just my (very) tiny customizable CSS grid system

Like it or want to suggest some improvements ? You can while using links below

Get Started

Want to customize the css or just use it ? Download the project in dev or prod version

Code

Grid

The main container is 980px width. Want to change this width ? Just edit the @grid-width variable at the top of the LESS file, if you want to edit the grid, you will need LESS

Here is the different combination with the grid system

Just add a toad-container class to your wrapper, and then add the t-1, t-2, t-3 … classes to the columns
Want to clear the float ? Add the toad-clear class to any element

Want to remove the gutters ? Just add the no-gutters class to the main container

You can also add a toad-full (100% width) or a toad-fullscreen (100vw width) class to any element

t-1
t-11
t-2
t-10
t-3
t-9
t-4
t-8
t-5
t-7
t-6
t-6
t-2
t-4
t-6
t-3
t-3
t-3
t-3

t-1
t-11
t-2
t-10
t-3
t-9
t-4
t-8
t-5
t-7
t-6
t-6
t-2
t-4
t-6
t-3
t-3
t-3
t-3

Responsive

The grid system has 2 major breakpoints :

  • 980px (the @grid-width variable)
  • 736px (the @breakpoint variable)

You can edit them by changing the variables at the top of the LESS file, feel free to add more by the way