[05-Dec-2018 23:24:13 CST6CDT] PHP Fatal error: Uncaught Error: Call to undefined function add_action() in /home/ispeakin/public_html/wp-content/themes/unlimited/inc/customizer.php:3 Stack trace: #0 {main} thrown in /home/ispeakin/public_html/wp-content/themes/unlimited/inc/customizer.php on line 3 Camp Sass Notes (4/4/2015) – ispeakincode.com Skip to content

Camp Sass Notes (4/4/2015)

Posted in conference, and sass

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!

One Comment

  1. The formatting of your post is great. Easy to learn, digest and share.

    April 27, 2015

Comments are closed.