Att göra stilmallar smarta

1,985 views

Published on

Pelle Wessman, Valtech

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. Pelle kommer gå igenom några vis som det kan hjälpa ditt projekt.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,985
On SlideShare
0
From Embeds
0
Number of Embeds
1,616
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Att göra stilmallar smarta

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

×