2.5 KiB
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 (but remain first on
smaller screens).
<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.
##Attributions## Book designed by Nherwin Ardoña from the Noun Project.