The session was originally titled Managing Complex Projects with Design Components, but the training I took to become a Certified ScrumMaster blew my mind.

Integrating agile development with web development is actually very simple. It's called Styleguide-Driven Development.

In this session, we will discuss the two requirements for Style Guide Driven Development: component-based design and automated style guides.

Original description:

Our CSS sucks. We've been building sites for over a decade using crappy, ornamentation techniques and shoddy selectors. Our styles unintentional bleed across the site. Our stylesheets are fragile and unmaintainable and full of specificity landmines. Pandas wander alone in the wilderness.

But there's no need to drown ourselves in beer. New technologies like Web Components and new techniques like OOCSS, SMACSS and BEM show us that planning before building can make our projects maintainable, easier to debug, and smaller with reduced CSS file sizes.

This session will introduce the basic techniques for CSS layering and using design components, the heart of any front-end CSS project. We will also discuss Sass project organization, Sass version control with Bundler and tricks to implement components when you can't change Drupal's classes. Finally, we will go through the steps necessary to automatically generate a front-end style guide to document your components.

Slides are now available!

Links:

• Session slides: http://www.slideshare.net/JohnAlbin/styleguide-driven-development
• Drupal CSS coding standards: https://www.drupal.org/node/1886770
• Automated style guide of Flower example component: http://johnalbin.github.io/flower-power/
• KSS-node: https://github.com/kss-node/kss-node/