Date post: | 13-Apr-2017 |
Category: |
Technology |
Upload: | wellnet-srl |
View: | 211 times |
Download: | 0 times |
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 [email protected]
also
Tomorrow hackaton && Drupal school
June 2016 Drupal dev days Whatever you do, we can use your skills to improve Drupal