Atomic Design, Pattern Lab, Sass, Compass, BEM, SMACSS, OOCSS, Style Tiles, element collages: There are a ton of new techniques and technologies at our disposal as designers and frontend developers. However, comprehending the best way to use ALL the THINGS in a sane process is tricky. Joey, Chris, Brad, and Brian are going to walk everyone through turning a modern, in-browser, component-based design into real code while unifying many of the latest methodologies. If you're looking for a harmonious workflow from design to build, or having a hard time wrapping your head around where BEM fits into SMACSS or how Atomic Design can be used with Sass, then this is the session for you.

The lab will start with mocking up a quick, component-based design. The first part of the lab will focus on teaching solid early-process design principles. From this, everyone will walk through the installation and creation of Pattern Lab to rapidly prototype design elements and wireframes. Sass and Compass will be featured heavily throughout the process. Finally, the class will learn how to wrap the results of all this into a real Drupal theme. The focus of the entire lab will be about solving real world problems using frameworks and thought processes that simplify frontend development.

A note on hardware: We work with *nix (Mac/Linux) systems so we’ll best be able to help you during the class if you’re using the same. We give no guarantee regarding Windows, sorry.

A list of software prerequisites and class materials to participate in the hands-on examples will be coming soon.