thallada.github.io/README.md

89 lines
2.5 KiB
Markdown
Raw Normal View History

2014-04-17 23:57:04 +00:00
thallada.github.io
==================
2014-07-11 22:23:02 +00:00
##Layout & CSS##
I use a [grid system devised by Adam Kaplan](http://www.adamkaplan.me/grid/) and
with some pieces from [Jorden Lev](http://jordanlev.github.io/grid/). 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:
2014-07-11 22:29:59 +00:00
Wrap everything in a div element with the `container` class.
2014-07-11 22:23:02 +00:00
2014-07-11 22:28:07 +00:00
```html
2014-07-11 22:23:02 +00:00
<div class="container"></div>
2014-07-11 22:28:07 +00:00
```
2014-07-11 22:23:02 +00:00
2014-07-11 22:29:59 +00:00
To create rows add div elements with the `row` and `clearfix` classes.
2014-07-11 22:23:02 +00:00
2014-07-11 22:28:07 +00:00
```html
2014-07-11 22:23:02 +00:00
<div class="container">
<div class="row clearfix"></div>
</div>
2014-07-11 22:28:07 +00:00
```
2014-07-11 22:23:02 +00:00
2014-07-11 22:29:59 +00:00
To create columns add div elements with the `column` class. Then add a class
2014-07-11 22:23:02 +00:00
to describe the width of the column with respect to the container. The possible
widths are:
2014-07-11 22:28:07 +00:00
CSS class name | width percentage
--------------- | ----------------
2014-07-11 22:33:06 +00:00
`full` | 100%
`two-thirds` | 66.7%
`half` | 50%
`third` | 33.3%
`fourth` | 25%
`three-fourths` | 75%
2014-07-11 22:23:02 +00:00
These are purely for convienence. A more precise width can be specified in the
CSS if desired with the `width` attribute.
2014-07-11 22:28:07 +00:00
```html
2014-07-11 22:23:02 +00:00
<div class="container">
<div class="row clearfix">
<div class="column full"></div>
</div>
</div>
2014-07-11 22:28:07 +00:00
```
2014-07-11 22:23:02 +00:00
2014-07-11 22:29:59 +00:00
Columns stack up right to left. To force a column out of order all the way to
2014-07-13 00:06:42 +00:00
the right use the `flow-opposite` class on the column (but remain first on
smaller screens).
2014-07-11 22:23:02 +00:00
2014-07-11 22:28:07 +00:00
```html
2014-07-11 22:23:02 +00:00
<div class="container">
<div class="row clearfix">
<div class="column half"></div>
<div class="column half flow-opposite"></div>
</div>
</div>
2014-07-11 22:28:07 +00:00
```
2014-07-11 22:23:02 +00:00
2014-07-11 22:29:59 +00:00
To hide an element on mobile phones add the class `hide-mobile`. To hide on
2014-07-11 22:23:02 +00:00
desktop, use `hide-desktop` instead.
2014-07-11 22:28:07 +00:00
```html
2014-07-11 22:23:02 +00:00
<div class="container">
<div class="row clearfix">
<div class="column half hide-mobile"></div>
<div class="column half hide-desktop"></div>
</div>
</div>
2014-07-11 22:28:07 +00:00
```
2014-07-11 22:23:02 +00:00
2014-07-11 22:29:59 +00:00
Another note: I use [box-sizing (as suggested by Paul
2014-07-11 22:23:02 +00:00
Irish)](http://www.paulirish.com/2012/box-sizing-border-box-ftw/), which I think
makes dealing with sizing elements a lot more sane.
2014-07-13 00:06:42 +00:00
##Attributions##
[Book](http://thenounproject.com/term/book/23611/) designed by [Nherwin
Ardoña](http://thenounproject.com/nherwinma) from the Noun Project.
[Profile](http://thenounproject.com/term/profile/20733/) designed by [Ryan
Beck](http://thenounproject.com/RyanBeck) from the Noun Project.
[Photos](http://thenounproject.com/term/photos/29898/) designed by [Ryan
Beck](http://thenounproject.com/RyanBeck) from the Noun Project.