Automate ALL THE FRONT-END THINGS

Automate ALL THE
FRONT-END THINGS!
Text
SotR 2014 • Kitt Hodsden • http://ki.tt • @kitt
1

View Slide

Kitt Hodsden • @kitt • http://ki.tt/sotr 2
AUTOMATE

View Slide

Hi!

View Slide

Kitt Hodsden • @kitt • http://ki.tt/sotr
Who are you?
4

View Slide

And what do have we here?
5

View Slide

http://ki.tt/sotr
6

View Slide

http://ki.tt/sotr

View Slide

http://ki.tt/sotr
http://ki.tt/sotr

View Slide

Wait... what?
9
What are we talking about?

View Slide

Wait... what?
10
What are we talking about?

View Slide

You are invited to participate in group note taking at:
http://ki.tt/sotr14notes
11
Community knowledge!

View Slide

Demo ﬁles / examples available at:
http://ki.tt/sotr.zip
12
Demo ﬁles!

View Slide

Prerequisites!
13

View Slide

node & ruby
(and maybe python & php)
14
We need node and ruby to use the tools we’re going to talk about.

View Slide

Setup node by downloading the installer and running it.
http://nodejs.org

View Slide

# mac / linux
$ which ruby
/usr/local/bin/ruby
$ ruby --version
ruby 2.0.0p195
# windows
> where ruby
C:\Ruby200\bin\ruby.exe
> ruby --version
ruby 2.0.0p451
Yay! Sass installed!
See if you already have ruby installed

View Slide

RVM RUBY VERSION MANAGER
https://rvm.io/rvm/install
Install ruby in different ways on OSX
OSX

View Slide

Install ruby in different ways on OSX
OSX

View Slide

https://unﬁniti.com/software/mac/jewelrybox
Ruby on OSX, I recommend JewelryBox, too.

View Slide

APT / YUM
$ sudo apt-get install ruby1.9.1
$ sudo yum install ruby1.9.1
Install ruby in different ways on Linux
Linux
http://ki.tt/s223

View Slide

Install ruby in different ways on Windows
Windows
http://chocolatey.org/

View Slide

C:\> cinst ruby
Windows

View Slide

RUBYINSTALLER
http://rubyinstaller.org/downloads/
PIK
https://github.com/vertiginous/pik
Windows
CYGWIN
http://cygwin.com

View Slide

http://ki.tt/sotr
25

View Slide


View Slide

Automate All the
Front-End Things!

View Slide

1. Embrace the DRY principle
28
Guiding principles of making our workﬂows AWESOME

View Slide

2. Make changes easy
29

View Slide

3. Make ﬁnding mistakes easy
30

View Slide

Implement a design or prototype
31
What magic do we do?

View Slide

Update the designs
32

View Slide

Update the designs
Make sure it works in all browsers
33

View Slide

Update the designs
Make it faster
34

View Slide

Update the designs
Make it faster
35

View Slide

We’re MAGICAL

View Slide

Update the designs
Make it faster
37

View Slide

How often do we have a blank slate, really?

View Slide

Update the designs
Make it faster
39

View Slide

Update the designs
Make it faster
40

View Slide

change.
click.
change.
click.
41

View Slide

change.
click.
change.
click.
42
change.
click.
change.
click.
change
click.
change.
click.
change.
click.
hange.
click.
hange.
click.
hange.
click.
change.
click.
change
click.
change
click.
change.
click.

View Slide

Guiding principles!

View Slide

3

View Slide

LiveReload
45
http://livereload.com/

View Slide


View Slide

http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-
http://ki.tt/LR

View Slide

or!

View Slide

document.write('<script src="http://'<br/>+ (location.host || 'localhost').split(':')<br/>[0] + ':35729/livereload.js?snipver=1"></' +<br/>'script>')
If you don’t use browser plugins, you need this JS for LiveReload

View Slide


View Slide

IE options
http://github.com/dvdotsenko/livereload_ie_extension
http://reloadit.codeplex.com/
52
LiveReload IE options

View Slide


View Slide

Guiding principles!

View Slide

browser-sync
55
http://browsersync.io/

View Slide

With your handy local
development web server...
56

View Slide

http://ki.tt/3ws
57
LOTS of different ways to start a local webserver
Need one quick?

View Slide

$ python -m SimpleHTTPServer 8000

View Slide

Open a new terminal or command window

View Slide

In OSX, drag and drop the folder into the terminal window for the path.

View Slide

In Windows, use right click cut and paste

View Slide

http://localhost:8000/index.html
http://127.0.0.1:8000/index.html
62
You can see the temporary site running locally!

View Slide

$ npm install connect &&
echo "var c =
require('connect');c.createServer(c
.static(__dirname)).listen(8000);"
| node

View Slide

npm
64
Node Package Manager for installng node packages

View Slide

browser-sync
65
http://browsersync.io/

View Slide

http://ki.tt/sotr.zip
66
Demo ﬁles if you’d like to follow along
Example ﬁles, if you’d like.

View Slide

$ npm install -g browser-sync

View Slide

$ browser-sync start --server --files "css/*.css"

View Slide


View Slide

bs-conﬁg.js
70

View Slide

$ browser-sync init
[BS] Config file created (bs-config.js)
[BS] To use it, in the same directory run: browser-sync
$

View Slide

module.exports = {
files: "css/*.css",
proxy: {
host: "localhost",
port: 8000
},
ghostMode: {
clicks: true,
links: true,
forms: true,
scroll: true
},
open: true,
injectChanges: false,
notify: true,
};
https://github.com/shakyShane/browser-sync/wiki/options

View Slide

module.exports = {
files: "css/*.css",
proxy: {
host: "localhost",
port: 8000
},
ghostMode: {
clicks: true,
links: true,
forms: true,
scroll: true
},
open: true,
notify: true,
};
73

View Slide

module.exports = {
files: ["css/*.css", "**.*.html", "js/**/*.js"],
proxy: {
host: "localhost",
port: 8000
},
ghostMode: {
clicks: true,
links: true,
forms: true,
scroll: true
},
open: true,
notify: true,
};

View Slide

75

View Slide

$ browser-sync start

View Slide

$ browser-sync start
[BS] Copy the following snippet into your website, just before the closing
body> tag

var ___socket___ = io.connect('http://192.168.5.6:3000');

[BS] Watching files...

View Slide


View Slide

MAGICAL

View Slide

click.
copy.
scroll.
click.
paste.
80

View Slide


View Slide

Alfred
http://alfredapp.com/
Quicksilver
http://qsapp.com/
Launchbar
http://www.obdev.at/products/launchbar/
82

View Slide

Skylight
http://www.candylabs.com/skylight
Launchy
http://www.launchy.net/
http://pylaunchy.sourceforge.net/docs/
FARR
https://www.donationcoder.com/Software/Mouser/ﬁndrun/
83

View Slide

Gnome Launch Box
https://live.gnome.org/
Gnome Do
http://do.davebsd.com/
Launchy
http://www.launchy.net/
http://pylaunchy.sourceforge.net/
84

View Slide


View Slide

http://kapeli.com/dash

View Slide

http://zealdocs.org/

View Slide

Alfred looking up jQuery.

View Slide

Dash has a large number of document sets

View Slide

Naïve way to open all the browsers at once

View Slide

https://github.com/zenorocha/alfred-workflows/
https://github.com/aiyodk/Alfred-Extensions/tree/master/AlfredApp_2.x
https://github.com/willfarrell/alfred-workflows
Alfred Workflows

View Slide

Can you feel the awesome?
94
Awwwwwwwww yissssssssssssssssssss!

View Slide

3
95

View Slide


View Slide

$ npm install -g grunt-cli
Install the grunt package

View Slide

Windows users, use PowerShell

View Slide

$ npm install -g grunt-init
$ git clone https://github.com/
gruntjs/grunt-init-gruntfile.git
~/.grunt-init/gruntfile
$ grunt-init gruntfile
Download the grunt template files and generate the grunt config files ...

View Slide

Or just download them.
http://ki.tt/fgrf
100

View Slide

package.json
Gruntfile.js
The two ﬁles grunt uses

View Slide

{
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-watch": "~0.5.3",
}
}
This is what a package.json ﬁle looks like

View Slide

$ npm install
With a package.json ﬁle, you can install the needed packages easily.

View Slide

1. Watch for ﬁle changes
2. Refresh the browser on change
104
What we want grunt to do.

View Slide

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
A basic Gruntﬁle.js ﬁle

View Slide

grunt.initConfig({
uglify: {
options: {
},
build: {
}
}
});
// Default task(s).
};

View Slide

browser-sync
109

View Slide

1. Find grunt plugin*
2. Install with npm install --save-dev
3. Add the task to our Gruntfile.js file
4. Add the tasks to a command
5. Run the command
...
7. Profit!
*write if you need to
110
How to add a task to grunt

View Slide

http://npmjs.org
111
Where to ﬁnd node and grunt packages

View Slide

“grunt browser-sync”
112
What I searched for on npmjs.org

View Slide

THIS IS OKAY.
113

View Slide

Check for current state before downloading.

View Slide

$ npm install grunt-browser-sync --save-dev
Installing the browser-sync grunt package

View Slide

$ ls
Gemfile!! README.txt fonts node_modules template.php
Gemfile.lock bs-config.js images package.json templates
Gruntfile.js config.rb js screenshot.png theme.info
Guardfile! css logo.png scss widgets

View Slide

"grunt-browser-sync": "^0.9.1"

View Slide

browserSync: {
files: {
src: [
'css/*.css',
'img/*',
'js/*.js',
'*.html'
]
},
options: {
watchTask: true,
proxy: {
host: "localhost",
port: 8000
},
server: false,
}
},

View Slide

watch: {
gruntfile: {
files: '<%= jshint.gruntfile.src %>',
tasks: ['jshint:gruntfile']
},
scss: {
files: ['scss/*.scss'],
tasks: ['sass:dev']
},
js: {
// watch for js changes except for script.min.js
files: ['js/*.js', '!js/script.min.js'],
tasks: ['uglify:dev']
}
}

View Slide

grunt.loadNpmTasks('grunt-browser-sync');
...
grunt.registerTask('default', ['browserSync', ‘watch’]);

View Slide

grunt.registerTask('gogogo', ['browserSync', 'watch']);

View Slide

$ grunt gogogo
Running the newly deﬁned “gogogo” command

View Slide


View Slide

modern.ie

View Slide


View Slide

Update the designs
Make it faster
128

View Slide

Javascript?
129

View Slide

1. Find grunt plugin*
2. Install with npm install --save-dev
3. Add the task to our Gruntfile.js file
4. Add the tasks to a command
5. Run the command
...
7. Profit!
*write if you need to

View Slide

131

View Slide

$ npm install matchdep --save-dev
Installing the browser-sync grunt package

View Slide

...
// load all the grunt modules instead of one each line
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.registerTask('checkjs', ['jshint']);
grunt.registerTask('watchjs', ['jshint', 'watch']);
grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);

View Slide

jshint
134

View Slide

npm install grunt-contrib-jshint --save-dev
135
Use jshint when editing your Gruntﬁle.js
https://github.com/gruntjs/grunt-contrib-jshint

View Slide

jshint: {
options: {
...
},
gruntfile: {
src: ‘Gruntfile.js’
}
}
...
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('checkjs', ['jshint']);
grunt.registerTask('watchjs', ['jshint', 'watch']);
grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);

View Slide


View Slide

npm install grunt-contrib-qunit --save-dev
138
Javascript unit tests
https://github.com/gruntjs/grunt-contrib-qunit

View Slide

npm install grunt-contrib-jasmine --save-dev
139
https://github.com/gruntjs/grunt-contrib-jasmine

View Slide

npm install grunt-simple-mocha --save-dev
140
https://github.com/yaymukund/grunt-simple-mocha

View Slide

Update the designs
Make it faster
141

View Slide

Update the designs
Make it faster
142

View Slide

1. Reduce ﬁle sizes
2. Reduce the number of ﬁles
3. Reduce content rendering time
143

View Slide


View Slide

Images
145

View Slide

npm install grunt-contrib-imagemin --save-dev
146
Make pages load faster by reducing image sizes

View Slide

imagemin: {
prod: {
files: [{
expand: true,
cwd: 'imgs-src/',
src: ['**/*.{png,jpg,gif}'],
dest: 'imgs/'
}]
}
}

View Slide

npm install grunt-svgmin --save-dev
148
Reduce SVG sizes, too

View Slide

grunt.initConfig({
svgmin: { // Task
options: { // Configuration that will be passed directly to SVGO
plugins: [
{ removeViewBox: false },
{ removeUselessStrokeAndFill: false }
]
},
dist: { // Target
files: [{ // Dictionary of files
expand: true, // Enable dynamic expansion.
cwd: 'img/src', // Src matches are relative to this path.
src: ['**/*.svg'], // Actual pattern(s) to match.
dest: 'img/', // Destination path prefix.
ext: '.min.svg' // Dest filepaths will have this extension.
// ie: optimise img/src/branding/logo.svg and store it in img/branding/logo.min.svg
}]
}
});
grunt.loadNpmTasks('grunt-svgmin');
grunt.registerTask('default', ['svgmin']);
Sample grunt-svgmin conﬁguration

View Slide

npm install grunt-responsive-images --save-dev
150
Responsive images by resizing
https://github.com/andismith/grunt-responsive-images

View Slide

grunt.initConfig({
responsive_images: {
myTask: {
options: {
sizes: [{
width: 320,
height: 240
},{
name: 'large',
width: 640
},{
name: "large",
width: 1024,
suffix: "_x2",
quality: 60
}]
},
files: [{
expand: true,
src: ['assets/**.{jpg,gif,png}'],
cwd: 'test/',
dest: 'resize/{%= width %}/'
}]
}
},
});
Sample grunt-responsive-images conﬁguration

View Slide

npm install grunt-grunticon --save-dev
152
SVG with PNG fallbacks
https://github.com/ﬁlamentgroup/grunticon

View Slide

Non-images
153

View Slide

npm install grunt-contrib-cssmin --save-dev
154
Minimize CSS ﬁles

View Slide

npm install grunt-csscss --save-dev
155
Minimize CSS ﬁles

View Slide

npm install grunt-uncss --save-dev
156
Remove unused CSS

View Slide

npm install grunt-contrib-uglify --save-dev
157
Minimize javascript ﬁles

View Slide


View Slide

Sprites!
159
Making things easier with sprites!

View Slide

WHOO!
160

View Slide

Creating them is EASY!
161

View Slide

npm install grunt-montage --save-dev
162
Sprite your images

View Slide

grunt.initConfig({
montage: {
iconaroo: {
files: {
"images/sprites": [
"images/icons/*.png"
]
},
options: {
size: 32,
outputImage: "sprite-icons.png",
outputStylesheet: "sprite-icons.css"
}
}
}
});
Sample grunt-montage conﬁguration

View Slide

Wow. That was a lot of work.
164

View Slide

$ mkdir 640x480; for file in *.jpg; do convert $file -resize \
640x480 640x480/$file; done
A “one-liner” that resizes images

View Slide

aliases / functions / scripts
166

View Slide

167

View Slide

zsh, bash format
alias d="dirs -v"
tcsh format
alias d 'dirs -v'
Alias syntax

View Slide

$ cat ~/.bash_profile
alias d='dirs -v'
alias pu='pushd'
alias po='popd'
alias sa='source ~/.bash_profile'
alias pdw='pwd'
alias purge='rm *.~*~'
alias mroe='more'
alias memacs='emacs `git st | grep modified | cut -c14-180`'
alias sotr='pushd ~/talks/2014/sotr'
Create aliases

View Slide

http://alias.sh/

View Slide

http://twitter.com/climagic

View Slide

173

View Slide

function envg() { env | grep -i $1; }
Functions if your arguments vary

View Slide

$ mkdir new-dir && cd $_
# function mkcd { mkdir $1 && cd $1; }
$ mkcd new-dir
Functions if your arguments vary

View Slide

176

View Slide

#!/usr/bin/env bash
mkdir 640x480
for file in *.jpg;
do convert $file -resize 640x480 640x480/$file;
done
A bash script to convert

View Slide

#!/usr/bin/env bash
echo “make the resize dir 640x480”
mkdir 640x480
echo “resize each file”
for file in *.jpg;
echo “ resizing $file”
done

View Slide

#!/usr/bin/env bash -x
echo “make the resize dir 640x480”
mkdir 640x480
echo “resize each file”
for file in *.jpg;
echo “ resizing $file”
done

View Slide

bash-3.2$ resize-images.sh
+ mkdir 640x480
mkdir: 640x480: File exists
+ for file in '*.jpg'
+ convert place-kitten-01.jpg -resize 640x480 640x480/place-kitten-01.jpg
Output with -x for the bash script

View Slide

http://www.kﬁrlavi.com/blog/2012/11/14/
defensive-bash-programming/
181

View Slide

just completed!
182

View Slide

livereload, browser-sync,
grunt, alfred,
productivity apps,
aliases, functions, scripts
183

View Slide

next up!
184

View Slide

sass, media queries,
source maps, pattern lab,
phantomcss, wraith,
emmet, yeoman, bower
185

View Slide

Add your suggestions!
186
(You’re awesome!)

View Slide

all the front-end things?
(automating front-end workﬂows, part two)
Text
SotR 2014 • Kitt Hodsden • http://ki.tt • @kitt
187

View Slide

Text
188

View Slide

livereload, browser-sync,
grunt, alfred,
productivity apps,
aliases, functions, scripts
189

View Slide

sass, media queries,
source maps, pattern lab,
phantomcss, wraith,
emmet, yeoman, bower
190

View Slide

http://ki.tt/sotr
191

View Slide

192

View Slide

193

View Slide

194

View Slide

Update the designs
Make it faster
195

View Slide

Update the designs
Make it faster
196

View Slide

197

View Slide


View Slide

200

View Slide

Change the font BLUE
201
Easiest change ever!

View Slide

#6c869d 㱺 #212939
202
Easiest change ever!

View Slide

Well, phooey. The ticket was reopened.

View Slide

Soon, EVERYTHING is important!

View Slide


View Slide

Guiding principles!

View Slide

Use a CSS preprocessor.
209
Saw that coming, didn’t you?

View Slide

Sass / LESS / Stylus
210
Saw that coming, didn’t you?

View Slide

Quick check!
211

View Slide

Sass ⟳ CSS
212

View Slide

Getting started with Sass
213

View Slide

Install it.
214

View Slide

$ gem update --system
$ gem install sass
$ sudo gem update --system
$ sudo gem install sass
Yay! Sass installed!

View Slide

COMPASS
216
Install Compass, too
http://compass-style.org/install/

View Slide

$ gem update --system
$ gem install compass
$ sudo gem update --system
$ sudo gem install compass
Setting up tools. In this case, Compass.

View Slide

See also: Bourbon
218
Bourbon is another example of extending Sass
http://bourbon.io/

View Slide

CSS 㱺 Sass
219

View Slide

Let us count the (3) ways.
220
How we get started with Sass in an existing project.

View Slide

Move and rename ﬁles.
221

View Slide

$ mkdir scss
$ mv css/styles.css scss/styles.scss

View Slide

Use sass-convert
223

View Slide

$ sass-convert --help
Usage: sass-convert [options] [INPUT] [OUTPUT]
$
$ cd theme-dir
$ sass-convert --recursive --from=css --to=scss css scss

View Slide

Use http://css2sass.heroku.com
225

View Slide


View Slide

$variables
227
Quick! Sass in 5 slides!

View Slide

$variable: value;
Before variables...

View Slide

dev[405]% grep background-color *
style.css: background-color: #edf5fa;
style.css: background-color: #ddecf5;
style.css: background-color: #e6f1f7;
style.css: background-color: #d4e7f3;
style.css: background-color: #edf5fa;
style.css: background-color: #fcfce8;
style.css: background-color: #fcf9e5;
style.css: background-color: #fbf5cf;
style.css: background-color: #fefefe;
style.css: background-color: #f5f5f5;
style.css: background-color: #fdf5e6;
style.css: background-color: #fdf2de;
style.css: background-color: #fbe4e4;
style.css: background-color: #fbdbdb;
style.css: background-color: #ffcccc;
style.css: background-color: #ffffdd;
style.css: background-color: #ddffdd;
Before variables...

View Slide

$color-main: rgb(255,251,114);
$color-second: rgb(70,87,204);
$color-hilite: rgb(189,177,255);
...
.button {
background-color: $color-main;
...
}
See? Easy!

View Slide

$font-times: Cambria, "Hoefler Text", Utopia, "Liberation Serif",
"Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
$font-garamond: "Palatino Linotype", Palatino, Palladio, "URW
Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style",
"Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple
Garamond", "ITC Garamond Narrow", "New Century Schoolbook",
"Century Schoolbook", "Century Schoolbook L", Georgia, serif;
Uses of variables: fonts
http://css-tricks.com/snippets/css/font-stacks/

View Slide

$color-main: #ff0000;
$border-main: 2px solid $color-main;
.multivalue-example {
border-top: $border-main;
}
# compiles to
.multivalue-example {
border-top: 2px solid red;
}
See? Easy!

View Slide

Variable name best practice.
233

View Slide

$ourBlue : #1f4363;
$ourBlueLight : #355673;
$ourBlueLighter : #6c869d;
$ourBlueDark : #0e2c47;
$ourBlueDarker : #212939;
$ourBlueHover : #7e99b3;
...
$color_border $ourBlue;
$color_link: $ourBlue;
$table_header: $ourBlueLighter;
Use descriptive AND functional variable names
http://sachagreif.com/sass-color-variables

View Slide

Nested syntax
235

View Slide

.navigation {
a {
display: block;
padding: .5em;
color: $color-link;
border: none;
}
b {
font-size: .9em;
}
span {
display: block;
font-size: .8em;
}
}
.navigation a {
display: block;
padding: .5em;
color: #444040;
border: none;
}
.navigation b {
font-size: .9em;
}
.navigation span {
display: block;
font-size: .8em;
}
Sass syntax, talking nesting

View Slide

.navigation {
a {
display: block;
padding: .5em;
&:hover {
color: $color-link;
border: none;
}
}
&>.first {
padding-left: 0;
}
}
Sass syntax, talking nesting

View Slide

@extend
238

View Slide

Sass syntax, talking @extend
.box {
padding: 2em;
color: $color-text;
background-color: $color-bg;
}
.box-warning {
@extend .box;
border: 2px dotted $color-yikes;
}
.box-success {
@extend .box;
border: 2px dotted $color-success;
}
.box-info {
@extend .box;
border: 2px dotted $color-info;
}

View Slide

.box, .box-warning, .box-success, .box-info {
padding: 2em;
color: #333333;
background-color: white;
}
.box-warning {
border: 2px dotted #cc0000;
}
.box-success{
border: 2px dotted #33cc00;
}
.box-info {
border: 2px dotted #996633;
}

View Slide


...

241

View Slide


...

View Slide

@mixin
@include
243

View Slide

Sass syntax, @mixin
@mixin module($parent-color) {
color: darken($parent-color, 50%);
}
.main_module {
@include module(#ccc);
min-height: 3em;
}
.sidebar_module {
@include module(#444);
min-height: 2em;
}

View Slide

When you can, use a
Compass (or Bourbon) mixin.
245

View Slide

Sass syntax, @mixin
@import "compass/css3/box-sizing";
el {
@include box-sizing(border-box);
}
http://compass-style.org/reference/compass/css3/box_sizing/

View Slide

Sass Overview
http://caniuse.com/

View Slide

@mixin vs @extend
248
Sass Overview

View Slide

You’re awesome.
249

View Slide

_partials.scss
250

View Slide

Sass syntax, @mixin
@import "vars";
@import "mixins";
@import "layouts/*";

View Slide


View Slide

@if/@else
@for
@each
@functions
(return a single value)

View Slide

Media Queries
made EASY
254

View Slide

@mixin bp($point) {
$bp-mobile: "(max-width: 600px)";
$bp-notso: "(max-width: 1250px)";
$bp-fullon: "(max-width: 1600px)";
@if $point == mq-fullon {
@media #{$bp-fullon} { @content; }
}
@else if $point == mq-notso {
@media #{$bp-notso} { @content; }
}
@else if $point == mq-mobile {
@media #{$bp-mobile} { @content; }
}
}

View Slide

h1 {
font-size: 20px;
font-family: $font-main;
@include bp(mq-notso) {
font-size: 30px;
}
@include bp(mq-fullon) {
font-size: 60px;
}
}

View Slide

h1 {
font-size: 20px;
}
@media (max-width: 1250px) {
h1 {
font-size: 30px;
}
}
@media (max-width: 1600px) {
h1 {
font-size: 60px;
}
}

View Slide

http://breakpoint-sass.com/
258

View Slide

More Information.
259
Sass for Designers
Pragmatic Guide To Sass
Sass and Compass in Action

View Slide

sass --watch --line-numbers --style expanded scss:css

View Slide

Guiding principles!

View Slide

262

View Slide

alias sassgo="cd ~/project ;sass --watch \
--line-numbers --style expanded scss:css"

View Slide

function sassgo() {
cd $1;
}

View Slide

#!/usr/bin/env bash
cd ~/project

View Slide


View Slide

Compass has
its conﬁg.rb
268

View Slide


View Slide

compass config config.rb --sass-dir=scss \
--css-dir=css --javascripts-dir=js \
--output-style=expanded
How to create a compass coniﬁg.rb ﬁle

View Slide

$ compass watch

View Slide

GUI
272

View Slide

https://incident57.com/codekit/

View Slide

http://compass.kkbox.com/

View Slide

http://koala-app.com/

View Slide

https://github.com/vladikoff/grunt-devtools

View Slide

1. Watch for ﬁle changes
2. Compile our Sass to CSS
3. Refresh the browser on change
277
What we want grunt to do.

View Slide

npm install grunt-contrib-compass --save-dev
278
Installing the compass compiling node package

View Slide

grunt.initConfig({
compass: {
dist: {
options: {
config: 'config.rb'
}
}
}
});

View Slide

grunt.initConfig({
watch: {
scss: {
files: ['**/*.scss'],
tasks: ['compass']
}
},
compass: {
dev: {
options: {
sassDir: 'scss',
cssDir: 'css',
outputStyle: 'expanded'
}
},
}
});

View Slide

grunt.initConfig({
watch: {
scss: {
tasks: ['compass']
}
},
compass: {
dev: {
options: {
sassDir: 'scss',
cssDir: 'css',
}
},
}
});

View Slide

compass: {
dev: {
options: {
sassDir: 'scss',
cssDir: 'css',
}
},
prod: {
options: {
sassDir: 'scss',
cssDir: 'css',
outputStyle: 'compressed'
}
},
}

View Slide

grunt.loadNpmTasks('grunt-contrib-compass');
...
grunt.registerTask('default', ['compass:dev', ‘watch’]);

View Slide


View Slide

@import "compass/utilities/sprites";
...
$sprites-spacing: 20px;
@import “../img/sprites/*png”;
Creating sprite images with Compass

View Slide

...
$orange-spacing: 20px;
@import “../img/orange/*png”;
Sprite names are dependent on your directory name

View Slide

...
$awesome-spacing: 20px;
@import “../img/awesome/*png”;
Sprite names are dependent on your directory name

View Slide

Using generated sprites
.footer-follow-us{
.twitter { @include awesome-sprite(follow-us-twitter); }
.facebook { @include awesome-sprite(follow-us-fb); }
.google { @include awesome-sprite(follow-us-google); }
.pinterest { @include awesome-sprite(follow-us-pins); }
}
.awesome-sprite,
.footer-follow-us .twitter,
.footer-follow-us .facebook,
.footer-follow-us .google,
.footer-follow-us .pinterest { background: url('../images/awesome-s34fe0604ab.png')
no-repeat; }
.footer-follow-us .twitter { background-position: 0 -96px; }
.footer-follow-us .facebook { background-position: 0 0; }
.footer-follow-us .google { background-position: 0 -32px; }
.footer-follow-us .pinterest { background-position: 0 -64px; }

View Slide

Uh...
291
How do we check these?

View Slide

292

View Slide


View Slide

Source Maps
294

View Slide

c
http://code.tutsplus.com/tutorials/developing-with-sass-and-chrome-devtools--net-32805

View Slide

Generating

View Slide

sass --compass --sourcemap --watch scss:css

View Slide

gem install compass --pre

View Slide

compass: {
dev: {
options: {
sassDir: 'scss',
cssDir: 'css',
outputStyle: 'expanded',
sourcemap: true
}
},
prod: {
options: {
sassDir: 'scss',
cssDir: 'css',
outputStyle: 'compressed'
}
},
}

View Slide

Don’t deploy to production!

View Slide

# apache

Order allow, deny
Deny from all

# nginx
location ~* \.map$ {
! deny all;
}

View Slide

Using

View Slide

This works in > Firefox 29, right click to show CSS

View Slide


View Slide

Don’t nest more than 3 deep
306
http://css-tricks.com/sass-style-guide/

View Slide

Avoid using tag selectors
Use class selectors if you can.
307
https://developers.google.com/speed/docs/best-practices/rendering

View Slide

npm install grunt-devperf --save-dev
308

View Slide

devperf: {
options: {
urls: [
'http://localhost:8000'
]
}
}

View Slide


View Slide

https://github.com/gmetais/grunt-devperf/

View Slide

312

View Slide

Regression testing
313

View Slide

PhantomCSS
Wraith
DiffUX
dpxdt
314

View Slide

Wraith
315

View Slide

gem install wraith
316

View Slide

$ wraith setup
create configs/config.yaml
create javascript/snap.js
phantomcss grunt task

View Slide

#Headless browser option
browser:
webkit: "phantomjs"
# gecko: "slimerjs"
#If you want to have multiple snapping files, set the file name here
snap_file: "js/wraith-snap.js"
# Type the name of the directory that shots will be stored in
directory:
- 'shots'
# Add only 2 domains, key will act as a label
domains:
local: "http://localhost:8000"
stage: "http://fontsmack.fallgears.com"
#Type screen widths below, here are a couple of examples
screen_widths:
- 320
- 768
- 1280
#Type page URL paths below, here are a couple of examples
paths:
home: /
allthethings: /all-the-things.html

View Slide

browser:
webkit: "phantomjs"
# gecko: "slimerjs"
directory:
- 'shots'
domains:
screen_widths:
- 320
- 768
- 1280
paths:
home: /

View Slide

$ wraith capture automate
324

View Slide

325

View Slide

$ ls -l configs/
automate.yaml
config.yaml

View Slide

Creating Folders
Snapping http://localhost:8000/ at width 320
Snapping http://localhost:8000/all-the-things.html at width 320
Snapping http://fontsmack.fallgears.com/ at width 320
Snapping http://fontsmack.fallgears.com/all-the-things.html at width 320

View Slide


View Slide

PhantomCSS
329

View Slide

npm install grunt-phantomcss --save-dev
install details at
https://www.npmjs.org/package/grunt-phantomcss
330

View Slide

phantomcss: {
desktop: {
options: {
screenshots: 'test/visual/desktop/',
results: 'results/visual/desktop',
viewportSize: [1024, 768]
},
src: [
'test/visual/**.js'
]
},
mobile: {
options: {
screenshots: 'test/visual/mobile/',
results: 'results/visual/mobile',
viewportSize: [320, 480]
},
src: [
'test/visual/**.js'
]
}
}

View Slide

casper.start('http://localhost:8000/')
.then(function() {
phantomcss.screenshot('#region-branding', 'region-branding');
}).
then(function now_check_the_screenshots(){
phantomCSS.compareAll();
});
phantomcss website ﬂow

View Slide

Seeing failures
333
http://tldr.huddle.com/blog/css-testing/

View Slide

Style Guides
334

View Slide

http://patternlab.io
335

View Slide

npm install grunt-contrib-copy --save-dev
npm install grunt-shell --save-dev
336

View Slide

watch: {
...
html: {
files: ['patternlab/source/_patterns/**/*.mustache',
'patternlab/source/**/*.json'],
tasks: ['shell:patternlab'],
options: {
spawn: false
}
}
}
...
copy: {
styleguide: {
files: [{
src: ['css/main.css'],
dest: 'patternlab/public/css/style.css',
filter: 'isFile'}]
}
}
}

View Slide

grunt.registerTask('default', ['compass:dev', 'copy:sg', 'watch']);

View Slide


View Slide

https://github.com/midnightspecial/patternlab-node
340

View Slide

Phew!
341

View Slide

Update the designs
Make it faster

View Slide

From the beginning!
343

View Slide

Faster HTML
344

View Slide

http://docs.emmet.io/
345

View Slide

div#banner>div.logo+ul#navigation>li*4>a
346

View Slide


347

View Slide

http://shortcutfoo.com/

View Slide

Faster Setup
349

View Slide

http://yeoman.io
Yeoman

View Slide

yo
351

View Slide

npm install -g yo
352
Installing yeoman globally

View Slide

# use a generator
$ yo webapp
# start the server
$ grunt server
# run tests
$ grunt test
# run default
$ grunt

View Slide

# download new generator
$ npm install generator-gruntplugin
# run the generator
$ yo gruntplugin

View Slide

$ npm install generator-gruntfile
# run the generator
$ yo gruntfile

View Slide

Lots of generators available
http://yeoman.io/ofﬁcial-generators.html

View Slide

$ npm install generator-generator
# create the directory
$ mkdir generator-bigred && cd $_
# run the generator
$ yo generator

View Slide

http://yeoman.io/generators.html#writing-your-ﬁrst-generator
358
http://ki.tt/yog

View Slide

Wow, that was fast.
359

View Slide

I skipped over
Bundler
Managing what ruby gems you have installed
http://bundler.io/
Vagrant
Setting up development instances for consistency
http://www.vagrantup.com/
Creating your own Grunt tasks
http://gruntjs.com/creating-tasks
Bower
Managing project dependencies
http://bower.io/
360

View Slide

Questions?
361

View Slide

My Notes!
http://ki.tt/sotr
Your Notes!
362

View Slide

Automate ALL THE FRONT-END THINGS

Automate ALL THE FRONT-END THINGS

Kitt Hodsden

More Decks by Kitt Hodsden

Other Decks in Programming

Featured

Transcript