Camp Sass Notes
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:
- 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
- DEMOS – https://github.com/micahgodbolt/visual-regression-demo
- Podcast – https://www.youtube.com/user/sassbites
Bermon Painter – Modular Sass permalink
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)
- SMABEMOOCSS? JK!
Una Kravets – Open Source Design permalink
Innovation/Revolution comes about in tech in (usually) one of three ways:
government funding
big business
3. open source
GOALS:
encourage a more open design/dev workflow
- positive reinforcement #littlewins
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 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
LINKS
- https://github.com/salesforce-ux/theo
- http://sfdc-styleguide.herokuapp.com/
- Responsive design testing (using? not sure what the iframe tool was)
Conclusion permalink
Camp Sass was awesome! Go next year, you won’t regret it!