TOOLINGTHEMING, MADE EASY

Created by / Evan Butera @egosumentropia

Developer @wellnet (yeah, we rock)

"Hey, computers are faster now! and alsothe internet download speeds are better!"

guy who hates Front-End Engineering

TOOL WAT?

SOME HISTORY

More sophisticated Toos started to appeared

gulp,

and many more

Today is Tool pollution time

brunch, grunt, yeoman, codekit, livereload, bower,bootstrap, foundation, purecss, CSS Lint, jquery, phantomjs,

modernizr, mustache, handlebars, JS Hint, uglifyjs, sass,compass, coffescript, prepros, koala, typescript

TOOLS HELP YOU TObe faster

organize your code better

be less prone to error

and automate

OK, BUT DRUPAL?bootstrap themes and modules

handle dependencies

write less code

coding standards

BOOTSTRAPno, not that one

the easy way

...and you can create your own yeoman generator

to bootstrap projects your way

DEPENDENCIESthe easy way

STYLEThe easy way

Drupal 8 CSS coding standards

BEM

VANILLA CSS.block{ unicorn: fluffy; } .block--modifier{ unicorn: dancing; } .block__element{ pony: awsome; } .block__element--modifier{ quaggan: fooooo; }

CSS PREPROCESSORS TO THE RESCUE // SCSS, LESS .block{ unicorn: fluffy; &--modifier{ unicorn: dancing; } &__element{ pony: awsome; &--modifier{ quaggan: fooo; } } }

SOME MAGICor how to programmaticaly generate stuff w/ preprocessors

// SCSS syntax $list: ( goofy : (quaggan : fooo), donald : (quaggan : baaaar), sora : (quaggan: none) );

@each $char, $attribute in $list{ .block__element{ &--#{$char}{ quaggan: map-get($attribute, quaggan); } } }

Two extra cents // SCSS syntax %block{ unicorn: pink; } .stuff{ quaggan: blue; @extend %block; } .thing{ @extend %block; } // compile to .stuff, .thing{ unicorn: pink; } .stuff{ quaggan: blue; }

avoid extend abuse, stay away from nesting hell

Drupal 8 CSS coding standards

SMACSS

separation of concerns is up to you

TAKE A TOURSASS

LESS

STYLUS

JAVASCRIPTThe easy way

Drupal 8 JS coding standards

drupal.org/node/172169

strict code, indentation, spacing ...

JSBEAUTIFIER AND JSHINTimport settings, run...

...cry 'cause jshint will hurt your feelings...

...and set your code right

OK, I GET IT, TOOLS ARE NICEbut I still need to handle them all

isn't this a waste of time?

AUTOMATINGthe easy way

INTRODUCING GRUNTgruntfile.js

module.exports = function(grunt) { // Project configuration grunt.initConfig({ sass: { core: { files: { 'assets/main.css': 'css/main.scss', } }, }, autoprefixer: { dist: { src: 'css/main.css' } }, }); // define dependencies grunt.loadNpmTasks( 'grunt-sass' ); grunt.loadNpmTasks( 'grunt-autoprefixer' ); // register tasks grunt.registerTask( 'default', [ 'css' ] ); grunt.registerTask( 'css', [ 'sass', 'autoprefixer'] ); };

configuration over code

INTRODUCING GULPgulpfile.js

// Load plugins var gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), notify = require('gulp-notify');

// Define a task gulp.task('style', function () { return gulp.src('assets/styles/**/*.scss') .pipe(sass()) .pipe(autoprefixer()) .pipe(gulp.dest('styles')) .pipe(notify({message: 'Styles task complete'})) });

code over configuration

THE CHOICE IS UP TO YOUconsider

Grunt Gulp

Version 0.4.5 3.9.0

Fork ~1250 ~2000

GitHub issues 112 36

Plugins ~4.5 k ~ 2.0 k2015/12

OK, GREAT, WHAT SHOULD I USE?

FOUR SIMPLE TIPS

CHOOSE TOOLS WISELYchanges to workflow are hard

stuff must be implemented and mantained

USE ONLY TASK YOU REALLY NEEDcool stuff are not always the best stuff

overdoing is never right even if fun as hell

DON'T COMMIT ARTEFACTSneveah. period.you can have a dist and a dev task dude

LIMIT EXTERNAL DEPENDENCIESperiod

consider

AVOID RUBY GEMS'cause damn slow

Timings for processing a 200KB file to plain CSS

SASS 4.9s

SASS (w/ warm cache) 2.5s

Libsass 0.2s

Stylus 1.7s

LESS 0.5sdata from @jo_liss

and remember to"postinstall": "find node_modules/ -name '*.info' -type f -delete"

in package.json

if running NPM modules inside D7

TL;DRit's fucking 2015 dude. DREAMWEAVER time is long gone

THE ENDspecial thanks to

@graze, @milanojs, @wellnet

ask your questions

WE ARE HIRINGinfo@wellnet.it

also

Tomorrow hackaton && Drupal school

June 2016 Drupal dev days Whatever you do, we can use your skills to improve Drupal