Latest version of my personal website https://www.hallada.net
Go to file
2014-07-12 20:05:38 -04:00
_layouts Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
_posts Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
blog Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
css Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
js Slow down magic, add click-initiated tendrils 2014-07-12 20:05:38 -04:00
_config.yml Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
.gitignore Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
Gemfile Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
index.html Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
profile_icon_128x128.png Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
README.md Style class names as code 2014-07-11 18:33:06 -04:00

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.