Tag: campsass

Categories
conference sass

Camp Sass Notes (4/4/2015)

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

Micah Godbolt – Visual Regression Testing

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

Variations of visual diffing:

  • 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:

1. Wraith

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

2. PhantomCSS

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

LINKS

Bermon Painter – Modular Sass

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

3 methodologies – oocss, smacss, bem

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)

4. SMABEMOOCSS? JK! 

Una Kravets – Open Source Design

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

1. government funding

2. big business

3. open source 

GOALS:

  1. encourage a more open design/dev workflow
    • positive reinforcement #littlewins
  2. foster design participation in the open source community

CARE Method

[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

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

LINKS

Conclusion

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