evantravers

@mixin placeholder {
  &.placeholder { @content }
  &:-moz-placeholder { @content }
  &::-webkit-input-placeholder { @content }
}

evantravers

<div class="foo">foo</div>

evantravers

// small mixin for styling HTML5 placeholder text
@mixin placeholder {
  &.placeholder { @content }
  &:-moz-placeholder { @content }
  &::-webkit-input-placeholder { @content }
}

evantravers

Workspace in tmux

I like to work using a separate tmux session for each active project/folder that I'm juggling. This script will either create or attach to a project based on it's name, using fasd to jump to the directory directly. The project will be named based on the basename of the folder, for easy switching using TMUX-s.

evantravers

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

.class {
  color: red;
}

%placeholder {

evantravers

CSS Rants

Why?

• monolithic css files are bad.

Organization

• [SMACSS] ( http://smacss.com/ )
  • smaller files for organization
  • recognizable structure
• [BEM] ( http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ )

evantravers

<div class="foo">foo</div>

evantravers

%div

evantravers

%main
  %ul.navigation
    %li Home
    %li Contact
    %li Dagobah
    %li Rails Conf
    %li Party City

evantravers

CSS Hurt Locker

"This box is full of stuff that almost killed me."

Quick Review for fun and profit:

Da Block Model

display