League of extraordinary front end dev tools
?
0 likes?191 views
Welcome to Dev City. Once a safe place for developers. Until the coming of the dark times: Microsoft. IE6. Enter the league of extraordinary front end dev tools. Node! Sass! Grunt!
![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!](https://image.slidesharecdn.com/leagueofextraordinaryfrontenddevtools-160908030545/85/League-of-extraordinary-front-end-dev-tools-22-320.jpg)
League of extraordinary front end dev tools
- 1. The League of Extraordinary Front End Dev Tools
- 2. DEV CITY ...
- 3. THE TROLL!
- 5. The Church of Web Standards tried to negotiate a truce.
- 6. The Army of Vendor Pre-fixes Pointy Haired Boss DEADLINE The Hacker But then came the dark times.
- 8. Dev City Needed a New Hero. The Leagueanswered the call!
- 11. 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; } ...
- 12. Compass
- 13. 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; }
- 14. JavaScript
- 17. JSON!
- 18. Node.js
- 19. npm install -g sass npm install -g compass www.npmjs.org -G means GLOBAL
- 20. The workflow!
- 21. Grunt.js
- 22. 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!
- 24. The League is always growing. The End. Yeoman MVC Bower JasmineHuxley Gulp Rhino