Upload
sherif-tariq
View
74
Download
0
Embed Size (px)
Citation preview
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