Delightful Stylesheets

This is a talk by Aly Fluckey, a UX Developer with Table XI, on how to better organize and structure your stylesheets so that they are more delightful to work with. Given at Windy City Rails 2017

Transcript

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