Component-based frontend development with Atomic Design, Pattern Lab, BEM, SMACSS, Twig, and Drupal 8

Speakers: 

Photoshop is dead. You should design systems, not "pictures". The web is dynamic, your design-to-development process should be too.

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.

Christopher Bloom will walk everyone through turning a modern 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 are 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.

We'll start with a quick mockup of a component-based design. The first part of the session will focus on teaching solid early-process design principles. Then we'll pull out Pattern Lab to rapidly prototype a few design elements, wireframes, and clickable prototypes. Sass and Compass will be featured heavily throughout the process. Finally, we'll convert a few of our components to Twig to use within a simple Drupal 8 theme.

The focus of the entire session will be about solving real world problems using frameworks and thought processes that simplify frontend development.

Schedule info
Track: 
Frontend
Experience level: 
Intermediate
Drupal Version: 
Drupal 8.x