att göra stilmallar smarta

SMARTA STILMALLARFrontendarens förlängda arm (och nördiga utlopp)

SMARTA STILMALLAR GER BRA DESIGN

TESER OM BRA DESIGN:

1. BRA DESIGN ÄR KONSEKVENT

Att följa en stilguide – det kan väl alla?

2. BRA DESIGN ÄR TILLGÄNGLIG

Färgkontrast – för fejjan i solen är ett måste

3. BRA DESIGN ÄR SNYGGA FÄRGER

Vi vet alla att magenta är den heliga gralen

4. BRA DESIGN ÄR MATEMATIK

Utan exponenter och annat mys fäller vi alla en tår

ALLTSÅ:HUR SVÅRT KAN

BRA DESIGN VARA?

JÄTTESVÅRT

LÖSNINGEN HETER

LÖSNINGEN HETER

SassScript

”SassScript is code that’s embedded in Sass documents to allow for property values to be computed from variables.”

–Sass-dokumentationen !!!

”SassScript, a simple scripting language used in Sass files”

–Wikipedia

HUR KAN STILMALLAR BLI SMARTA?

TRE TIPS FRÅN MINA BYGGEN

och något lite nördigt

1. Konsekventa färger

2. Tillgängliga färger

3. Svårtolkade färger

VEM ÄR JAG?

• Pelle Wessman, @voxpelli

• Full-stack webbkodare sedan +7 år

• Valtech Malmö

1. KONSEKVENTA FÄRGER

Smarta stilmallar som ger konsekventa knappar

HÄRRÖRA FÄRGER

• Att utgå från enbart en färg:

@include button-color($baseColor);

• Snarare än att definiera dem alla:

@include button-color($top, $bottom, $border, $font);

mixin

HSV TILL HSL• HSV = HSB = Hue,

Saturation, Value/Brightness

• Används av Photoshop • Kan beroende på design

vara nyckeln till variationer inom ett designelement

ch_hsv_to_color()Matematisk – ladda ner bibliotek eller googla formel

RESULTAT

@include button-color(#9fcb56);

@include button-color(#c6c250);

@include button-color(#9fcb56);

2. TILLGÄNGLIGA FÄRGER

Smarta stilmallar som ger läsliga knappar

MÄTA KONTRAST

• Matematiskt • Lea Verou: http://

leaverou.github.io/contrast-ratio/

• WCAG 2.0 riktlinjer

KONTRASTVARNING

Ingen varning:@include button-color—contrast-alert(#9fcb56);

Varning:@include button-color—contrast-alert(#000);

VÄLJ BÄST KONTRAST

@include button-color—contrast(#9fcb56);

@include button-color—contrast(#666);

3. SVÅRTOLKADE FÄRGER

Vilken nivå på transparens?

Vilken färg?

Bild: Pen Waggener, https://flic.kr/p/6FiXXp

KLURA UT TRANSPARENS

1. Plocka ut färger ur bilden

2. Räkna ut blandningen som krävs för resultatet

3. Få transparensen som resultat

$alpha: ch_calculate_alpha(#FFF, #526D4E, #DFE4DF);

KLURA UT FÄRG1. Använd den uträknade transparensen

2. Plocka ut nya färger ur bilden

3. Räkna ut nya blandningen som krävs för resultatet

4. Få färgen som resultat

$color: ch_calculate_top_color($alpha, #BEDBA1, #89D338);

background: rgba(255, 255, 255, 0.816)

background: rgba(125, 209, 32, 0.816)

Bild: Pen Waggener, https://flic.kr/p/6FiXXp

SassScripts BEGRÄNSNINGAR

• Enkelt standardbibliotek – innehåller bara det absolut mest basala

• Avancerade matematiska funktioner saknas

PROBLEM = MÖJLIGHETER

APPROXIMATIVA DECIMALEXPONENTIALER

en stillektion i matematik på tunn is

x2.4 = ?

x2.4 = x12 / 5Största gemensamma delare

http://rosettacode.org/wiki/Greatest_common_divisor

x1 / 5 =5√x

x12 / 5 =(x12)1 / 5

x12 / 5 =5√(x12)

x12 / 5 =5√(x12)Principalgrenen av n:te roten (isen börjar bli tunn nu)

http://rosettacode.org/wiki/Nth_root

x2.4 =5√(x12)

LÖSNING AV APPROXIMATIVA DECIMALEXPONENTIALER

• Algoritm, största gemensamma delare

• for-loop

• Algoritm, principalgrenen av n:te roten

…eller så laddar man hem ett bibliotek

VARFÖR INTE RUBY?

• Slipper externa beroenden

• Valfrihet av kompilator (ex. libsass)

GÖR STILMALLAR SMARTA

Stilmallarna ska hjälpa dig jobba och tänka Hindra dig från misstag och lyfta dig till nya höjder

bower install sass-color-helpers —save !

https://github.com/voxpelli/sass-color-helpers

TACK!Presentatör: Pelle Wessman

På sociala webben: @voxpelli

På indiewebben: voxpelli.com

På jorden: Malmö Disclaimer: Designtipsen i denna presentationen är till för att visa på en poäng och bör ej tas på alltför stort allvar :)