CSS & SCSS

med Patrick Monslaup

Agenda

CSS 101
Bruk av Sass
Workflow automation tools

CSS 101

Html: innhold

Css: styling

.ball {
    background: blue;
    border-radius: 50%;
    width: 50px;
    height: 50px;    
}

<h2>Har du sett mine blå ball?</h2>
<div class="ball">ball</div>

Javascript?Logikk

Navngiving

// vanlig knapp
<button class="button">
    Button
</button>

// hul knapp
<button class="button button--hollow">
    Button
</button>

// hul knapp som tar full bredde
<button class="button button--hollow button--full-width">
    Button
</button>

// vanlig knapp som tar full bredde
<button class="button button--full-width">
    Button
</button>

Knapper fra De Historiske sin styleguide

BEM

Block, Element, Modifier

// vanlig knapp
<button class="button">
    Button
</button>

// hul knapp
<button class="button button--hollow">
    Button
</button>

// hul knapp som tar full bredde
<button class="button button--hollow button--full-width">
    Button
</button>

// vanlig knapp som tar full bredde
<button class="button button--full-width">
    Button
</button>

Modifier: --hollow

Block: .button (classname)

Modifiers: --full-width, --hollow

Modifier: --full-width

HTML / CSS eksempel

Knapper fra De Historiske sin styleguide

En god måte å lære css på er å "inspisere" nettsider for å se styling

Layout

Komponenter sin bredde skal sjeldent kodes i piksler

Vi gjennomgår konkrete eksempler senere med flexbox

header .logo { background-color: #2fda95; }
header .menu .menu-item.active { 
    color: #2fda95;
    border-bottom: 2px solid currentColor; 
}
.banner form { background-color: #2fda95; }

Problem:
CSS medfører duplisering av kode.
som fargen #2fda95

HTML / CSS eksempel

Farger fra tide buss

Vedlikeholdsproblemer

Css prosjekt blir ofte...

Tungt å lese
Uoversiktlig stort
Dyrt å vedlikeholde
Lett å gjøre feil i

Selectorer: class

.ball {
    background: blue;
    border-radius: 50%;
    width: 50px;
    height: 50px;    
}

<h2>Har du sett mine blå ball?</h2>
<div class="ball">ball</div>

`.ball` styler alle elementer med `class="ball"`

Selectorer: element

div {
    background: blue;
    border-radius: 50%;
    width: 50px;
    height: 50px;    
}

<h2>Har du sett mine blå ball?</h2>
<div class="ball">ball</div>

`div` styler alle `<div>` elementer

Å style html elementer direkte er hovedskelig nyttig for å style spesifikke html elementer som <h2> med typografi, siden det skal gjelde overalt.

IKKE gjør det med uspesifikke elementer som div, da får du bugs overalt

Selectorer: id

#id {
    background: blue;
    border-radius: 50%;
    width: 50px;
    height: 50px;    
}

<h2>Har du sett mine blå ball?</h2>
<div id="ball">ball</div>

`#ball` styler elementet med `id="ball"`

Det skal kun være 1 element med en gitt ID for at det er gyldig html

Selectorer: prioritet

Hvilken styling et element får avhenger av "selector strength"

Selektor	Eksempel	Styrke
element	div	1
class	.ball	10
id	#ball	100
important	!important	1000

Ved lik styrke teller det som kommer sist

Best practice: Unngå sterke selektorer om mulig

Selectorer: kombinasjon

Du kan kombinere selektorer, styrke er da additivt

Eksempel	Effekt	Styrke
ul li	Style alle <li> elementer inni en <ul>	2
ul > li	Style alle <li> elementer som har <ul> som forelder	2
button.active	style <button> element med `class="active"`	11

Det finnes mange flere selektorer som f.eks.
første element, annenhvert element osv!

Unngå sterke selektorer

Det er vanskelig å endre styling når alt har høy selektor-styrke.
Hold styrken lav ved å heller følge "BEM" konvensjonen

Time

To

Code

Bruk

av

Sass

Sass? Css?

All gyldig css er gyldig scss

// styles/colors.scss
$tide-green: #2fda95;
$tide-blue: #...;

// components/header.scss
@use '../styles/colors.scss';

header.logo { 
  background-color: colors.$tide-green; 
}
header.menu.menu-item.active { 
  color: colors.$tide-green;
  border-bottom: 2px solid currentColor; 
}

// components/bannerFormBlock.scss
@use '../styles/colors.scss';

.banner form { 
  background: colors.$tide-green; 
}

Men scss lar deg bruke

funksjoner
variabler
imports

Og mye annet som..

arv
nesting
if-setninger
for-loops

Installering av sass

npm install -g sass

Derfra kan du kompilere sass til css ved å skrive..

sass --watch input.scss output.css

Typisk settes scss opp slik at det kompileres til minifisert css med "hacks" for browser compatability

Knapper!

Eksempel fra De Historiske sin styleguide

// vanlig knapp
<button class="button">
    Button
</button>

// hul knapp
<button class="button button--hollow">
    Button
</button>

// hul knapp som tar full bredde
<button class="button button--hollow button--full-width">
    Button
</button>

// vanlig knapp som tar full bredde
<button class="button button--full-width">
    Button
</button>

Hvordan burde en knapp-implementasjon være?

@mixin

Dersom knapper skal ha små avvik lag en funksjon som tar inn parameterene som skal endres

@mixin generateButton ($border-color, $border-hover-color, $background-color, 
                       $background-hover-color, $font-color, $font-hover-color) 
{
	transition: all .2s linear;
	color: $font-color;
	background-color: $background-color;
	border-color: $border-color;
	border-width: 2px;
	border-style: solid;

	&:hover {
		color: $font-hover-color;
		background-color: $background-hover-color;
		border-color: $border-hover-color;
	}
}

@mixin hollowButton ($border-color, $font-hover-color) {

  @include generateButton($border-color, $border-color, transparent, 
                          $border-color, $border-color, $font-hover-color);
}

@mixin solidButton ($background-color, $background-hover-color, 
                    $font-color, $font-hover-color) {

  @include generateButton($background-color, $background-hover-color,$background-color, 
                          $background-hover-color,$font-color, $font-hover-color);
}


// Du bruker mixins slik:
@include hollowButton(/*sett inn parametere her*/);

Typiske mixins

Typografi
Plassering av elementer
Skygge på elementer
Animasjoner
Borders

Time

To

Code

Recap: Sass er..

Css med superkrefter
Lett å bruke
Godt støttet av ulike verktøy
Veldokumentert
Brukt av millioner

Hundrevis av verktøy har gode integrasjoner mot sass!

Workflow Automation

Hva mer trengs?

Dependency handling
Automatisk bygging av prosjektet
Automatisk reload av nettleseren
Ide-integrasjoner
Transformasjon av kode
- minification
- uglyfication
- fjerne kommentarer
Linting

Verktøy som støtter node-sass

Brackets

Brunch

Connect/Express middleware

DocPad

Duo.js

Grunt

Gulp

Harp

Metalsmith

Meteor

Mimosa

med flere..

Time
To
Code

Vi går ikke i mer detaljer rundt oppsett av workflow automation i dag

Generelt er scss nesten alltid satt opp i moderne prosjekt

Det finnes utrolig gode guides og starter-kit på nett som er perfekt for å komme i gang.

Dependency management

https://nodejs.org/en/

Node.js

Installer node.js
Installer pakker/dependencies via node.js

npm install gulp --save
npm install gulp-connect --save
npm install gulp-sass --save

package.json

kommandolinje

"dependencies": {
  "gulp": "^3.9.1",
  "gulp-connect": "^5.0.0",
  "gulp-sass": "^3.1.0"
}

npm install

Andre kan da installere alle dependencies ved å skrive ...

Workflow

automation

bør installeres gjennom node, eller andre pakkesystem

Grunt eller gulp har f.eks. støtte for websockets, sass, og live-reload av nettsider når kode oppdateres.

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Gulp

For å bruke gulp, ..

Importer dependencies du vil bruke
Lag en gulp-task
Kjør gulp tasken

var gulp = require('gulp');
var connect = require('gulp-connect');

// Create a gulp task called connect
//   which when run connects to localhost
//   with live reloading enabled
gulp.task('connect', function(){
  connect.server({
    root: 'public',
    livereload: true 
  });
});

npm install gulp --save
npm install gulp-connect --save
npm install gulp-sass --save

npm install
gulp connect

Time
To
Code

Get Sassy!

By Patrick Lid Monslaup

Get Sassy!

Patrick Lid Monslaup

Technical manager & developer for Knowit Experience Bergen. Looking for a new job? Check out http://knowit.no/karriere

CSS & SCSS

Agenda

CSS 101

Html: innhold

Css: styling

Javascript?Logikk

Navngiving

BEM

HTML / CSS eksempel

Layout

HTML / CSS eksempel

Vedlikeholdsproblemer

Css prosjekt blir ofte...

Selectorer: class

Selectorer: element

Selectorer: id

Selectorer: prioritet

Selectorer: kombinasjon

Unngå sterke selektorer

Time

To

Code

Bruk

av

Sass

Sass? Css?

All gyldig css er gyldig scss

Installering av sass

Knapper!

@mixin

@mixin

Dersom knapper skal ha små avvik lag en funksjon som tar inn parameterene som skal endres

Typiske mixins

Time

To

Code

Recap: Sass er..

Workflow Automation

Hva mer trengs?

Verktøy som støtter node-sass

Time To Code

Dependency management

Node.js

Workflow

automation

gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Gulp

Gulp

Time To Code

Get Sassy!

More from Patrick Lid Monslaup

Time
To
Code

Time
To
Code