thallada.github.io

##Layout & CSS## I use a grid system devised by Adam Kaplan and with some pieces from Jorden Lev. It is set-up by scratch in my main.css. I decided on this so that I would not have to load a huge framework like Bootstrap since I would only be using the grid system out of it.

As an introduction to this system:

Wrap everything in a div element with the container class.

<div class="container"></div>

To create rows add div elements with the row and clearfix classes.

<div class="container">
    <div class="row clearfix"></div>
</div>

To create columns add div elements with the column class. Then add a class to describe the width of the column with respect to the container. The possible widths are:

CSS class name	width percentage
`full`	100%
`two-thirds`	66.7%
`half`	50%
`third`	33.3%
`fourth`	25%
`three-fourths`	75%

These are purely for convienence. A more precise width can be specified in the CSS if desired with the width attribute.

<div class="container">
    <div class="row clearfix">
        <div class="column full"></div>
    </div>
</div>

Columns stack up right to left. To force a column out of order all the way to the right use the flow-opposite class on the column.

<div class="container">
    <div class="row clearfix">
        <div class="column half"></div>
        <div class="column half flow-opposite"></div>
    </div>
</div>

To hide an element on mobile phones add the class hide-mobile. To hide on desktop, use hide-desktop instead.

<div class="container">
    <div class="row clearfix">
        <div class="column half hide-mobile"></div>
        <div class="column half hide-desktop"></div>
    </div>
</div>

Another note: I use box-sizing (as suggested by Paul Irish), which I think makes dealing with sizing elements a lot more sane.

2.1 KiB Raw Blame History

thallada.github.io

2.1 KiB

Raw Blame History