Organization

Before we jump onto template scaffolding with bootstrap, I wanted to go over some tips to improve the organization in the way we write our CSS code. Take these as general rules, apply them as you deem necessary.

• Use classes for styling. Whenever possible, avoid using element IDs, attribute values, and tag names
• Try not to nest style rules too deeply. To prevent complexity, limit yourself to one or two levels of nesting
• Avoid magic pseudo-selectors such as :nth-child or :nth-of-type. Use an extra class in your markup, instead
• Don’t overqualify selectors. i.e: div.foo.bar, when you could use .foo
• Prefix classes with js- when referenced by JavaScript code
• Avoid styling js- classes
• Toy with the idea to use box-sizing: border-box everywhere
• Attempt separating layout styling concerns from design concerns. Keep separate stylesheets

These are just a few ground rules, feel free to add your own or adapt these to your own needs. You might want to use SMACSS as your guiding light.

Lint your CSS!

If you have a large enough project, CSS can get out of hand as easily as JavaScript, or even more so, because developers seldom pay attention to CSS. You are already using JSHint, which is great. If you really want to take your codebase to the next level, you should at least consider linting the CSS, too.

Currently, you can use CSSLint as your lint tool. If you are using LESS, you are in luck! RECESS will let you lint your LESS code directly.

Ideally, you should include a lint task for CSS in your build process.

Pre-processors

Pre-processors allow us to keep our stylesheets DRY. They also let us perform calculations in our layout measurements, or do color shifting.

Quite probably though, the most useful feature of CSS pre-processors is the ability to use mixins, reusable functions that allow us to write cross-browser styles without having to type them time and again, risking typos and duplicating our code.

The most popular flavors of CSS pre-processing probably are:

• SASS, from the universe of Ruby and CoffeeScript
• Stylus, from the awesome LearnBoost
• LESS, still rocking it

Lets do a quick comparison of the three:

All three pre-processors share similar syntax and features when it comes to color functions, mixins, and variables. You can find a more detailed, feature by feature comparison here.

I should mention all three are readily available as grunt tasks on npm.

In my opinion, it depends on what you want to do. If you are going to use a full-fledged CSS framework, I’d go with LESS, because Bootstrap is a clear winner in the field.

If you are going to use the framework as is, or not going to use one, you could probably do with Stylus. It’s clean looking syntax is really appealing.

SASS used to be regarded as a superior language than LESS. Today, they are very similar. SASS feels a little more verbose, though. That, coupled with the fact that Bootstrap is powered by LESS, makes me choose LESS over SASS with little hesitation.

Twitter Bootstrap

Bootstrap is a CSS framework, which encompasses a lot of the practices we mentioned earlier. It does:

Rapid Prototyping

We’ve all been there before. Trying to get a design right, but instead, we wasted our time dealing with float issues, with margins, paddings, and footers that wouldn’t stick to the bottom of our page.

Bootstrap provides an scaffolding module that allows us to very quickly set up the basics for our layout. The scaffolding module provides us with a grid system that allows us to quickly place elements on our designs with ease.

At this point, you’ll be probably better off downloading Bootstrap and playing around with it for a while. But I’ll try my best to give you a reasonable example.

This grid system uses 12 columns. These columns have a fixed width, and allow you to quickly throw together a multi-column layout:

<link href="/css/bootstrap.css" rel="stylesheet">

<div class="row">
    <div class="span3">Menu</div>
    <div class="span9">Content!</div>
</div>

Pen here.

You can also nest these columns, and it will still work, just make sure to use a new row element:

<div class="row">
    <div class="span3">Menu</div>
    <div class="span9">
        <h1>Articles</h1>
        <div class="row">
            <div class="span6">Article 1</div>
            <div class="span6">Article 2</div>
        </div>
        <div class="row">
            <div class="span6">Article 3</div>
            <div class="span6">Article 4</div>
        </div>
    </div>
</div>

Pen here.

As you can see, laying out your design is almost trivial now. All we need to do, is fill up the template with actual content. Keep in mind we should always wrap our templates in a container like this:

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

Responsive Layouts

Bootstrap also offers fluid layouts which, rather than having a fixed width for each column, assign each column a percentage of the viewport real estate instead.

Adding an additional stylesheet, you’ll enable responsive design features.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">

When you include the responsive stylesheet, styles will be added so that when the viewport size is adjusted, the layout adjusts itself to it, providing a more flexible user experience that works better across multiple platforms.

This is achieved using media queries. Here are some media query examples:

@media (max-width: 600px) {
    /* styles enabled when the viewport is at most 600px wide */
}

@media (min-width: 700px) and (orientation: landscape) {
    /* styles enabled when the viewport is at least 700px wide
       AND in landscape orientation, too
     */
}

Media queries allow CSS to be applied exclusively if the media matches the query, at any given time. Usually, a few media query breakpoints are carefully picked. This allows you to plan your layout for two or three of the expected media devices used when visiting your application.

Here is a pretty comprehensive list of media queries.

I will surely come back to the subject in later articles, but for now, I’ll recommend you two really good books about responsive design.

Responsive Web Design

This book covers responsive web design in depth, showing you lots of examples. It is a very good resource to introduce you to the fantastic world of responsive design for today’s web. A must read if you’re even faintly interested in RWD.

Mobile First

Closely related, Mobile First introduces you to a new way of thinking about design. Rather than trying to cram a critical mass of ads in your mobile designs, Luke suggests to start with the small screens instead. Only presenting the essential content first, and building from there. Adding content as we hit breakpoints, instead of removing it.

This may seem like a very subtle difference from traditional web development, and it is. But it induces a new way of thinking about what’s important to the user, and it helps you cut features and content you didn’t really want there, nor even need.

More Bootstrapping

Its features don’t just end with scaffolding. A comprehensive list of basic styles for tables, forms, buttons, and images, is also included. Right out the box!

These are pretty straightforward, so I won’t go into detail, how hard can it be to create a large button?

<button class="btn btn-large btn-primary"></button>

That’s it.

Bootstrap also offers an icon set you could use without any further customization.

Components and JavaScript

Twitter also offers a decent amount of components, and widgets that require just a little of JavaScript to get them going.

You should make sure to check those out before embarking yourself in a component-creating fiesta and not even realizing someone else already did all the work for you.