Practical modular, object oriented CSS with Panels

Owen Barton

CSS organization best practices have come a long way with recent uptake of SMACSS, BEM and OOCSS approaches to structuring design and styles. However, it is not always obvious how to methodologically and efficiently integrate those practices into Drupal development.

This session will give an introduction to modular, object oriented CSS, starting with the design and front-end implementation planning - how to identify layout, components, as well as sub-components and modifiers.

Then you will learn how to practically implement these with Drupal, and "connect" them to configuration entities in a systematic way. Panels will be used to demonstrate this, although we will discuss adapting this approach to to other layout modules. 

Topics covered will include:

  • Managing layout markup and styles.
  • Setting and documenting component base classes.
  • Structuring component CSS and SASS/SCSS.
  • Best practices for using and configuring sub-components and modifiers (themes, states etc).
  • How to control panels markup and keep components lean.
  • How to apply this approach to Panelizer/Panopoly.

Register NOW

Session Track

Front End

Experience Level

Intermediate

Drupal Version