Kicking things off with @hcatlin doing the introduction! #campsass pic.twitter.com/AIlKWsEDxw
— Camp Sass (@CampSass) April 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
- DEMOS – https://github.com/micahgodbolt/visual-regression-demo
- Podcast – https://www.youtube.com/user/sassbites
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!
This is the framework I’ll be using from here on out. #campsass pic.twitter.com/sN5i2vAd5a — Micah Godbolt (@micahgodbolt) April 4, 2015
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:
- 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
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
Camp Sass was awesome! Go next year, you won’t regret it!
Definitely a highlight! 😉 #CampSass aftermath: @una and @hcatlin are shaking it off. http://t.co/xWDfimd82n (via @MinaMarkham)
— Mocha Heather (@_hmig) April 5, 2015