BAD TOOLS

Layouts

Getting started

Create powerful multi-device layouts quickly and easily with the default 12-column, nest-able XXXXXXX grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.

XXX is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

Grids

Rendered HTML
layout__item layout-1/2
layout__item layout-1/2
HTML
            
...
...
Rendered HTML
layout__item layout-1/2 lap-and-up-1/3 desk-1/4
layout__item layout-1/2 lap-and-up-1/3 desk-1/4
layout__item layout-1/2 lap-and-up-1/3 desk-1/4
layout__item layout-1/2 lap-and-up-1/3 desk-1/4
HTML
            
...
...
...
...

Gutters

Rendered HTML
Flush
Flush
Tiny
Tiny
Small
Small
Default
Default
Large
Large
Huge
Huge
HTML

            
...
...
...
...
...
...

Variarions

Reversing columns

Rendered HTML
Col 1
Col 2
HTML
            
...

Pushing

Need to describe pushing and pulling content here

HTML
            
Standard space top
Half space top
Half space top
Standard space top
Half space top

Media block

An image with copy

Rendered HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse semper ante nec nunc volutpat luctus. Curabitur a velit et dolor ultricies interdum quis nec ex.
HTML
            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse semper ante nec nunc volutpat luctus. Curabitur a velit et dolor ultricies interdum quis nec ex.