TS Grid System

September 29, 2016 CSS

So basically what I did can be closely related to ratios. To explain what I mean here are the classes:

Class Column Width
ts-1 100%
ts-2 50%
ts-3 33.33%
ts-4 25%
ts-2-1

first-child: 66.66%

others: 33.33%

ts-1-2

last-child: 66%

others: 33.33%

ts-3-1

first-child: 75%

other: 25%

ts-1-3

last-child: 75%

other: 25%

And of course we want to be responsive … so,

Class Screen Size
ts-s-2, ts-s-3 … max-width: 767.9px
ts-m-2, ts-m-3 … min-width:768px and max-width: 959.9px
ts-d-2, ts-d-3 … min-width: 960px and max-width: 1199.9px
ts-l-2, ts-l-3 … min-width: 1200px
ts-ns-2, ts-ns-3 … min-width: 768px
ts-sm-2, ts-sm-3 … max-width: 959.9px
ts-dl-2, ts-dl-3 … min-width: 960px

And that’s the basic column splitting I need in my life right now. Thanks a lot Bootstrap!

But besides column splitting, this script has other less interesting features …

Pages: 1 2 3