[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.

I recently created an HTML5 site for a client. They needed some help and in particular, they were trying to match the button design as close as possible. There were a few goals:

1. Match the design.
2. The markup should be simple.
3. No images!
4. IE 9, 8, and 7 support. :/

That last one a tall order! Fortunately, they were fine with progressive enhancement under IE which meant that things would look similar, but not pixel perfect. So let’s see what we had to do…

Here is the original button design:

Before we can start to build this button in HTML, we need to understand how it is built visually. Let’s zoom in on the PSD to get a closer look. Hover over (or tap) the image to see the critical design elements…

To describe this button we have:

1. The background color of the button is a solid orange. I.e., there is no gradient.
2. Rounded corners of about 4px
3. A darker orange 1px border (stroke)
4. An inner shadow that gives a highlight, but it isn’t on every edge
5. A faint text shadow of about 2px blur
6. A faint drop shadow on the entire button of about 2px blur

Looking at this shopping list of CSS3 features, I can tell already that we are going to be hurting on all versions of Internet Explorer except the unreleased version of IE 10. Bummer.

…or maybe not… I know there are a few things we can hack to make IE work. But first, let’s get the easy stuff out of the way and make this button work for Safari, Chrome, and Firefox.

We start with a basic link and then use CSS3 features to style it according to our list. Here is our starting markup:

<a href="#" class="button">Clickity Clickity</a>

(For this example, I am using >a< because the markup is simple. But this will also work with input buttons.)

Let’s setup our SASS file, we need to include the CSS3 mixins:

@import "compass/css3"

The @import declaration simply brings in a standard library that is packaged with compass and SASS. It gives us a bunch of time saving goodies so that we can do things like write:

+single-box-shadow(rgba(0,0,0,.25), 0, 2px, 2px)

Instead of this:

-moz-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px;
-o-box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px;
box-shadow: rgba(0, 0, 0, 0.25) 0 2px 2px;

Time savings, yes? It doesn’t stop there. Did I mention you should go look at http://sass-lang.com?

Now, let’s work down that list of attributes. We need to have padding and margin on this button. That means the default display of a link needs to be changed from inline to inline-block. There is also significant amount of padding, so we will add that in. Let’s specify a font-size of 16px so we aren’t relying on body copy size which can change without us knowing. If we left the font-size as is, the text of the button wouldn’t be vertically centered when we apply this style to our input buttons. To vertically align, we give it a line-height of 22px. Here is our class so far:

@import "compass/css3"

.button
	display: inline-block
	padding: 7px 24px 8px 24px
	font-size: 16px
	font-weight: 400
	line-height: 22px

Here is our button so far:

Not very interesting…

Moving on, it would just look weird if our button ever wrapped to multiple lines of text. So, let’s fix the whitespace with nowrap. Further, we need to make sure the text is centered and because this is an <a> tag, we need to remove the text-decoration.

Our design calls for white text and an orange background color of #f38f01. Zoomed in, we see that the 1px outline of the button is a dark orange #c87704.

@import "compass/css3"

.button
	display: inline-block
	padding: 7px 24px 8px 24px
	font-size: 16px
	font-weight: 400
	line-height: 22px
	whitespace: nowrap
	text-align: center
	text-decoration: none
	color: #fff !important
	background-color: #f38f01
	border: 1px solid #c87704

How does that all look under our test browser?

A pretty, plain, orange rectangle. Now, let’s add the “shiny”.

We need rounded rectangles, shadow on the text, a highlight shine on the top and left sides, and a drop shadow under the button. A white inset shadow will be used for the “shine” on top & left sides. A feature of CSS3 shadows that let us specify multiple shadows to apply. We will use this to specify both the drop shadow and shine of the button at the same time.

@import "compass/css3"

.button
	display: inline-block
	padding: 7px 24px 8px 24px
	font-size: 16px
	font-weight: 400
	line-height: 22px
	whitespace: nowrap
	text-align: center
	text-decoration: none
	color: #fff !important
	background-color: #f38f01
	border: 1px solid #c87704
	+border-radius(4px, 4px)
	+text-shadow(rgba(0,0,0,.5), 1px, 1px, 3px)
	+box-shadow(rgba(black,.3) 0px 1px 1px, rgba(white,.25) 1px 1px 0px inset)

(You can see that special SASS syntax we are using again: +border-radius and such.)

In the last line, the first shadow is the the drop shadow, and the second is the white shine. Here we go:

Finally, we need the button to reflect a change in its state. When a mouse hovers over, let’s lighten it a bit. And when someone clicks or touches it, let’s make it darker.

@import "compass/css3"

.button
	display: inline-block
	padding: 7px 24px 8px 24px
	font-size: 16px
	font-weight: 400
	line-height: 22px
	whitespace: nowrap
	text-align: center
	text-decoration: none
	color: #fff !important
	background-color: #f38f01
	border: 1px solid #c87704
	+border-radius(4px, 4px)
	+text-shadow(rgba(0,0,0,.5), 1px, 1px, 3px)
	+box-shadow(rgba(black,.3) 0px 1px 1px, rgba(white,.25) 1px 1px 0px inset)

	&:hover
		background-color: #ff9c0e

	&:active
		background-color: #da8001

Okay, how does it look in Safari compared to the original PSD?

Wow, that’s not bad at all! Firefox is the same. Let’s check Chrome and… ruh roh! Take a look:

Chrome actually renders fonts differently then other browsers. Type appears at what seems like one weight lighter (400 to 300, in this case). So we are going to adjust that here:

// Chrome renders font one weight lighter than every other browser.
// Their text shadow also appears to be a bit darker, though that could
// be because of the step up in font weight
.chrome
	.button
		font-weight: 700
		+text-shadow(rgba(0,0,0,.40), 1px, 1px, 3px)

Since discovering this font “bug”, I’ve started the practice of tagging every page body with a .chrome class if that browser is being used. Yeah, I know, don’t target browsers… Well, someone get Google to fix it and we can stop that…

Let’s see where we stand in Safari, Chrome, and Firefox:

Damn, that is spot on!

Okay, now that sinking feeling in your stomach is the realization that we are only 10% of the way done. I.e., we still need to fix IE. I’ll cover that out in a follow-up blog post.

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.

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:

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.

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.

Taking three files, and coming up with a new one is quite a bit more difficult. In my experience, not many tools handle it well. The biggest problems are:

• Integration and interoperability with the OS (cough, OS X native)
• Intelligent resolution of conflicts
• Differences within a line
• Easily choosing which diff chunks to take
• Being able to edit the final merged file

Many times, the merge tool will not be fine grained enough to allow for differences within a line to be accurately merged. You’ll even have problems with whole lines of code not being intelligently merged.

The two best tools I’ve found to handle this are:

• Araxis Merge
• P4Merge

Araxis Merge was originally a windows product that I used in a previous life. It was great because it offered not just merging, but standard diffs, as well as directory diffs. Really nice and I highly recommend. However, I don’t use it anymore, even though they have a Mac version. The problem is the price is absurd: $269 and then $49 a year, thereafter. That’s insane.

Especially insane, when the next best tool is free! P4Merge is actually from another SCM company, Perforce. It is more of a single purpose tool then something like Araxis Merge. However, it does do merging very well. I’ve found that it can start to get confused on resolving conflicts, such as when an existing chunk of code is just moved down the file while another commit inserted new code at the same spot. But that’s where being able to edit the final merged file at the same time helps.

(Notice the yellow, blue, and green icons on the right side of the bottom pane. You click each one to switch which code is used in the final output.)

You would think that using P4Merge with a competing SCM like git would not be easy. But it’s actually quite straightforward. Go install P4Merge and then just add this to ~/.gitconfig:

[merge]
        keepBackup = false
        tool = custom

[mergetool "P4Merge"]
        cmd = /Applications/p4merge.app/Contents/Resources/launchp4merge "$PWD/$BASE" "$PWD/$REMOTE" "$PWD/$LOCAL" "$PWD/$MERGED"
        keepTemporaries = false
        trustExitCode = false
        keepBackup = false

When you need to merge with git, run

git mergetool

Instead of the normal, git merge. The one problem I’ve run into is that even though keepTemoraries/keepBackup is false, I still get .orig files littered about when a merge happens. These have to be cleaned up manually.

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