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.


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


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


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; }


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; }


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>


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; }


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>


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; }


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>


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


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; }


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; }


ORGANIZATIONFile structure and naming conventions


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>


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...


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...


GETTING TO KNOW

SMACSS


CATEGORIZATION5 different categories of code

Base

Layout

Components (or Modules)

State

Theme


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


ORGANIZATIONNaming conventions

// Layout .l-grid-4

// State .is-collapsed

// Components .list-title-body

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


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

TPL files

Modules

Themes


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>


CONTROLLING DRUPAL MARKUPTPL Files

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

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


CONTROLLING DRUPAL MARKUPModule: FencesEnable class overrides

Select HTML5 element on a per field basis


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


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


CONTROLLING DRUPAL MARKUPModule: ViewsCreate a custom class


CONTROLLING DRUPAL MARKUPModule: ViewsCleanup your row markup


CONTROLLING DRUPAL MARKUPModule: ViewsCustomize your field markup


CONTROLLING DRUPAL MARKUPModule: Clean MarkupCreate a custom block class


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


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


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


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

@leahmarsh@thejibe


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

Technology

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