yodasw16

<ul class="split">
    <li>
        <span class="split__title">Name:</span> Dave
    </li>
    <li>
        <span class="split__title">Description:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis est id quam tincidunt iaculis. Sed at nisi consequat, viverra est a, iaculis lacus. Nunc erat lorem, adipiscing sed lacinia pellentesque, accumsan at dolor. Vivamus sollicitudin eros sit amet odio porttitor pretium.
    </li>
</ul>

yodasw16

<h2>Choice</h2>
<ul class="choice-list">
    <li class="choice-list__choice"><a href="#">First Choice</a></li>
    <li class="choice-list__choice"><a href="#">Last Choice</a></li>
</ul>

<h2>Split Choice</h2>
<ul class="choice-list--split">
    <li class="choice-list__choice--first"><a href="#">First Choice</a></li>
    <li class="choice-list__choice"><a href="#">Last Choice</a></li>

yodasw16

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "breakpoint";
$break: 32em;

// How to do media queries with nested selectors

yodasw16

var gulp = require('gulp');
    compass = require('gulp-compass')

var sources = {
    styles : 'client/app/sass/**/*.scss'
}

gulp.task('styles', function() {
    gulp.src('sources.styles')
        .pipe(compass({

yodasw16

<ul class="list--bare cards">
  <li>
    <article class="card">
      <header class="card__header">
        <h4 class="mbn"><a href="">ql2push1</a> (prod)</h4>
        <time datetime="2014-06-16 15:22">Jun 16, 2014 3:22 PM</time>
      </header>
      <section class="card__details">
        <ul class="split">
          <li>

yodasw16

// ----
// Sass (v3.4.0)
// Compass (v1.0.0)
// ----

$namespace: null !default;

// $namespace: NS;

%button {

yodasw16

<form>
  <input class="text-input" type="text" value="text">
  <input type="week">
  <input type="url" value="url">
  <input type="time">
  <input type="tel" value="tel">
  <input type="search" value="search">
  <input type="range">
  <input type="checkbox">
  <input type="radio">

yodasw16

<h2>Default Form</h2>
<form class="">
    <label for="email">Email</label>
    <input class="text-input" id="email" type="email" placeholder="Email">

    <label for="password">Password</label>
    <input class="text-input" id="password" type="password" placeholder="Password">

    <label for="state">State</label>
    <select id="state">

yodasw16

<h2>Default Form</h2>
<form>
    <label for="account">Account #<small class="label--additional">(Cannot Change)</small></label>
    <input class="text-input" id="account" type="num" value="123456789" readonly>
    
    <label for="email">Email</label>
    <input class="text-input" id="email" type="email" placeholder="Email">
    <span class="helper-text">Enter your email address</span>
    
    <label for="password">Password</label>

yodasw16

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

// ==========================================================================
// Size overrides
// ==========================================================================

//