fmal

// Still need to work out how to combine rules for numbers
// that share a greatest common factor without the unit-builder
// actually containing the fraction to which they can both be
// reduced.

// Calculate the greatest common factor of two integers
@function gcf($a, $b) {
    @if $b == 0 {
        @return $a;
    }

fmal

<div class="nav">
  <li class="box"><a href="">One</a></li>
  <li class="box"><a href="">Two</a></li>
  <li class="box"><a href="">Three</a></li>
</div>

fmal

data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

fmal

module.exports = function (grunt) {

  'use strict';

  grunt.initConfig({

    staging: 'dist/debug/',
    production: 'dist/release/',

    pkg: grunt.file.readJSON('package.json'),

fmal

%myclass {
  color: blue;

  @media (min-width: 600px) {
    background: red;
  }
  @media (min-width: 800px) {
    font-size: 28px;
  }
}

fmal

OOCSS vs OOSass

note that this requires Sass 3.2 alpha or higher

OOCSS is awesome because it helps us organize our style sheets in clean and simple ways but it can be far too rigid for the new responsive web. How can we use preprocessors to preserve both flexibility and cleanliness of code? Can these objects be abstracted to our preprocessors?

Lets first take a look at three column widths in OOCSS to see how they compare.

CSS

fmal

/* This is a quick Sass mixin that makes it easier to import Google Web Fonts into your CSS.
 * By default, it will import Open Sans with a weight of 400.
 * It can take up to two parameters, $name and $weights.
 * $name is the name of the font. Make sure you use plus characters instead of spaces,
 * and if the font name does include spaces, it must be enclosed in quotes.
 * $weights is a list containing the weights required.
 * Weights are given as a comma-seperated list enclosed in parentheses.
 */
 
/***** Important! *****

fmal

$main-font-size: 16px;

@mixin x-rem($property, $values) {

	// Empty list for all values in px
	$px-values: ();
	$rem-values: ();

	// Iterate over entries
	@each $value in $values {

fmal

$button-color: #ff6600;

%button-base {
	@include adjust-font-size-to(14px, 1.5);
	@include inline-block;
	@include border-radius(6px);
	font-weight: bold;
	padding: 3px 30px;
	position: relative;
	text-decoration: none;

fmal

New Computer Setup

Last tested using Mac OS X 10.8 Mountain Lion

Before Wiping Original Install

• Backup .ssh folder to avoid having to regenerate codes for services such as Heroku and Github.