Front end anno 2014
-
Upload
david-paulsson -
Category
Technology
-
view
656 -
download
1
description
Transcript of Front end anno 2014
Front end anno 2014
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