Save 37% off PRO during our Black Friday Sale! »

Delightful Stylesheets

5f0da09fb57b86f885f6869c1c5e155d?s=47 Aly Fluckey
September 15, 2017

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

5f0da09fb57b86f885f6869c1c5e155d?s=128

Aly Fluckey

September 15, 2017
Tweet

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

  17. None
  18. None
  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

  25. None
  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

  33. None
  34. SET UP BASE STYLES FIRST > fonts > colors >

    sizing & measurements > layout
  35. None
  36. None
  37. None
  38. None
  39. 1. text components > section header > title & subtitle

    2. entry components > entry > image > content > featured entry
  40. None
  41. None
  42. Next is the entry components

  43. None
  44. None
  45. None
  46. ALMOST DONE! > Featured entry styling > Responsiveness

  47. None
  48. None
  49. ORGANIZATION & COMPONENTIZATION

  50. None
  51. None
  52. None
  53. None
  54. None
  55. ALY FLUCKEY @WTFLUCKEY