One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular CSS Philosophy

ONE DIVTO RULE THEM ALL!CONTROLLING DRUPAL DIV’S AND IMPLEMENTING A MODULAR CSS PHILOSOPHY

by Leah Wagner // from The Jibe //

@leahmarsh@thejibe

One Div To Rule Them All! // @leahmarsh

THE AGENDAWhat is Modular CSS and how it can be helpful?

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

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

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

One Div To Rule Them All! // @leahmarsh

THE AGENDAHow do we apply this to Drupal when so much of our HTML ispre-rendered for us?

Using theme tpl files

Using contributed modules

Using contributed themes

One Div To Rule Them All! // @leahmarsh

WHAT IS MODULAR CSS?TRUST ME, YOU HAVE SEEN THIS BEFORE...

One Div To Rule Them All! // @leahmarsh

BASE RULESThe most basic elements that will exist on the page. Usually neveroverridden. rests fall into this category.

a { color: #666; } a:hover { color: #333; text-decoration: underline; }

input[type=text], input[type=password] { border: 1px solid #CCC; }

One Div To Rule Them All! // @leahmarsh

LAYOUT RULESThere are layout rules for major page regions and smallercomponents on the page.

#header, #footer { width: 100%; background: #333; }

#main { width: 100%; background: #FFF; }

#content { width: 75%; display: inline; float: left; } #sidebar { width: 25%; display: inline; float: right; }

.l-grid-4 li { width: 25%; display: inline; float: left;} .l-inline { display: inline; }

One Div To Rule Them All! // @leahmarsh

COMPONENT RULES (OR MODULES)How many times to we style something like this?

<div id="block-view-1" class="view"> <h1>My views listing title</h1> <ul> <li> <h3><a href="/node/1">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/2">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/3">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> </ul> </div>

One Div To Rule Them All! // @leahmarsh

COMPONENT RULES (OR MODULES)And we might start styling with something like this:

To reuse this code, we do something like this:

#block-view-1 li { border-bottom: 1px solid #CCC; padding: 20px 0; }

#block-view-1 h3 a { color: #333; }

#block-view-1 p { font-style: italic; }

#block-view-1 li, #block-view-2 li { border-bottom: 1px solid #CCC; padding: 20px 0; }

#block-view-1 h3 a, #block-view-2 h3 a { color: #333; }

#block-view-1 p, #block-view-2 p { font-style: italic; }

One Div To Rule Them All! // @leahmarsh

COMPONENT RULES (OR MODULES)Instead we define a reusable class:

<div id="block-view-1" class="list-title-body"> <h1>My views listing title</h1> <ul> <li> <h3><a href="/node/1">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/2">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/3">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> </ul> </div>

One Div To Rule Them All! // @leahmarsh

COMPONENT RULES (OR MODULES)This is what we have in place:

We are NOT going to:

We going to define a subcomponent with the overrides:

.list-title-body li { border-bottom: 1px solid #CCC; padding: 20px 0; } .list-title-body h3 a { color: #333; } .list-title-body p { font-style: italic; }

#block-view-2 li:nth-child(2n) { background: #DDD; } ul.striped li:nth-child(2n) { background: #DDD; } .list-title-body ul.striped li:nth-child(2n) { background: #DDD; }

.list-title-body--striped li:nth-child(2n) { background: #DDD; }

One Div To Rule Them All! // @leahmarsh

COMPONENT RULES (OR MODULES)Then we add our subcomponent class:

<div id="block-view-2" class="list-title-body list-title-body--striped"> <h1>My views listing title</h1> <ul> <li> <h3><a href="/node/1">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/2">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/3">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> </ul> </div>

One Div To Rule Them All! // @leahmarsh

COMPONENT RULES (OR MODULES)With a preprocessor, we can extend our class:

We only need one class because our SASS looks like this:

<div id="block-view-2" class="list-title-body--striped"> <h1>My views listing title</h1> <ul><li>...</li></ul> </div>

.list-title-body li border-bottom: 1px solid #CCC padding: 20px 0

.list-title-body--striped @extend .list-title-body li:nth-child(2n) background: #DDD

One Div To Rule Them All! // @leahmarsh

STATE RULESState rules are used for styles that have a JS dependency and thisis indicated with the 'is-' prefix.

Our classes might look like:

<header id="header"> <nav class="is-collapsed"> <ul> <li><a href="/home">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav> </header>

nav { height: auto; } nav.is-collapsed { height: 0px; }

One Div To Rule Them All! // @leahmarsh

THEME RULESStyle your components for different themes or colour pallets

// As defined by the component .button { background: #CCC; border: #000; border-radius: 5px; }

// As defined in red.css .button { background: #FF0000; }

One Div To Rule Them All! // @leahmarsh

ORGANIZATIONFile structure and naming conventions

One Div To Rule Them All! // @leahmarsh

WHAT IS MODULAR CSS?To get us started, an example we see everyday in Drupal.

.views-row { border-bottom: 1px solid #CCC; padding: 20px 0; }

.views-row-last { border-bottom: none; }

<div id="block-view-1" class="view"> <div class="views-row views-row-first"></div> <div class="views-row"></div> <div class="views-row views-row-last"></div> </div>

One Div To Rule Them All! // @leahmarsh

WHAT IS MODULAR CSS?This is not something you download, but a philosophy you usewhen you style your project

Object Oriented CSS (OOCSS)

Block, Element, Modifier (BEM)

Don’t Repeat Yourself CSS (DRY CSS)

Atomic CSS

Scalable and Modular Architecture for CSS (SMACSS)

Read more...

Read more...

Read more...

Read more...

Read more...

One Div To Rule Them All! // @leahmarsh

WHY (OR WHY NOT) SMACSS?This is the wrong question

D8 has adopted this philosophy for core dev

WHY USE A MODULAR CSS PHILOSOPHY?Your CSS with have a high level of specificity while remaininghighly reusable.

You (should) never have to rewrite code. Potentially, share codeacross different projects.

Avoid CSS conflicts and changes breaking other elements.

Read more...

One Div To Rule Them All! // @leahmarsh

GETTING TO KNOW

SMACSS

One Div To Rule Them All! // @leahmarsh

CATEGORIZATION5 different categories of code

Base

Layout

Components (or Modules)

State

Theme

One Div To Rule Them All! // @leahmarsh

ORGANIZATIONSample folder structure

<base> - normalize.css - base.sass <components> - <bourbon> - _icon.sass - _button.sass - _list-title-body.sass - _list-title-body-image.sass - style.sass <layout> - <bourbon neat> - layout.sass <states> - state.sass <themes> - red.sass

One Div To Rule Them All! // @leahmarsh

ORGANIZATIONNaming conventions

// Layout .l-grid-4

// State .is-collapsed

// Components .list-title-body

// Subcomponents .list-title-body--striped

One Div To Rule Them All! // @leahmarsh

CONTROLLINGDRUPAL MARKUPBringing us back to One Div To Rule Them All!

TPL files

Modules

Themes

One Div To Rule Them All! // @leahmarsh

CONTROLLING DRUPAL MARKUPTPL Files

// field.tpl.php

<div class="<?php print $classes; ?>"<?php print $attributes; ?>> <?php if (!$label_hidden): ?> <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?> <?php endif; ?> <div class="field-items"<?php print $content_attributes; ?>> <?php foreach ($items as $delta => $item): ?> <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<? <?php endforeach; ?> </div> </div>

One Div To Rule Them All! // @leahmarsh

CONTROLLING DRUPAL MARKUPTPL Files

// field--field-node-link.tpl.php

<button class="btn-read-more"> <?php print render($item); ?> </button>

One Div To Rule Them All! // @leahmarsh

CONTROLLING DRUPAL MARKUPModule: FencesEnable class overrides

Select HTML5 element on a per field basis

One Div To Rule Them All! // @leahmarsh

CONTROLLING DRUPAL MARKUPModule: Display Suite ExtrasEnable Display Suite Extras and activate field

One Div To Rule Them All! // @leahmarsh

CONTROLLING DRUPAL MARKUPModule: Display Suite ExtrasSelect HTML5 element on a per field basis

One Div To Rule Them All! // @leahmarsh

CONTROLLING DRUPAL MARKUPModule: ViewsCreate a custom class

One Div To Rule Them All! // @leahmarsh

CONTROLLING DRUPAL MARKUPModule: ViewsCleanup your row markup

One Div To Rule Them All! // @leahmarsh

CONTROLLING DRUPAL MARKUPModule: ViewsCustomize your field markup

One Div To Rule Them All! // @leahmarsh

CONTROLLING DRUPAL MARKUPModule: Clean MarkupCreate a custom block class

One Div To Rule Them All! // @leahmarsh

CONTROLLING DRUPAL MARKUPModule: Clean MarkupCreate a custom panel pane or panel region class

One Div To Rule Them All! // @leahmarsh

CONTROLLING DRUPAL MARKUPTheme

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

One Div To Rule Them All! // @leahmarsh

WORKING WITH

BEST PRACTICESModular CSS helps us...

Reinforce clean markup

While you are thinking about classes, you think about using thecorrect HTML5 markup

This concept lends itself to online style tiles or style guides

One Div To Rule Them All! // @leahmarsh

THE ENDLET'S CHAT!by Leah Wagner // from The Jibe //

@leahmarsh@thejibe

One Div To Rule Them All! // @leahmarsh