Frontend processer

Must have

Preprocessor

Der findes et hav af preprocessor, sass, less, stylus.

Sass = Preprocessor

• Sass står for (Syntactically Awesome Style Sheets)
• Sass er en extension som gør det nemmere at arbejde med css

Setuppet

Sass kører som udgangspunkt på ruby

MEN kan også anvendes med:

• libSass — a C/C++ port af Sass engine
• Node-sass — libSass for Node.js
• LibSass Python — libSass for Python

Sass installeres ved at hente ruby

derefter ruby command line

gem install sass

sass --watch input.scss:output.css

Hvordan hjælper Sass ?

• Fordel 1 - Organisering og vedligeholdelse
• Fordel 2 - Variabler
• Fordel 3 - Scripting i css
• Fordel 4 - minificering af css samt samling af regler
• Fordel 5 - Masser af hjælpe utilities

Fordel 1 - Organisering og vedligeholdelse

Gamle måde en css-fil med kommentarer

• Sass gør brug af partials, hvilket betyder at man kan have små css filer (.scss filer) liggende i ens filstruktur
  • screen.scss
    • _variables.scss
    • _base.scss
    • _layout.scss
• Dette gør det nemmere at vedligeholde ens css og minimerer chancen for fejl i css, da man vil få bygge fejl når man compiler sit sass.

Fordel 2 - Variabler

Variabler i sass gør det lettere at sikrer ensartethed i designet

$primary-color: #003366;
$color-secondary: #00497a;
$color-highlight: #ff9600;
$color-muted: #eef;

h1{
	color: $primary-color;
}

Fordel 3 - Scripting i css

Variabler i sass gør det lettere at sikrer ensartethed i designet

@mixin font-size( $value ) {
  font-size: ( $value ) * 1px;
  font-size: ( $value / $base-font-size ) * 1rem;
}

http://sass-lang.com/documentation/Sass/Script/Functions.html

Fordel 4 - minificering af css samt samling af regler

Sass kan minificer css

Sass kan samle css regler ved hjælp af @extend

.button{
	margin: 0; padding: 0 20px; background-color: #003384;
}
.button-alt{
	@extend .button;
	background-color: #000000;
}

genererer flg:
.button, .button-alt{
	margin: 0; padding: 0 20px; background-color: #003384;
}
button-alt{
	background-color: #000000;
}

Fordel 5 - Masser af hjælpe utilities

sass frameworks

• Compass
• Bourbon
• Suzy

http://thesassway.com/

http://sassmeister.com

Style guides

Eksempler på styleguides

Det sværeste i frontend - navngivning

BEM, Smacss, OOCSS, atomic design

Fælles for alle strukturering af html og css

Block, element and modifier https://bem.info/method/

Scalable and Modular architecture for css https://smacss.com/

object oriented css http://oocss.org/

Hvorfor bør de anvendes ?

• De tvinger dig til at genanvende og arve fra hinanden
• Gør din kode mere effektiv (load tid)
• Gør det nemmere at videreudvikle

Eksempel på fejl strukturering

• link
• link2

Eksempel på korrekt strukturering

• link
• link2

Eksempel på nyt nyheds modul med små modifikationer

• link
• link2

Frontend build tools

Grunt, gulp broccoli

Fordel ved build tools ?

• Automatisering af processer
• Minimerer fejl i frontend kode js/html/css
• Effektivicerer loadtid billeder/js

Setup alle tools kører node.js

installer node fra http://nodejs.org/

Grunt vs gulp

• Grunt har et større ecosystem
• Gulp er på mange måder hurtigere
• Konfigurationsmæssig er gulp nemmere
• Men har en mindre plugin base

Hvilke "plugins" bør som minimum anvendes ?

• grunt-contrib-concat - samler filer til en fil
• grunt-contrib-uglify - minificerer og kan checke for fejl i js
• grunt-contrib-imagemin - stripper billeder for extra informatiion
• grunt-contrib-compass eller grunt-contrib-sass - håndterer sass

Der findes lignede plugins til gulp

Grunt installation

• http://gruntjs.com/getting-started
• npm install -g grunt-cli (installeres globalt)
• Grunt køre ud fra en package.json fil som indeholder de plugins du anvender
• Plugins installeres via npm install --save-dev.
• Og så anvender grunt en gruntfile.js som er selve konfigurationsfilen
• Der findes et hav af eksempler på en start gruntfile.js

Gulp installation

• https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
• npm install --global gulp (installeres globalt)
• Gulp køre ligesom grunt ud fra en package.json fil
• Derefter npm install --save-dev gulp bliver skrevet ind i din package.json
• Ligesom grunt anvender gulp en gulpfile.js som er selve konfigurationsfilen
• Der findes et hav af eksempler på hvordan det gøres på https://github.com/gulpjs/gulp/tree/master/docs/recipes

Sourcemaps css på steroids

ret i filer direkte i browseren

se dem blive compilet

Sidste men ikke mindst links

• Googles web starter kit (gulp)
• Pattern lab
• http://csswizardry.com/
• http://nicolasgallagher.com/
• Css guideline/