Front end anno 2014

50 %
50 %
Information about Front end anno 2014
Technology

Published on March 7, 2014

Author: davidpaulsson

Source: slideshare.net

Description

Min presentation from #GeekMeetVST 070314.

(En del slides har blivit lite konstiga i konverteringen från Keynote till .PDF, och tyvärr så kom inte de slides med videos med heller.)

Front end anno 2014

@davidpaulsson david@davidpaulsson.se davidpaulsson.se

The meat & potatoes • HTML • CSS • JS

The meat & potatoes • HTML • HAML • CSS • LESS/SASS • JS • CoffeeScript

The meat & potatoes • HTML • Emmet • CSS • LESS/SASS • JS • Yeoman

The meat & potatoes • HTML • Emmet • CSS • LESS/SASS • JS • 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, sansserif; $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, sansserif; 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; } nav ul { margin: 0; padding: 0; list-style: none; } ! ! li { display: inline-block; ! ! a{ display: block; padding: 6px 12px; text-decoration: 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%; } .container { width: 100%; } ! ! article[role="main"] { float: left; width: 600px / 960px * 100%; } article[role="main"] { float: left; width: 62.5%; } ! ! aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; } aside[role="complimentary"] { float: right; width: 31.25%; }

CSS preprocessors • LESS (js) • Switch (python) • SASS (ruby) • Cacheer (php) • Turbine (php) • Stylus (js/nodejs)

CSS preprocessors • LESS (js) • Switch (python) • SASS (ruby) • Cacheer (php) • Turbine (php) • Stylus (js/nodejs)

LESSHat

Bootstrap

Compass

Susy

Bourbon

Bourbon NEAT

Singularity

Inuit.css

Foundation

GUI style.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)

libsass C/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 much tool wow very demo

Add a comment

Related presentations

Related pages

Download front-end | Shareware.de

Download von Front-end auf Shareware.de. Discstarter CD-ROM-Menüsystem Erstellung professioneller CD-Menüs auf HTML-Basis. Jetzt kostenlos herunterladen!
Read more

Alex Enea

Anno: 2014. Please do not ... and front-end development. Say hello to my digital world, Client:Flli, Vivan Web: www.vivan.it Anno: 2012. Client:Maglificio ...
Read more

Anno 2070 Intro and Main Menu - YouTube

Going through Anno 2070 initial load and front end UI. Exploring all the front end menus
Read more

Ali Younas | LinkedIn

Ali Younas. Front-End Developer Expert in HTML5 CSS3 Bootstrap w3 Standards And Validation. Localit ... marzo 2014 – Presente (1 anno 11 mesi)
Read more

Domenico Falco | LinkedIn

Domenico Falco. Frontend / Mobile Developer presso zeros+ones GmbH. Località München, Bayern, Germany Settore Internet
Read more

Onleihe Essen. Kochen Backen Angebot

Im Bestand seit:14.11.2014 . Details zum Titel: American ... französische Hausmannskost von anno dazumal . Autor: Gasser, Manuel . Illustrator: Edelmann ...
Read more

onlinebibliothek sachsen-anhalt. Zuletzt zurückgegeben

2014 . Verlag: Bastei Lübbe . Geeignet für: ... ein historischer Roman über den Verbleib des Templerschatzes anno domini 1307 . Autor: Hinse, Ulrich Jahr:
Read more

Jon Duckett - Javascript & JQuery, [Pdf Ptt - Eng ...

Titolo: Javascript & JQuery : Interactive Front-End Web Development Anno: 2014 Lingua: Inglese Genere: Informatica - Web Development Pagine: 645
Read more

Download lame | Shareware.de

Download von Lame auf Shareware.de. Isg WaveSqueezer Ein Front-End für viele WAV-MP3-Konverter, vorkonfiguriert für. Jetzt kostenlos herunterladen!
Read more

Rodrigo Marchena Meira | LinkedIn

Rodrigo Marchena Meira. Front-End Engineer at Universidade Federal de Minas Gerais. Location Belo Horizonte, Minas Gerais, Brazil Industry Internet
Read more