What is Responsive Design?

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

According to Wikipedia

So this:

Not this:

Why not Bootstrap/Zurb Foundation?

Ugly HTML

  
...
  
...

						

The grid system requires a lot of presentational classes and wrapping containers.

Fixed Breakpoints

Anybody know where a Samsung Galaxy Note 3 fits?

Or an iPad mini?

Or any Windows phone?

Your site is gonna look like Bootstrap

Unless you spend a lot of time overriding default styles.

So why not just start with the styles you want?

What's SASS?

Syntactically Awesome Style Sheets

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

Let's take a look at some of the features.

Variables

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
						

Renders as:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
						

Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
						

Renders as:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
						

Partials

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain...

...as long as you have a structure when you begin and your team adheres to coding standards.

Import

CSS has an import option that lets you split your CSS into smaller, more maintainable portions. Sass builds on top of the current CSS @import but instead of loading a file on the front-end, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

Let's say you have a couple of Sass files, _reset.scss and base.scss. We want to import _reset.scss into base.scss.

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
							

// base.scss

@import 'reset';

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}
							

Renders as:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}
						

Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can pass in values to make your mixin more flexible.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

							

Renders as:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}
						

Operators

Sass has a handful of standard math operators like +, -, *, /,
and %.

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}
							

We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages.

Renders As:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}
						

What's Compass?

Compass is a Sass framework, designed to make the work of styling the web smooth and efficient. Much like Rails as a web application framework for Ruby, Compass is a collection of helpful tools and battle-tested best practices for Sass.

What's that get us?

• Handy built-in Mixins
• Community-made Ruby Gems
• Compass command line utility

  There's also GUIs for those so inclined.

The Built-in Mixins

The Compass mixins are divided into categories that can be imported as needed

• CSS3

  The CSS3 module provides cross-browser mixins for CSS properties introduced in CSS3, for example border-radius and text-shadow.

• Helpers

  The compass helpers are functions that augment the functions provided by Sass.

• Layout

  This module provides tools to help you with page layout.

• Reset

  This module applies the global reset to your stylesheet by simply importing it.

• Typography

  The Compass Typography module provides some basic mixins for common text styling patterns.

• Utilities

  The Compass Utilities module provides some basic mixins for common styling patterns.

Some Handy Ruby Gems

• Compass Normalize
• Breakpoint
• Sassy Buttons
• Singularity GS
• Team SASS
• Search of Rubygems.org for Compass

Compass command-line utility

It processes the SCSS partials and renders the browser-readable CSS.

There are a couple of commands I use all the time:

• compass watch
• compass compile

Non-command-line tools

Not everybody is a nerd or on a Unixy system.

• Codekit
• Live Reload
• Compass.app