Hello

toad.css is just my (very) tiny CSS grid system, lovely customizable with a flex 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

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

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

Responsive

The grid system has 2 major breakpoints (feel free to add some) :

  • 980px (smaller than a 'normal' desktop screen)
  • 500px (smaller than a 'normal' tablet screen)