league of extraordinary front end dev tools

The League of Extraordinary

Front End Dev Tools

DEV CITY ...

THE TROLL!

Embrace. Extend. Extinguish!

The Church of Web Standards tried to negotiate a truce.

The Army of Vendor Pre-fixes

Pointy Haired Boss

DEADLINE

The Hacker

But then came the dark times.

BEM!

SMACSS!

OOCSS!

Dev City Needed a New Hero.

The League answered the call!

Lint and Hint

Sass

Don’tREpeatyourself!

Sass

Change it in once place, Sass updates every reference to that mixin.No need to hunt down dozens, hundreds of instances across multiple files!

CSS

@mixin body-font-bold { font-family: 'Open Sans', sans-serif; font-weight: 700; }

.module_type_title { ... @include display-font-bold; }

...

.module_header_row { ... @include display-font-bold; }

...

Compass

Compass

CSS

.simple { @include border-radius(4px, 4px); }

.simple { -webkit-border-radius: 4px 4px; -moz-border-radius: 4px / 4px; -khtml-border-radius: 4px / 4px; border-radius: 4px / 4px; }

JavaScript

jQuery!

FIND SHOWparent

Douglas Crockford

JSON!

Node.js

npm install -g sass

npm install -g compass

www.npmjs.org

-G meansGLOBAL

The workflow!

Grunt.js

module.exports = function(grunt) { "use strict";

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

sass: { build: { options: { style: 'expanded' //Development }, files: { 'css/main.css':'css/scss/main.scss', } } },

watch: { css: { files: ['css/scss/**/*.scss', tasks: ['buildcss'] } } });

grunt.loadTasks('tasks'); grunt.registerTask('buildcss',['sass']);};

Grunt monitored the .SCSS files and when they changed, directed Sass to transform them into valid CSS!

Meanwhile, back at GitHub...

The League is always growing.

The End.

Yeoman MVC

BowerJasmineHuxley

Gulp

Rhino