Att Göra Amalfikusten
–Sass-dokumentationen!!! "SassScript, a simple scripting language used in Sass files" –Wikipedia 13. HUR KAN STILMALLAR BLI SMARTA? 14. TRETIPS 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. HSVTILL HSL • HSV = HSB = Hue, Saturation, Value/ Brightness • Används av Photoshop • Kan beroende på design vara nyckeln till variationer inom ett designelement 20. ch_hsv_to_color() Matematisk – ladda ner bibliotek eller googla formel 21. RESULTAT @include button-color(#9fcb56); @include button-color(#c6c250); 22. 2. TILLGÄNGLIGA Smarta stilmallar som ger läsliga knappar 23. MÄTA KONTRAST • Matematiskt • LeaVerou: contrast-ratio/ • WCAG 2.
Att guerra amalfikusten new york
- Att guerra amalfikusten 3
- Svenskar och internet speed test
- Stig Karlsson | Arkiv | Nya Tider
- Att guerra amalfikusten 2016
- Att guerra amalfikusten 2017
Att guerra amalfikusten texas
... Published on May 28, 2014 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. 1. SMARTA STILMALLAR Frontendarens förlängda arm (och nördiga utlopp) 2. 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 DESIGNVARA? 9. JÄTTESVÅRT 10. LÖSNINGEN HETER 11. SassScript 12. "SassScript is code that's embedded in Sass documents to allow for property values to be computed from variables. "
PROBLEM = MÖJLIGHETER 39. APPROXIMATIVA DECIMALEXPONENTIALER en stillektion i matematik på tunn is 40. x2. 4 =? 41. x2. 4 = x12 / 5 Största gemensamma delare 42. x1 / 5 =5√x 43. x12 / 5 =(x12)1 / 5 44. x12 / 5 =5√(x12) 45. Principalgrenen av n:te roten (isen börjar bli tunn nu) 46. x2. 4 =5√(x12) 47. LÖSNING AV APPROXIMATIVA • Algoritm, största gemensamma delare • for-loop • Algoritm, principalgrenen av n:te roten 48. …eller så laddar man hem ett bibliotek 49. VARFÖR INTE RUBY? • Slipper externa beroenden • Valfrihet av kompilator (ex. libsass) 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. bower install sass-color-helpers —save! 52. TACK! Presentatör: Pelle Wessman På sociala webben: @voxpelli På indiewebben: 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:)
0 riktlinjer 24. KONTRASTVARNING 25. Ingen varning: @include button-color—contrast-alert(#9fcb56); Varning: @include button-color—contrast-alert(#000); 26. VÄLJ BÄST KONTRAST 27. @include button-color—contrast(#9fcb56); @include button-color—contrast(#666); 28. 3. SVÅRTOLKADE 29. Vilken nivå på transparens? Vilken färg? Bild: Pen Waggener, fl 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. $alpha: ch_calculate_alpha(#FFF, #526D4E, #DFE4DF); 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. $color: ch_calculate_top_color($alpha, #BEDBA1, #89D338); 34. background: rgba(255, 255, 255, 0. 816) background: rgba(125, 209, 32, 0. 816) 35. 36. SassScripts BEGRÄNSNINGAR 37. • Enkelt standardbibliotek – innehåller bara det absolut mest basala • Avancerade matematiska funktioner saknas 38.