One Div

To Rule Them All!

Controlling Drupal div’s and implementing a modular CSS philosophy

by Leah Wagner  //  @leahmarsh
from The Jibe  //  @thejibe

One Div

To Rule Them All!

Controlling Drupal div’s and implementing a modular CSS philosophy

by Leah Wagner  //  @leahmarsh
from The Jibe  //  @thejibe

The Agenda

What is Modular CSS and how it can be helpful?

The Agenda

How you are probably already using this philosophy. (whether you know it or not.)

The Agenda

How a set file structure and naming conventions makes this philosophy work best.

The Agenda

How preprocessors like SASS and adding on tools like SASS-globbing and Compass can improve your workflow.

The Agenda

How do we apply this to Drupal when so much of our HTML is pre-rendered for us?

  • Using theme tpl files
  • Using contributed modules
  • Using contributed themes

What is Modular CSS?

Trust me, you have seen this before...

What is Modular CSS?

This is not something you download, but a philosophy you use when you style your project

Why (or why not) SMACSS?

  • This is the wrong question
  • D8 has adopted this philosophy for core dev Read more...

Why use a modular CSS Philosophy?

  • Your CSS with have a high level of specificity while remaining highly reusable.
  • You (should) never have to rewrite code. Potentially, share code across different projects.
  • Avoid CSS conflicts and changes breaking other elements.

Getting to know

SMACSS

Categorization

5 different categories of code

  • Base
  • Layout
  • Components (or Modules)
  • State
  • Theme

Organization

File structure and naming conventions

Controlling

Drupal Markup

Bringing us back to One Div To Rule Them All!

  • TPL files
  • Modules
  • Themes

Controlling Drupal Markup

Module: Fences

Enable class overrides

Select HTML5 element on a per field basis

Controlling Drupal Markup

Module: Display Suite Extras

Enable Display Suite Extras and activate field

Controlling Drupal Markup

Module: Display Suite Extras

Select HTML5 element on a per field basis

Controlling Drupal Markup

Module: Views

Create a custom class

Controlling Drupal Markup

Module: Views

Cleanup your row markup

Controlling Drupal Markup

Module: Views

Customize your field markup

Controlling Drupal Markup

Module: Clean Markup

Create a custom block class

Controlling Drupal Markup

Module: Clean Markup

Create a custom panel pane or panel region class

Controlling Drupal Markup

Theme

For when you find yourself repeating yourself...

  • Much of this can be configured on the theme level with TPL
  • Create your own starter theme or a collection of TPL files
  • Capture settings you are implementing on every project
  • Look to other themes for inspiration

Working with

Best Practices

Modular CSS helps us...

  • Reinforce clean markup
  • While you are thinking about classes, you think about using the correct HTML5 markup
  • This concept lends itself to online style tiles or style guides

THE END

Let's Chat!

by Leah Wagner  //  @leahmarsh
from The Jibe  //  @thejibe

THE END

Let's Chat!

by Leah Wagner  //  @leahmarsh
from The Jibe  //  @thejibe