Delightful Stylesheets - That Conference

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