Front end anno 2014

@davidpaulsson

david@davidpaulsson.se

davidpaulsson.se

The meat & potatoes

• HTML

• CSS

• JS

The meat & potatoes

• HTML

• CSS

• JS

• HAML

• LESS/SASS

• CoffeeScript

The meat & potatoes

• HTML

• CSS

• JS

• Emmet

• LESS/SASS

• Yeoman

The meat & potatoes

• HTML

• CSS

• JS

• Emmet

• LESS/SASS

• Yeoman

• Vi bygger något!

“Frontend development these days has a lot of fancy tools

available to complicate things.”@mikaellundin

sass compass less stylus markdown haml jade susy coffeescript jquery yeoman ant make rake cake

bash jshint jslint codekit livereload grunt web-build handlebars mustache emmet selenium bower browserstack mogotest require

sprockets jquery mobile sencha ui sproutcore selenium bootstrap qunit yo jasmine jstestdriver phantomjs bourbon neat singularity och så vidare…

Skriv kod, snabbt

emmet.io

Samma syntax för HTML som CSS

DEMO

CSS preprocessors

Variabler

$font-stack: Helvetica, sans-serif; $primary-color: #333; !body { font: 100% $font-stack; color: $primary-color; }

$font-stack: serif; $primary-color: #333; !body { font: 100% $font-stack; color: $primary-color; }

body { font: 100% Helvetica, sans-serif; color: #333; }

Nesting

nav { ul { margin: 0; padding: 0; list-style: none; } ! li { display: inline-block; } ! a { display: block; padding: 6px 12px; text-decoration: none; } }

nav { ul { margin: 0; padding: 0; list-style: none; } ! li { display: inline-block; ! a { display: block; padding: 6px 12px; text-decoration: none; } }

nav ul { margin: 0; padding: 0; list-style: none; } !nav li { display: inline-block; } !nav a { display: block; padding: 6px 12px; text-decoration: none; }

nav { ul { li { a { span { &:last-item { strong { margin: 0; } } } } } } }

nav ul li a span:last-item strong { margin: 0; }

nav { ul { li { a { span { &:last-item { strong { margin: 0; } } } } } } }

nav ul li a span:last-item strong { margin: 0; }

Mixins

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } !.box { @include border-radius(10px); }

@mixin border-radius($radius) { } !.box { }

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }

Extends

.message { border: 1px solid #ccc; padding: 10px; color: #333; } !.success { @extend .message; border-color: green; } !.error { @extend .message; border-color: red; } !.warning { @extend .message; border-color: yellow; }

.message { border: 1px solid #ccc; padding: 10px; color: #333; } !.success { @extend .message; border-color: green; } !.error { @extend .message; border-color: red; } !.warning { @extend .message; border-color: yellow; }

.message,

.success,

.error,

.warning { border: 1px solid #cccccc; padding: 10px; color: #333; } !.success { border-color: green; } !.error { border-color: red; } !.warning { border-color: yellow; }

Operators

.container { width: 100%; } !article[role="main"] { float: left; width: 600px / 960px * 100%; } !aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }

.container { width: 100%;} !article[role="main"] { float: left; width: 600px / 960px * 100%; } !aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }

.container { width: 100%; } !article[role="main"] { float: left; width: 62.5%; } !aside[role="complimentary"] { float: right; width: 31.25%; }

CSS preprocessors• LESS (js)

• SASS (ruby)

• Turbine (php)

• Switch (python)

• Cacheer (php)

• Stylus (js/nodejs)

CSS preprocessors• LESS (js)

• SASS (ruby)

• Turbine (php)

• Switch (python)

• Cacheer (php)

• Stylus (js/nodejs)

LESSHat

Bootstrap

Compass

Susy

Bourbon

Bourbon NEAT

Singularity

Inuit.css

Foundation

GUIstyle.scss → style.css style.less → style.css

command-line interface (CLI)

node.js

npm

$ brew install node(Widows: http://nodejs.org/)

$ npm install -g less

$ lessc style.less

(sass kräver ruby)

libsassC/C++ port av Sass

$ gem install sass

$ sass style.scss

Addy Osmani Sindre Sorhus

Brian Ford Eric Bidelman

Paul Irish Mickael Daniel Pascal Hartig

Stephen Swchuk Frederick Ros

$ npm install -g yo

yo (the scaffolding tool)

bower (for package management)

grunt (the build tool)

$ yo

$ bower install

$ bower install jquery

$ bower list

$ grunt

$ grunt sass

$ grunt compass

$ grunt less

$ grunt jshint

$ grunt uglify

$ grunt imagemin

$ grunt modernizr

such code

very demo

much tool

wow