Delightful Stylesheets - That Conference

Transcript

3. DELIGHTFUL STYLESHEETS
4. ''CSS IS HARD'' - ME, MANY TIMES - ALSO, THE INTERNET
7. CSS IS HARD BUT IT DOESN'T HAVE TO BE
8. THE CASCADE (IT'S A FEATURE, NOT A )
9. THE CASCADE 1. SOURCE ORDER 2. SPECIFICITY 3. IMPORTANCE
10. 1. SOURCE ORDER p { color: blue; } p { color: red; }
11. 2. SPECIFICITY
12. 2. SPECIFICITY p.paragraph { color: blue; } p { color: red; }
13. 3. IMPORTANCE p { color: purple !important; }
14. !IMPORTANT
15. CSS IS HARD WHEN YOU IGNORE THE CASCADE
16. SO WHAT NOW? WHAT CAN WE DO TO SAVE US FROM OURSELVES?
17. ORGANIZATION & COMPONENTIZATION
18. ORGANIZATION WITH ITCSS BY HARRY ROBERTS
19. INVERTED TRIANGLE CSS
20. PHILOSOPHY NOT A FRAMEWORK
23. VARIABLES CONTAIN FONTS, COLORS, MEASUREMENTS, ETC
24. TOOLS GLOBALLY USED MIXINS AND FUNCTIONS
25. GENERAL RESET AND/OR NORMALIZE STYLES, BOX-SIZING DEFINITION
26. BASE ELEMENTS STYLING FOR HTML ELEMENTS h1, a, p, input
27. COMPONENTS SPECIFIC COMPONENTS UNIQUE TO THE DESIGN .panel, .form
28. UTILITIES UTILITIES AND HELPER CLASSES WITH ABILITY TO OVERRIDE .is--hidden
30. WHAT DOES THIS BUY US?
31. REUSABE & SCALABLE
32. REDUCE SPECIFICITY
33. LESS WASTE, SMALLER FILES
34. MORE DELIGHTFUL
35. ORGANIZATION & COMPONENTIZATION
36. DISCRETE SELF-CONTAINED REUSABLE
38. SET UP BASE STYLES FIRST > fonts > colors > sizing & measurements > layout
43. 1. text components > section header > title & subtitle 2. entry components > entry > image > content > featured entry
46. Next is the entry components
50. ALMOST DONE! > Featured entry styling > Responsiveness
53. ORGANIZATION & COMPONENTIZATION
58. THANK YOU!
59. ALY FLUCKEY @WTFLUCKEY