Latest version of my personal website https://www.hallada.net
Go to file
2014-08-25 15:43:25 -04:00
_layouts Add google analytics snippet 2014-07-29 23:18:33 -04:00
_posts Add new post about new website 2014-07-30 18:21:11 -04:00
blog Add pagination to the blog 2014-07-24 11:45:52 -04:00
css Add rss feed link 2014-07-29 23:10:18 -04:00
img Add rss feed link 2014-07-29 23:10:18 -04:00
js Make waitTime global and shorten it 2014-07-31 15:10:18 -04:00
laundry Add legacy redirects to posts, add canonical ref 2014-07-29 23:33:16 -04:00
resume Add legacy redirects to posts, add canonical ref 2014-07-29 23:33:16 -04:00
_config.yml Add rss feed (last 10 posts) 2014-07-29 22:40:25 -04:00
.gitignore Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
CNAME Revert "Revert "Switch to usimg www subdomain"" 2014-08-25 15:43:25 -04:00
favicon.png Add favicon 2014-07-21 12:03:08 -04:00
feed.xml Add rss feed (last 10 posts) 2014-07-29 22:40:25 -04:00
Gemfile Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
index.html Make front page more text-based browser friendly 2014-07-29 00:01:40 -04:00
profile_icon_128x128.png Initial jekyll set-up & homepage 2014-07-11 17:40:46 -04:00
README.md Add link cards to homepage 2014-07-12 20:07:55 -04:00
resume.pdf Fix typos in resume 2014-07-31 11:48:29 -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 (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.

Profile designed by Ryan Beck from the Noun Project.

Photos designed by Ryan Beck from the Noun Project.