Rachel Naomi Design

CSS Dev Conference 2014, New Orleans

Day 3

Frontend Tooling

Adam and Ethan, sparkbox

bit.ly/sparkbox-apprentice

bit.ly/css-dev-frontend-tooling

@a_simpson @ethanmuller

bit.ly/br-tooling-links

rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers

Source Control

github.com/sparkbox/br-frontend-demo

Texteditor

Signs you need a better editor

  1. Your editor is writing code for you
  2. You're repeating yourself
  3. You've hit a skill ceiling
  4. Your editor is in your way

  5. Choosing a great text editor removes abstraction between your brain and your code

  6. Current state of editors
    • sublime text, vim

Sublime

Vim

cd folder vim file.css

Source Control

Github

Fluency

Beginner guide

Preprocessor

Sass

$primary-color: #00a5b5; @mixin sb-media($query)

gem install sass apps: compass, bourbon, scut lipsass, sass written in C, not ruby compass: collection of mixin files compass-style.org

scss director everything imports to mq-base > compass on top

rem mixin, can do font size keyword

grunt command: g compass use compass or boubon in codekit

Javascript Preprocessors

HTML Prrocessor

How do we compile?

Modular Markup

Server

tmux gruntfile.coffee for live reload

Device testing

Accessibility Testing

Automated Deployment