This is my preview text that will show up on email clients!

scotch.io

Grid Demo

You’ll probably use the default grid the most. Since the grid is built with tables with cross-client in mind, there’s a ton of markup to do seemingly simple things. At first it might seem exhausting, but it will save you a lot of time in the future if you’re buttoned-up about it.

.1
.two
.two
.three
.four
.six
.six
.seven
.five
.eight
.four
.ten
.two
.eight (offset by 4)
.twelve

Sub-Grid Demo

You can also place a columns inside of other columns. This is actually a beautiful thing because sub-grid columns will stack full-width on mobile.

.six.sub-columns .six.sub-columns
.three
.three.sub-columns .three.sub-columns .three.sub-columns .three.sub-columns

I'm Full Width!

Block-Grid Demo

Think of the Block-Grid as a way to do floats in an organized way or something similar to display: inline-block on a bunch of divs.

1/4 2/4 3/4 4/4
1/2 2/2
1/8 2/8 3/8 4/8 5/8 6/8 7/8 8/8

Button Demos

I'm Tiny
I'm Small
I'm Medium
I'm Large
I'm Secondary
I'm Dangerous
I'm a Success
I'm Radius
I'm Round

Buttons that aren't 100% width on mobile and custom

Foward