SassConf 2015 Pattern Guide Workshop

• Lesson Plan (PDF)
• GitHub Project
• Slides (PDF)
• Slides with room for notes for printing later(PDF)
• Glossary (Please read below)
• Utility Bank (ZIP)
• Site 1 "Portfolio" (ZIP)
• Site 2 "Store" (ZIP)
• Feedback Form
• Resources
• • Scss-lint
  • Hound
  • Stipe
  • Toadstool
  • Lonely Planet "Rizzo"
  • How to make a ruby gem
  • How to make a compass extension
  • How to make a node module

Glossary

When I say certain things, this is what I mean. The terms for pattern libraries I've seen have been very inconsistent. This is an effort to get everyone on the same page!

• BEM
• SMACSS
• OOCSS
• Idiomatic CSS
• Atomic CSS
• Style guide - often times the "feel" of the brand, how the tone or voice of the product or company is supposed to be represented. May include base styles on how the brand should be represented.
• Pattern guide - the front end to display a group of patterns on how to build a website for a brand or product. Can be interactive. Often includes instructions on how the pattern should be used.
• Component library - More than just CSS and HTML. Can include more sophisticated functions for how objects interact with each other.
• Pattern library - The code of pattern and a structured heirarchy/file solution and a way to contribute to the code base.

Disclaimer: I sometimes say pattern guide/style guide/pattern library interchangably. I'm sorry!