smarta stilmallar nya export
DESCRIPTION
Vore det inte underbart om stilmallar höll koll på att en design implementeras konsekvent? Att de höll koll och ser till att inga snedtramp sker vad gäller tillgänglighet? Att de ger en hjälpande hand när utvecklaren undrar hur en design ska tolkas? Med SassScript blir sådana smarta stilmallar möjligt! Pelle Wessman har grottat ned sig i ämnet och besökte Valtech Stockholm för att gå igenom hur SassScript kan bidra till framgången i projekten.TRANSCRIPT
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
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
• Bloglovin
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);
(en Sass 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
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 DECIMALEXPONENTIALERen 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)
MEN TESTER DÅ?
OCH DOKUMENTATION?
SASSDOCJSDoc för Sass
BOOTCAMPAutomatiska tester av SassScript
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 !!
Andra projekt på: http://sache.in/ Bra nyhetsbrev på: http://sassnews.com/
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 :)