Att göra stilmallar smarta
-
Upload
valtech-ab -
Category
Technology
-
view
1.339 -
download
2
description
Transcript of 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 :)