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.

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"

Which Git Branch am I Looking At?

This is one of the best tips if you are developer working with git on the terminal. If you are inside a directory or project managed by git, this will append the working branch your code is on to the prompt!

function parse_git_branch {
git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/\ \[\1\]/'
}

BOLD=$(tput bold)
RESET=$(tput sgr0)

export PS1="[\u@\h \W]\[$BOLD\]\$(parse_git_branch)\[$RESET\] $ "

The key here is, of course, the bash function created called: parse_git_branch(). Then we are modifying the default bash prompt and including the result via: $(parse_git_branch)

I do like to throw in a little color for the branch. So my actual prompt is:

export PS1="[\u@\h \W]\e[0;35m\[$BOLD\]\$(parse_git_branch)\[$RESET\]\e\[m $ "

Mac Terminal Prompt

The default prompt for bash on Mac OS X is wrong, err, different. I spend a lot of time on linux servers through terminal and like to keep things consistent. Append this to your ~/.bash_profile: to keep things in line with Red Hat:

export PS1="[\\u@\h \\W]\\$ "

If you want to get more original, here is a list of codes you can use instead:

• \a : an ASCII bell character (07)
• \d : the date in “Weekday Month Date” format (e.g., “Tue May 26″)
• \D{format} : the format is passed to strftime(3) and the result is inserted into the prompt string; an empty format results in a locale-specific time representation. The braces are required
• \e : an ASCII escape character (033)
• \h : the hostname up to the first ‘.’
• \H : the hostname
• \j : the number of jobs currently managed by the shell
• \l : the basename of the shell’s terminal device name
• \n : newline
• \r : carriage return
• \s : the name of the shell, the basename of $0 (the portion following the final slash)
• \t : the current time in 24-hour HH:MM:SS format
• \T : the current time in 12-hour HH:MM:SS format
• \@ : the current time in 12-hour am/pm format
• \A : the current time in 24-hour HH:MM format
• \u : the username of the current user
• \v : the version of bash (e.g., 2.00)
• \V : the release of bash, version + patch level (e.g., 2.00.0)
• \w : the current working directory, with $HOME abbreviated with a tilde
• \W : the basename of the current working directory, with $HOME abbreviated with a tilde
• \! : the history number of this command
• \# : the command number of this command
• \$ : if the effective UID is 0, a #, otherwise a $
• \nnn : the character corresponding to the octal number nnn
• \\ : a backslash
• \[ : begin a sequence of non-printing characters, which could be used to embed a terminal control sequence into the prompt
• \] : end a sequence of non-printing characters

Add Color to the Mac Terminal Prompt

On Mac OS X, the Terminal output isn’t colorized by default. Add the following to ~/.bash_profile:

export CLICOLOR=1
export LSCOLORS=ExFxCxDxBxegedabagacad

And uncheck “Use bold fonts” in Terminal preferences under Text. Monaco font in bold looks hideous.

While we are at it, make sure you are using the Pro settings scheme as a default. Which you use is really personal preference, but if you are a beginner, let’s start you off on the right foot with Pro.

N.A.D.D. Neutralizer

After starting up another Grails project and completely missing my text-to-speech solution for long build times, I decided to do something a little more re-usable.

I just released a Grails plugin that provides this functionality. It’s as simple as: 

grails install-plugin nadd-neutralizer

Right now, only Mac OS X is supported. Patches are welcome for other operating systems. Source code is here: http://github.com/digerata/grails-nadd-neutralizer

Decrease “Latency” on Grails Builds

This is a tip for those of you dealing with long build times, which for me, is anything greater than about 4 seconds

The problem that those of us with NADD face is the second we are waiting for something to finish, we [alt|cmd]+Tab to a browser and start reading slashdot, rotten tomatoes, daringfireball, or any of a million other sites. Likely, you classify this “quick field trip” as multitasking and because you are so very good at multitasking (despite what all the experts say), you disregard the fact that your build was probably finished 10 minutes ago.
<Read on…>