Camp Sass Notes

— 3 minute read

Twitter Tweet

Camp Sass was a blast! Thank you to everyone that made it happen! Here are my notes:

Micah Godbolt – Visual Regression Testing permalink

So, what is visual regression testing? It’s pixel by pixel comparison (orig, new, diff).

Variations of visual diffing: permalink

  • page based vs component
  • comp vs baseline
  • headless browser vs desktop browser
  • GUI vs command line
  • extras – css unit testing, scripting libraries

Screenshot Comparison Tools: permalink

1. Wraith

  • Page based
  • comp or baseline
  • headless browser
  • command line

2. PhantomCSS

  • comp based diffing
  • baseline
  • headless
  • command line
  • exras – scripting lib

Bermon Painter – Modular Sass permalink

How do you create scalable websites? Break things down to components!

3 methodologies – oocss, smacss, bem permalink

1. OOCSS – a.k.a. Object Oriented CSS Two main principals, separate:

  • structure from skin
  • container from content

2. SMACSS (scalable and modular architecture for css)

  • base (reset, default typography)
  • layout (headers footers)
  • modules ()
  • states (.is-active)
  • themes ()

3. BEM (block, element, modifier)

  1. SMABEMOOCSS? JK!

Twitter Tweet

Una Kravets – Open Source Design permalink

Innovation/Revolution comes about in tech in (usually) one of three ways:

  1. government funding

  2. big business

3. open source

GOALS: permalink

  1. encourage a more open design/dev workflow

    • positive reinforcement #littlewins
  2. foster design participation in the open source community

CARE Method permalink

[C]ommunication

  • label issues properly (design needed, issue)
  • use a lot of images

[A]ccessibility

  • getting started docs/wikis
  • about doc
  • contrib docs
  • lexicon – terms/def for the docs

[R]espect

  • coordination != collaboration

[E]mpathy

feedback guidelines:

  • ask, don’t tell
  • be specific
  • explain yourself
  • offer solutions

Jina Bolton – Living Design Systems permalink

Style guides are awesome!!!

Some things to keep in mind:

  • Use a living style guide because it is maintainable

  • Naming conventions – use clarity > brevity

  • Keep properties organized (doc it, and make sure it is easy to know how to follow)

  • Enables rapid dev and testing

  • Elements, components, layouts (modularize, choose your method or create your own variation)

    • types, states, variations

Conclusion permalink

Camp Sass was awesome! Go next year, you won’t regret it!

Twitter Tweet