Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Crafting Scalable Stylesheets

Mike Fowler
September 22, 2012

Crafting Scalable Stylesheets

A discussion of some ways we can use Sass and Compass to help us create scalable and maintainable stylesheets.

A PDF with slide notes can be found here: http://bit.ly/NJps8S

Mike Fowler

September 22, 2012
Tweet

Other Decks in Programming

Transcript

  1. CRAFTING SCALABLE STYLESHEETS Mike Fowler @michaelrfowler VT CodeCamp 2012

  2. None
  3. www.sass-lang.org

  4. www.compass-style.com

  5. WE WANT MAINTAINABILITY AND SCALABILITY

  6. WE WANT NEED MAINTAINABILITY AND SCALABILITY

  7. CSS IS A PUSHOVER

  8. FILE STRUCTURE •Logical grouping •Modular architecture •Inline documentation

  9. SEMANTICS

  10. SEMANTICS CONTENT-DEPENDENT CONTENT-INDEPENDENT

  11. None
  12. None
  13. OBJECT-ORIENTED CSS

  14. None
  15. None
  16. None
  17. None
  18. None
  19. @EXTEND FOR GREAT GOOD

  20. None
  21. None
  22. None
  23. None
  24. None
  25. CENTRALIZE YOUR APPLICATION SETTINGS

  26. None
  27. VARIABLES SIMPLIFY COMMON STYLESHEET UPDATES

  28. None
  29. None
  30. None
  31. VARIABLE SEMANTICS

  32. “SMART” VARIABLES

  33. None
  34. None
  35. None
  36. • Frequently changed • Time-consuming to maintain • -webkit-f*#k: this;

    BROWSER PREFIXES
  37. None
  38. None
  39. READABLE MEDIA QUERIES

  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. MIXINS HELP TO CONTEXTUALIZE COMPLEX CODE

  47. None
  48. None
  49. MEET http://susy.oddbird.net/

  50. MEET http://susy.oddbird.net/

  51. None
  52. None
  53. STYLE GUIDES

  54. https://github.com/styleguide/css/1.0

  55. https://github.com/styleguide/css/1.0

  56. http://warpspire.com/kss/

  57. http://jacobrask.github.com/styledocco/

  58. KEEP DOCUMENTATION USEFUL AND UPDATED

  59. GET STARTED NOW

  60. http://livereload.com/

  61. http://incident57.com/codekit/

  62. http://mhs.github.com/scout-app/

  63. PREPROCESSORS ENCOURAGE RETHINKING

  64. RETHINKING ENCOURAGES NEW TECHNIQUES

  65. NEW TECHNIQUES PROGRESS OUR CRAFT

  66. THANK YOU Tweet: @michaelrfowler Blog: mikefowler.me Mail: mike@mikefowler.me https://speakerdeck.com/u/mikefowler/