Building a Mobile Site: Mobile Styling

Now that you’ve got your project all set up, it’s time to implement the design from the mock-ups earlier when scoping out the site.

Using the mock-ups and design principles from Understanding a Site, you’ll implement a basic style guide that you’ll use on almost every page of your site.

Prerequisites: Project Structure

Outline


Creating a Style Guide

A style guide contains the various styling themes that repeat themselves throughout your site. When a user navigates from page to page, you’ll want the look and feel of the site to stay the same. This means having similar base styles on every page.

The purpose of a style guide is to provide structure and organization to your styles that will support you in designing new pages. It will include your color scheme, gradients, fonts, and font sizes as well as basic styles for headers, bars, buttons, and forms.

As a standard we use three files that contain the majority of our style guides here at Moovweb and you’ll find them in the assets/stylesheets/globals folder: _variables.scss, _base.scss, and _lib.scss.

If your project doesn’t have these files, go ahead and create them.

_variables.scss
variables that hold your color schemes, fonts, font sizes, and gradients
_base.scss
all the styles you want applied globally on every page
_lib.scss
mixins and classes that hold basic styles for your headers, bars, buttons, and forms

Don’t forget to import all your stylesheets! Make sure all your stylesheets are being imported in main.scss. They should be in the following order:

@import "globals/_variables";
@import "globals/_lib";
@import "globals/_base";
Why do the stylesheets begin with underscores?

You may be wondering why all our stylesheets (apart from main.scss) start with an underscore. This is because they are partial stylesheets. They are not compiled into .css files by Sass. The only file that is compiled by Sass is main.scss, which imports all our other stylesheets!


Styling with Sass

Moovweb project stylesheets are found in the assets/stylesheets folder. We use Sass in our stylesheets, which comes with some extra functionality on top of regular CSS. We’ll go over some of the key features here. You can also check out the Sass website for some tutorials.

Variables & Nesting

Sass allows us to use variables in our CSS stylesheets. We can use these variables to define a color palette for us to use throughout our project. If, for whatever reason, we want to alter our color scheme in the future, we can just go change the variables in our color palette.

Go into the globals/_variables.scss file and add some color variables to use in our header.

// colors
$color1: #B03B01; // header color
$color2: #075899; // link color

Now we can use these colors in our stylesheets.

For example we might set the background of #Header as follows:

#Header {
  background: $color1;
}

Sass also allows us to nest our SCSS styling. This allows us to keep the HTML hierarchy in our stylesheets and makes the code much more readable.

For example, when styling the header, I might write:

#Header {
  background: $color1;
  a {
    color: $color2;
  }
}

This would set only the anchors that are inside the element with ID "Header" to the color “#075899”.

Styling Example

You’ll also want to define things like background colors, fonts, font sizes, borders, gradients, and various other attributes that will remain consistent throughout your site.

Mixins & Classes

Mixins are snippets of SCSS styling that you can use to apply a chunk of styles at once.

It’s generally best practice to create Sass mixins for commonly styled elements throughout your project. You’ll probably want to keep all these mixins in a single file in the globals folder because they’ll be used on every page.

At Moovweb, we use the globals/_lib.scss file as our library of pre-defined mixins and classes.

Show me some useful examples of mobile mixins.
@mixin btn1 {
  @include background($grad1);
  @include box-shadow($box_shadow);
  border: $border1;
  height: 40px;
  padding: $spacing;
  color: $text_color;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: $text_shadow;
  text-align: center;
  font-family: $font_family;
  font-size: $h3_size;
  font-weight: bold;
  a {
    display: block;
    width: 100%;
    color: $link_color;
  }
}

Notice if you just copy and paste those styles into your _lib folder, you’ll get an error. That’s because it’s using several variables you may not have defined such as $grad1, $box_shadow, $border1, and more.

We also define classes to go along with those mixins so it’s simple to add styles to your elements by just adding a class.

For example, my class for mixin btn1 would be:

.btn1 {
  @include btn1;
}

Now I can apply this style to an element using the Tritium add_class("btn1").

Usually you’ll want mixins for your buttons, headings, bars, and forms.


Styling with Bourbon

At Moovweb, we also use Bourbon, a set of mixins that add even more advanced functionality to our styling and make styling that much easier out of the box!

Gradients

The linear-gradient() function gives a clean gradient effect to your background that looks great on headers, bars, and wide buttons.

For example, I might write:

#Header {
  #SearchForm {
    @include background(linear-gradient(top, #852201, #6a1b00));
  }
}

Styling Example

_base.scss

The last file we’ll be using is _base.scss. This file holds the base styles that will be applied globally to all your elements regardless of what page they’re on.

Since iGadgetCommerce is a pretty simple e-commerce site, we’re going to have an unusually large _base.scss file.

This is because the structure on many of the pages is similar and applying a ton of global styles happens to look good in this case.

However, you’ll generally be doing a lot more page-specific styling when designing your own sites.

Here is a sample _base.scss file:
// Site-wide styles go here
// What shouldn't go here
//   - global declarative classes, mixins, or variables, that goes in _lib.scss

body {
  font-family: $font_family;
  font-size: $font_size;
  height: 100%;
  padding: 0;
  margin: 0;
}
h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
}
h2{
  margin: 5px 0 10px;
}
p {
  font-size: $font_size;
}

textarea, input[type="text"], input[type="password"], select {
  @include border-radius(3px);
  border: $border2;
  padding: 8px;
  vertical-align: middle;
  margin: 0px 5px;
}
a {
  text-decoration: none;
  color: $color5;
}
ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}
hr {
  margin: 10px 0;
  padding: 0;
  background: $color6;
  height: 1px;
  border: 0;
}

Spriting

When designing for mobile, performance is a much higher priority than when designing for desktop sites. This is because most mobile phones are connected to the internet at significantly worse bandwidths, making it critical that your mobile site is completely compressed and efficient.

For this reason, we sprite images to keep sizes and requests to a minimum.

Spriting simply means we combine as many images as possible into a single image so users only need to make one request for that image. Also, the total size of a sprite is smaller than the sum of all the individual files had we left them un-sprited.

Here’s an example of a sprite:

Sample Sprites

Spriting with Moovweb

Let’s add some sprites to our project to help with how the mobile site looks.

Download this file, unzip it and add the whole folder to your assets/images folder.

Add the following line near the top of main.scss: @import "globals/_sprites";.

When Moovweb runs, two files are generated:

  1. The sprite itself, in the images folder: sprites.png
  2. A sprite stylesheet, in the stylesheets/globals folder: _sprites.scss

You must remember to use @import to import your sprites.scss file into main.scss!

The sprite stylesheet defines a series of classes and mixins, one for each image. They set the background to be the sprite, giving coordinates to focus over the image in question. The class/mixin names are in the format:

sprites-filename

For example: the file search.png will have a class called "sprites-search".

Once you’ve set up your sprites, you can use them by adding the corresponding classes to the elements that you want to set as your sprite.

For example in the header.ts file, you might write:

$("//div[@id='SearchForm']/form//input[@type='image']") {
  wrap("div", class: "mw_search_btn sprites-search")
  attribute("style", "opacity:0;")
}

Styling

Show me some spriting tips!

We recommend putting sprites in their own <div>s so you have full control over their positioning on the page.

You can also create subfolders inside the sprites folder to organize your sprites. In this case, two additional files would be generated for each folder you have inside the sprites folder. The stylesheets would have the name of the subfolders you created, and your sprites would have classes in the format:

foldername-filename

For example, the image account.png in the subfolder images/sprites/icons is assigned the class "icons-account".

Sprites have a maximum height of 1024px. If your sprite exceeds that height, you should break it into two sprites by placing any extra images into a new subfolder in sprites.

You can use spriting to automatically implement retina images.