SASS (Bourbon + Bourbon Neat) - Variables, Base, Typography classes

global.css.scss

// Place all the styles related to the welcome controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@import "bourbon";
@import "neat";

/*
 * Variables
*/

$mobile: new-breakpoint(max-width 480px 4);
$tablet: new-breakpoint(min-width 760px 8);

$text-color: #333;
$quiet-color: #ccc;
$loud-color: #000;
$heading-color: #111;
$link-color: #4183c4;
$link-hover-color: saturate(#4183c4, 20%);
$link-visited-color: #4183c4;
$base-font-family: 'Roboto Condensed', sans-serif;
$base-font-size: 18px;
$base-font-weight: 300;
$fixed-font-family: 'Andale Mono', AndaleMono, monospace;
$fixed-font-size: 15px;
$fixed-line-height: 1.2;
$heading-font-family: 'Roboto Condensed', sans-serif;
$heading-font-weight: 700;


/*
 * Base styles
*/

body {
  color: $text-color;
  font-size: $base-font-size;
  font-family: $base-font-family;
  font-weight: $base-font-weight;
  padding: 30px;
  line-height: 1.6;
}

section.app {
  @include outer-container;

  aside {
   .sidebar {
      @include media($mobile) {
        @include span-columns(4);
      }
    }
  }

  article {
    @include span-columns(12);
  }
}

button {
  @include button;
}


/*
 * Typography
 */

.link {
  color: $link-color;
  text-decoration: none;

  &:visited {
    color: $link-visited-color;
  }

  &:hover, &:visited:hover {
    color: $link-hover-color;
    text-decoration: underline;
  }
}

.fixed { font-family: $fixed-font-family; font-size: $fixed-font-size; line-height: $fixed-line-height; }

.quiet { font-color: $quiet-color; }
.loud  { font-color: $loud-color; }
.italic { font-style: italic; }
.bold   { font-weight: 700; @extend .loud; }

.h1, .h2, .h3, .h4, .h5, .h6 { font-family: $heading-font-family; font-weight: $heading-font-weight; }
.h1, .h2 { line-height: 1.1; }
.h3, .h4 { line-height: 1.3; }
.h1 { font-size: 400%; letter-spacing: -2px; }
.h2 { font-size: 250%; letter-spacing: -1px; }
.h3 { font-size: 200%; }
.h4 { font-size: 180%; }
.h5 { font-size: 130%; }
.h6 { font-size: 100%; }

.block-margins { margin: 1em 0; }
.unordered-list { list-style-type: disc; }
.ordered-list { list-style: decimal; }

.typography {
  a { @extend .link; }
  i, em { @extend .italic; }
  b, strong { @extend .bold; }

  h1 { @extend .h1; margin: 1em 0 0.5em; }
  h2 { @extend .h2; margin: 1em 0 0.5em; }
  h3 { @extend .h3; margin: 1em 0 0.5em; }
  h4 { @extend .h4; margin: 1em 0 0.5em; }
  h5 { @extend .h5; margin: 1em 0 0.5em; }
  h6 { @extend .h6; margin: 1em 0 0.5em; }

  p, ul, ol, pre { @extend .block-margins; }

  ul { @extend .unordered-list; }
  ol { @extend .ordered-list; }

  pre, code { @extend .fixed; }
}


/*
 * Modifiers
 */

.float-left  { float: left; margin-right: 1em; }
.float-right { float: right; margin-left: 1em; }

.text-left   { text-align: left   !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right  !important; }


/*
 * Object definitions
 */

.content {
  margin: 0 auto;
  width: 48em;
}

.header-block {
  font-size: 110%;

  &.typography h1 { font-size: 450%; margin-top: 0 !important; }
}

.author-block {
  border-top: 3px double $quiet-color;
  margin-top: 4em;
}


/*
 * Forms
*/

.field {
  margin-bottom: 1em;
}
.field-label {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 300;
  font-size: 15px;
  display: block;
  margin-left: 2px;
}

.fieldgroup {
  .field { display: inline-block; }
  .field + field { margin-left: 1em; }
}

.textbox {
  font: 13px sans-serif;
  border: 1px solid #ccc;
  border-top: 1px solid #999;
  border-radius: 2px;
  padding: 3px 4px;

  &:focus { outline: none; border: 1px solid mix(purple, pink); }
  &.large { font-size: 18px; }
}