Taking a Button from PSD to HTML5/CSS3 using SASS

This article is about several things. Primarily, it is about how to realize a button design using the latest web technology available to us. The resulting button is progressively enhanced so that it looks okay in IE 7, a little bit better in IE 8, great in IE 9, and fantastic in all modern browsers. (Yes, IE 9 isn’t modern by my standards)

[Note: this article went long. The story of the IE "mutation" will happen in a follow up post.]

Also, I’m going to use SASS to create the CSS for this button. There are many timesaving features of SASS and that is a secondary theme of this post. You can learn about SASS here: http://sass-lang.com. I can’t recommend it enough. It actually renewed my love for web development.

<Read on…>

Twitter Bootstrap – How to Pad Columns

I have much love for Bootstrap by Twitter. But there are some things that I was slow to figure out, see my earlier post on this: How to style Rows in Bootstrap.

Similarly to the style issue, you can’t easily add padding to elements within a row. Say you want to to have a row that has multiple columns. But you need to have a 15px padding for each column. (The row has a styled background and we don’t want the columns to touch the edges). If you try and target your columns directly via the .spanXX class with a descendant selector, you’ll have headaches later on when you change your column width, or add another row that had different needs. (I should mention, this isn’t a unique problem to Bootstrap. Most, if not all, grid systems have this issue.)

The solution is to place a <div> element within the .spanXX column container. This div is then padded and your content is then placed within.

Nice and simple:

<div class="row">
	<div class="span6">
		<div class="extraneous-non-semantic-markup">
			<p>Your Content is Padded!</p>
		</div>
	</div>

	<div class="span6">
		<div class="extraneous-non-semantic-markup">
			<p>Yay!</p>
		</div>
	</div>
</div>

And the styling on the class:

.extraneous-non-semantic-markup {
	padding: 15px
}

And that feels so dirty. But it’s a compromise that works because we gain so much more from grid layouts.

Twitter Bootstrap – How to Style Rows

There is a lot of great things going on with the new CSS framework from Twitter, Bootstrap -> http://twitter.github.com/bootstrap/. I used 1.0 for creating this site and a few others. Version 2.0 was just released and it fixed a lot of issues and is really just plain awesome.

Unfortunately, there have been a few things that have been bothering me about it, particularly the grid system. I felt constrained by the requirement of a containing .row around the spans. I couldn’t quite put a finger on what it was though. Then after doing a project with Blueprint -> http://blueprintcss.org/ last month, it hit me. In Bootstrap, you can’t style rows.

Bootstrap’s grid system will use left-margin in between columns to have built in padding between content areas. By default, it is 20px. Everyone does this. The problem that happens though is that the first column can’t have any left-margin or your content won’t be centered. (And likely be over 960px) To get around this, most frameworks will nip off the left-margin on the first column by using a pseudo css selector: first-child.

Boostrap uses a different technique. It places a negative left-margin on the containing .row instead of using a pseudo class. For the following markup, imagine we want to put a border around the row:

<div class="container">
    <div class="row">
        <div class="span6"></div>
        <div class="span6"></div>
    </div>
</div>

Yields:

Notice how the row in the above illustration sticks out past the .container element?

Their reason for this is valid. :first-child causes problems with calculating widths and makes things more complicated. But using a .row with negative left-margin means that any styling applied to the row (borders, backgrounds, etc) will stick out on the left hand side by an extra 20px. In the simplest case illustrated above, this is exactly how it occurs in your page.

So how do we fix this?

Simple. Add a <div> or HTML5 element like <article> or <section> as a parent to the row. Then style the parent element. Because of the .container that is used for the entire page, this div will be the appropriate width. When using a <section> tag, it even feels right, semantically. So, yay!

Here we have the fix:

<div class="container">
    <section>
        <div class="row">
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
    </section>
</div>

Which results in:

For My Wife

Happy Valentine’s Day Babe. There are so many things I never get to tell you.

You are as beautiful on the inside as you are on the outside. My hot mama is caring and sweet and I probably don’t deserve her.

I love you because you care about the kids and me more than yourself. You are always thinking of us first. You keep me centered about what is important in life and what is best for our family. You help me work towards a better life. I’m a better person because of you and truly blessed to have you.

Best of all, you are so thankful for everything we have.

It’s my turn to be thankful. Thank you for everything you have done for me. Thank you for being an amazing mother. Thank you for being a better wife than I could have ever hoped for. I love you.

What a great match.

Building Out vs Up

Brilliant Chemistry / Plodding Landlord

Sun and Ice

American Idiot @ Detroit Opera House

Merging With Git and P4Merge

While there are some great diff tools out there, there are very few good merge tools. My favorite diff tool is Kaleidoscope. And there are several others I wouldn’t mind using.

However, Kaleidoscope does not do merging. Too me, software development requires much more merging then diff’ing. And many times, github.com’s HTML diff view is more than sufficient. Heck, even command line diff works just fine for small differences. Looking at diff’s is easy and paying money for a tool that only does diffs is something I find hard to swallow.
<Read on…>

Add Some Color to Git

By default, git is colorless. What decade is this again? “Squirt” this crap in your prompt and things will be better.

git config --global color.ui "auto"
git config --global color.branch "auto"
git config --global color.status "auto"
git config --global color.diff "auto"