Skip to main content Accessibility Feedback

The Go Mobile First Style Guide

A few weeks ago, I released a free mobile-first starter theme for WordPress called Go Mobile First. To help you use it, I’m writing a series of tutorials on how to make some common changes.

This article looks at the styles in the Go Mobile First stylesheet and how they’re used.

OOCSS

Go Mobile First loosely applies the principles of Object Oriented CSS (OOCSS):

  1. Separate the structure from the content.
  2. Don’t repeat yourself (DRY).

Whenever possible, I use unnested, general purposes classes. This had led to fewer cross-browser issues and CSS that is more lightweight and easily maintainable.

For example, rather than writing:

#footer {
    font-size: 15px;
}

I have a class for smaller fonts:

.small {
    font-size: 15px;
}

This get’s applied to both footer content and other pieces of text that I’d like to make smaller than the body copy. Simpler, more reusable code.

I’m more pragmatic than I am strict - for example, it’s more practical for me to apply a top-padding to my header elements than to use class=“padding-top” on every header in my HTML - but overall, OOCSS has made my life easier.

Now, let’s look at the styles used in Go Mobile First.

The Reset

Right now the web design community is split between using a CSS reset and Normalize.css, which both work towards the same goal from different angles.

I’ve found that Meyer’s CSS Reset results in more consistent browser rendering for me, so that’s what I use. But Normalize.css does have a few useful bits that result in better looking images, and fix issues with HTML5 audio and video rendering. I’ve incorporated some of that stuff, as well as a few of my own additions for responsive images and video, into my reset.

Structure

Content in Go Mobile First is wrapped in divs with the .container class.

/* Literally "contains" the content on the page  */
.container {
    /* Sets the maximum width of the content */
    max-width: 640px;
    /* Centers the container */
    margin-left: auto;
    margin-right: auto;
    /* Adds a padding to the top of the container */
    padding-top: 26px;
}

Divs with this class have a maximum width of 640 pixels, but are otherwise fluid. margin-left: auto; and margin-right: auto; tell browsers to automatically set the left and right margins, which centers the div on the page.

For white space, I’ve applied 26 pixels of padding to the top of each container.

Typography

The Go Mobile First design is built around a typographic scale: 14px, 15px, 17px (base), 20px, 23px, 26px, 30px, 34px, 51px, 68px, 85px, 102px.

You’ll see these numbers repeated throughout the CSS. Deviating from them will break the scale and result in a less pleasant design (unless, of course, you change the entire scale).

Line height is set at 25 pixels for smaller screens, and 27 pixels for larger ones. These numbers were determined using Chris Pearson’s Golden Ratio Typography Calculator.

Typographic Elements

In addition to the usual stuff - typefaces, links, paragraph spacing, headers, lists - I’ve added some unique classes.

.small is used for content that you want to be smaller than the body text. .tall and .grande make content slightly bigger than the body copy, but unlike headers, their line spacing is more suited to longer lines of text.

For text that you’d like to be lighter in color than the primary body copy, use .muted. When .muted sections of content contain links, they appear black instead of the default blue.

If you have content that is part of a list, but you don’t want it to be styled as one, use .unstyled. While this can be applied to both ordered and unordered lists, it only makes sense semantically to do so to unordered lists.

Finally, each header element also has a matching class. If you wanted to use an h2 element for semantic purposes, but wanted it to look like an h4 element, you could write <h2 class=“h4”>.

Forms

The form styling borrows from Twitter Bootstrap, which does an excellent job of creating beautiful forms.

Because Go Mobile First is so lightweight, I’ve removed most of the styling and kept the basic elements - things like text color, rounded corners, and active states. I also modified them to match the typographic scale of the theme.

The classes .input-small, .input-medium, and .input-wide are used to set the widths of the input fields, and change slightly from small to large screens. All text areas are given a height of 200 pixels.

Buttons

Buttons in Go Mobile First are created using CSS. Simply apply the .btn class to any link, input or form button. Also include .btn-large to make any button bigger (.btn must still be used).

Icons

Icons are not included with Go Mobile First, but there is a section open in the stylesheet where you might want to add them. I recommend using an icon font, and have put together a tutorial on how to do that.

Images

Go Mobile First includes some basic image styles, again borrowed from Twitter Bootstrap.

.img-rounded adds rounded borders, .img-polaroid adds white borders and a shadow effect, and .img-circle turns square images into circles.

These can be used in combination. For example, you could have a polaroid-style image with rounded corners. .img-rounded and .img-circle are not supported by Internet Explorer 8 and lower.

Collapse & Fade

These styles are used to show and hide the navigation elements on smaller screens that support javascript.

Tables

Table styling is also borrowed from Twitter Bootstrap, but modified with the Go Mobile First typographic grid.

The reset at the beginning of the stylesheet removes all of the default styling browsers apply to tables. Add the .table class to any table for light styling: some padding, horizontal lines between rows, and bold table headers.

For less padding between cells, also use .table-condensed. For full borders, also include .table-bordered. (For both of these, .table must also be used.) These classes can be combined.

A Basic Table

A Condensed Table

A Bordered Table

I’ve removed .table-striped and .table-hover from the Bootstrap code, as they disrupt the clean and simple layout of Go Mobile First.

Navigation

The .logo class is (obviously) applied to the logo link, and overrides the default link behavior, keeping the logo link black at all times.

The .nav class is applied to the navigation list. For the base styles, it displays the navigation links as an inline list. On smaller screens that support javascript, they’re stacked as block elements.

The .responsive-nav class is used for the “menu” link that toggles the navigation menu on javascript-enabled smaller screens. It’s set to display: none; in the base styles, and changed to display: block; in the Media Queries section.

Floats & Hides

This is stuff is tucked at the bottom so that it overrides any other settings in the base CSS.

The default image alignment classes that WordPress uses - .alignleft, .alignright, .aligncenter, and .alignnone - are all set as centered in the base styles. On larger screens, they float to the left and right as appropriate.

.text-center, .text-left, and .text-right align text in the center, to the left, and the right, respectively. .pull-right floats objects to the right.

To remove margins and padding from an object, use the .no-space class. .no-space-bottom and .no-space-top will remove margins and padding just from the bottom or top of an object. .small-space-bottom leaves just a small amount of margin at the bottom of an object.

.padding-top applies 14 pixels of padding to the top of an object, while .margin-bottom applies a 34 pixel margin to the bottom.

Sometimes you want an element to appear in your HTML for people using screen readers, but don’t want it to be displayed visually. In those cases, use the .screen-reader class. This is currently applied to the skip-nav link, as well as the search form label.

The end of this section contains a few classes with a clearfix applied. This removes any floats contained in those sections, which prevents weird formatting issues. To apply a clearfix to an div not already covered here, use the .group class.

Media Queries

This is where progressive enhancement occurs.

For smaller screens, formatting is added for javascript-enabled devices. On larger screens, the line-height is increased for more comfortable reading, a few elements gain bigger font-sizes or more padding, and images are aligned to the left or right as appropriate.

The .nav-mobile.collapse class is really important. If someone has their browser set to a small size and toggles the navigation menu, and then later expands their browser window, the navigation bar could be hidden. This nested class forces it to always be displayed on larger screens.

Referenced & Useful Resources

  1. Object Oriented CSS
  2. Meyer's CSS Reset
  3. Normalize.css
  4. Typography First Web design
  5. Twitter Bootstrap
  6. Using an Icon Font