2.0 KiB
2.0 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.
'''html
'''- To create rows add div elements with the
row
andclearfix
classes.
'''html
- 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:
- full: 100% width
- two-thirds: 66.7% width
- half: 50% width
- third: 33.3% width
- fourth: 25% width
- three-fourths: 75% width
These are purely for convienence. A more precise width can be specified in the
CSS if desired with the width
attribute.
'''html
- 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.
'''html
- To hide an element on mobile phones add the class
hide-mobile
. To hide on desktop, usehide-desktop
instead.
'''html
- Another note: I use box-sizing (as suggested by Paul Irish), which I think makes dealing with sizing elements a lot more sane.