AllThingsSmitty

<main>
  <div class="device">
    <header>
      <h1><strong>CSS</strong>Presso</h1>
    </header>
    <section>
      <form>
        <input type="radio" name="coffeeType" id="espresso">
        <input type="radio" name="coffeeType" id="doppio">
        <input type="radio" name="coffeeType" id="macchiatto">

AllThingsSmitty

##SassConf 2014 Resource Round-Up

Keeping Your Sass Squeeky Clean with Adam Onishi (@onishiweb)

• CSS Grids
• Sass for IE
• Breakup Sass Components
• Extends
• We Are Architect Front End BoilerPlate
• Idiomatic CSS Guidelines
• Idiomatic Sass Guidelines

AllThingsSmitty

// Example sequence: 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610...
 
// Get Fibonacci sequence with a loop
var looping = function (n) {
  'use strict';
  var a = 0, b = 1, f = 1;
  for (var i = 2; i <= n; i++) {
    f = a + b;
    a = b;
    b = f;

AllThingsSmitty

@function set-notification-text-color($color) {
  @if (lightness( $color ) > 50) {
    @return #000; // lighter color, return black
  }
  @else {
    @return #fff; // darker color, return white
  }
}

$confirm: hsla(101, 72%, 37%, 1);  // green

AllThingsSmitty

.fave {
  width: 70px;
  height: 50px;
  background: url(http://cssanimation.rocks/assets/images/posts/steps/twitter_fave.png) no-repeat;
  background-position: 0 0;
}
.fave:hover {
  background-position: -3519px 0;
  transition: background 2s steps(55);
}

AllThingsSmitty

Ready out of the Box

Brackets has a terrific built-in extension manager for super-easy add-ins. There's no setup work required, no Package Manager to install like in Sublime Text. Simply download and install Brackets and you're ready to go.

Make It Look Good

• Install Atom Dark Theme. I like Atom's default theme.
• Monokai Dark Soda is pretty lovely, too.
• I prefer to increase the theme font size to 13px: View → Themes... → Theme Settings. Go with what feels best.

AllThingsSmitty

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding-top: 250px;
}
header {
  padding-top: 50px;
  height: 300px;

AllThingsSmitty

html,
body {
  height: 100%;
  line-height: 1.5;
}
.wrap {
  display: box;
  display: flex;
  height: 100vh;
}

AllThingsSmitty

/* Top level nav */
.nav {
  float: left;
  margin: 20px 0;
}

/* Dropdowns */
.nav ul {
  position: absolute;
  top: 2.5em;

AllThingsSmitty

.modal {
  padding: 1rem 2rem;
  max-width: 50%;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.95);
  color: #333;
  font-family: sans-serif;
  line-height: 1.5;
}
.modal a { color: #bf0222; }