The New Normal

For those unaware, Boulder was decimated by a 500-year flood event that tore down bridges and buildings and caused numerous deaths (check out the site that my teacher put together for more info). Boulder received more rain in four days than it normally does in a year. As a result class was cancelled Thursday and Friday as we weathered the storm. The sewer line broke in our apartment complex, so our water has been shut off for about a week. But besides these obvious setbacks, things have improved dramatically in the past day.

Wednesday night. The underpass to Collin's had turned into a river.

It stopped raining mid morning and it has improved quite a bit since. Many roads are still closed or peppered with rocks, sand, silt, mud, or gross water, but this is changing. I had lunch on a picnic bench today and had to go inside after 40 mins because it was too sunny. It is time to embrace the new normal and shrug the past several days of hardship, boredom, and uncertainty.

And I am back to coding. Over the long weekend, I did some coding, but for the most part the internet was spotty, and I was distracted by other things. I did put together my first personal website brianshedberg.com. It is purposefully simple, and required little creative effort as I stole the template from my teacher, Matt Null's website, mattnull.com. The challenging part was hosting it in a way that would allow me to bypass using a template and use raw html/css. I discovered that github has a hacker hosting site called gh-pages, which allows you to use one of your github repos as a launch pad for a simple site free of any of the baggage that comes with a heavy-lifting CMS (drupal, wordpress, joomla!). They also have an additional blog platform called octopress, which is a simple blog site. I may transition this blog to that platform in the not-so-distant-future.

Enough yammering. I am getting increasingly confident with CSS (something that my brianshedberg.com doesn't reflect), and I can do some pretty nifty stuff at this point. Here are a few of the tips and tricks I have learned since my last post:

We focused quite a bit on the float: left, right, both;
Float is used to
1. position media with wrapping text.
2. Allow block images to stack horizontally while 'responding' vertically, similar to inline-block. *Inline-block should be used on items that don't have a fixed width but you want to treat like block elements. An example would be columns for a journal.

Float Facts:
1. Different from inline block, because float items are automatically set to display: block;
2. Float takes up vertical space, but does NOT occupy horizontal space

Below is an example of a "Clear fix", a way to avoid awkward text wrapping.

selector { 
float: right, left, both;
}

selector { //*important: When the browser renders text next to floats, it wraps text. Margins and padding don't remove the indentations created by text wrapping. This prevents the text from wrapping and creates a "nesting" effect.
overflow: none;
}

<div class="hello pink"></div>  

.hello { //an example of how a single div can contain multiple class or id tags
float: right;
}
.pink {
overflow: none;
}
//OR... concatenate the two to select for both classes at once
.hello.pink {
float:right;
overflow: none;
}

Centering Items

selector { //centers any kind block element (not just text) WITHIN a container
text-align: center;
}
selector { //automatically centers element
margin-left: auto;
margin-right: auto;
}
selector {
margin: auto 0;
}

Lists:
To understand lists, it is important to understand that all inline elements are anchored by line-height. Padding and margins push out from this central 2D line

selector { //removes bullets (or other styling)
list-style: none;
}

selector {//removes indentation left by ghost bullet
padding-left:0;
}