Smarta stilmallar

Vore det inte underbart om stilmallar höll koll på att en design implementeras konsekvent? Att de höll koll så att inga snedtramp vad gäller tillgänglighet sker? Att de ger en hjälpande hand när utvecklaren undrar hur en design ska tolkas?

Med SassScript blir smarta stilmallar möjligt.

Transcript

1. SMARTA STILMALLAR Frontendarens förlängda arm (och nördiga utlopp)
2. SMARTA STILMALLAR GER BRA DESIGN
3. TESER OM BRA DESIGN:
4. 1. BRA DESIGN ÄR KONSEKVENT Att följa en stilguide – det kan väl alla?
5. 2. BRA DESIGN ÄR TILLGÄNGLIG Färgkontrast – för fejjan i solen är ett måste
6. 3. BRA DESIGN ÄR
 SNYGGA FÄRGER Vi vet alla att magenta är den heliga gralen
7. 4. BRA DESIGN ÄR
 MATEMATIK Utan exponenter och annat mys fäller vi alla en tår
8. ALLTSÅ:
 HUR SVÅRT KAN
 BRA DESIGN VARA?
9. JÄTTESVÅRT
10. LÖSNINGEN HETER
11. LÖSNINGEN HETER SassScript
12. ”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
13. HUR KAN STILMALLAR BLI SMARTA?
14. TRE TIPS FRÅN MINA BYGGEN och något lite nördigt
15. 1. Konsekventa färger 2. Tillgängliga färger 3. Svårtolkade färger
16. VEM ÄR JAG? • Pelle Wessman, @voxpelli • Full-stack webbkodare sedan +7 år • Valtech Malmö
17. 1. KONSEKVENTA FÄRGER Smarta stilmallar som ger konsekventa knappar
18. 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
19. HSV TILL HSL • HSV = HSB = Hue, Saturation, Value/ Brightness • Används av Photoshop • Kan beroende på design vara nyckeln till variationer inom ett designelement
22. ch_hsv_to_color() Matematisk – ladda ner bibliotek eller googla formel
23. RESULTAT @include button-color(#9fcb56); @include button-color(#c6c250); @include button-color(#9fcb56);
25. 2. TILLGÄNGLIGA FÄRGER Smarta stilmallar som ger läsliga knappar
26. MÄTA KONTRAST • Matematiskt • Lea Verou: http:// leaverou.github.io/ contrast-ratio/ • WCAG 2.0 riktlinjer
27. KONTRASTVARNING
30. Ingen varning:
 @include button-color—contrast-alert(#9fcb56);
 Varning:
 @include button-color—contrast-alert(#000);
31. VÄLJ BÄST KONTRAST
32. @include button-color—contrast(#9fcb56); @include button-color—contrast(#666);
34. 3. SVÅRTOLKADE FÄRGER
35. Vilken nivå på transparens? Vilken färg? Bild: Pen Waggener, https://flic.kr/p/6FiXXp
36. 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
37. $alpha: ch_calculate_alpha(#FFF, #526D4E, #DFE4DF);
38. KLURA UT FÄRG 1. 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
39. $color: ch_calculate_top_color($alpha, #BEDBA1, #89D338);
40. background: rgba(255, 255, 255, 0.816) background: rgba(125, 209, 32, 0.816)
41. Bild: Pen Waggener, https://flic.kr/p/6FiXXp
42. SassScripts BEGRÄNSNINGAR
43. • Enkelt standardbibliotek – innehåller bara det absolut mest basala • Avancerade matematiska funktioner saknas
44. PROBLEM = MÖJLIGHETER
45. APPROXIMATIVA DECIMALEXPONENTIALER en stillektion i matematik på tunn is
46. x2.4 = ?
47. x2.4 = x12 / 5 Största gemensamma delare http://rosettacode.org/wiki/Greatest_common_divisor
48. x1 / 5 =5√x
49. x12 / 5 =(x12)1 / 5
50. x12 / 5 =5√(x12)
51. x12 / 5 =5√(x12) Principalgrenen av n:te roten (isen börjar bli tunn nu) http://rosettacode.org/wiki/Nth_root
52. x2.4 =5√(x12)
53. LÖSNING AV APPROXIMATIVA DECIMALEXPONENTIALER • Algoritm, största gemensamma delare • for-loop • Algoritm, principalgrenen av n:te roten
54. …eller så laddar man hem ett bibliotek
55. VARFÖR INTE RUBY? • Slipper externa beroenden • Valfrihet av kompilator (ex. libsass)
56. 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
57. bower install sass-color-helpers —save ! https://github.com/voxpelli/sass-color-helpers
58. 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 :)