Headings

Headings are intended to grab attention and and create pagination for your flow.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Code Blocks

You can start a block of code with the <code> element. Use <pre> to start a multiline code seciton.

.resources {
	hello;
}
int main(int argc, char** argv) {//code}

Rows contain 12 columns

The grid lives at the heart of what I was trying to create for myself. I wanted to understand how the big templates did it, and then do it smaller.

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-6

Multiple Columns

We can also have multiple columns per row for more content.

col-4

col-4

col-4

col-2

col-4

col-6

Offsets on Columns

We can offset columns by certain amounts with the offset-# class, just make sure it all adds up to 12 if you're using the entire row.

Offsets just become nothing when you go mobile

col-6 offset-3

col-2 offset-2

col-6

col-4

col-6 offset-2

It's great for forms as well

With this css sheet we can have simple text inputs inside columns to adjust their size.

Or just some buttons

Buttons take up the size of ther column so we can control how big we want them.

Thanks

This site is by no means finished and I add things to it all the time when I think it looks cool.