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

Delightful Stylesheets - That Conference

Delightful Stylesheets - That Conference

5f0da09fb57b86f885f6869c1c5e155d?s=128

Aly Fluckey

August 06, 2018
Tweet

Transcript

  1. None
  2. None
  3. DELIGHTFUL STYLESHEETS

  4. ''CSS IS HARD'' - ME, MANY TIMES - ALSO, THE

    INTERNET
  5. None
  6. None
  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

  21. None
  22. None
  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

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

  37. None
  38. SET UP BASE STYLES FIRST > fonts > colors >

    sizing & measurements > layout
  39. None
  40. None
  41. None
  42. None
  43. 1. text components > section header > title & subtitle

    2. entry components > entry > image > content > featured entry
  44. None
  45. None
  46. Next is the entry components

  47. None
  48. None
  49. None
  50. ALMOST DONE! > Featured entry styling > Responsiveness

  51. None
  52. None
  53. ORGANIZATION & COMPONENTIZATION

  54. None
  55. None
  56. None
  57. None
  58. THANK YOU!

  59. ALY FLUCKEY @WTFLUCKEY

  60. None