Dan Mouyard Lead Front-End Developer
The Gesso Theme
Design with Pattern Lab
Organize Design Components
Overview of Gesso
CSS Architecturedrupal.org/node/1887918
- Predictable
- Reusable
- Maintainable
- Scalable
Naming Conventions
Components
.component {}
.another-component {}
Markup
<div class="component">…</div> <div class="another-component">…</div> <div class="component"> <div class="another-component">…</div> </div>
Elements
.component__element {}
.component__another-element {}
Markup
<div class="component"> <div class="component__element">…</div> <div class="component__another-element">…</div> <div class="another-component">…</div> </div>
Component Variants
.component--variant {}
.component--another-variant {}
Markup
<div class="component component--variant">
<div class="component__element">…</div>
<div class="component__another-element">…</div>
<div class="another-component">…</div>
</div>
States
.component.is-state {}
.component__element.is-another-state {}
Markup
<div class="component component--variant is-state"> <div class="component__element is-state">…</div> <div class="component__another-element">…</div> <div class="another-component">…</div> </div>
Drupal Core vs. Gesso Menu Markup
<ul class="menu">
<li class="first leaf">
<a>…</a>
</li>
<li class="leaf">
<a class="active">…</a>
</li>
<li class="last expanded">
<a>…</a>
<ul class="menu">…</ul>
</li>
</ul>
<ul class="nav nav--main-menu">
<li class="nav__item">
<a class="nav__link">…</a>
</li>
<li class="nav__item is-active-trail is-active">
<a class="nav__link is-active-trail is-active">…</a>
</li>
<li class="nav__item has-children has-subnav">
<a class="nav__link">…</a>
<ul class="nav nav--subnav">…</ul>
</li>
</ul>
Pattern Lab
Installation
Just drop Pattern Lab Gesso
into the Gesso theme folder.
gesso/
css/
ds_layouts/
images/
includes/
js/
panels/
pattern-lab/
polyfills/
sass/
templates/
pattern-lab/
config/
core/
extras/
public/
index.html
source/
_data/
_data.json
_patterns/
drupal/
_patterns/
00-base/
01-components/
03-view-modes/
00-teaser@inprogress.mustache
02-layouts/
03-templates/
04-pages/
Mustache
<article class="teaser" role="article">
<div class="teaser__title"><a href="#">{{ title }}</a></div>
<div class="teaser__date">{{> base-medium-date }}</div>
{{{ summary }}}
</article>
<article class="teaser teaser--search-result" role="article">
<div class="layout-slat">
<div class="layout-slat__media">
<a href="#" aria-hidden="true">{{> base-thumbnail-image }}</a>
</div>
<div class="layout-slat__content">
<div class="teaser__title"><a href="#">{{ title }}</a></div>
{{{ summary }}}
</div>
</div>
</article>
Organize Components
Organize Sass Partials
styles.scss
@import 'partials/global'; @import 'partials/base'; @import 'partials/helper-classes'; @import 'partials/layout'; @import 'partials/components'; @import 'partials/quick-fixes';
styles.scss partials/ _global.scss _base.scss _helper-classes.scss _layout.scss _components.scss _quick-fixes.scss
Global
partials/
_global.scss
global/
variables/
helpers/
extendables/
Base
partials/
_base.scss
base/
_fonts.scss
_normalize.scss
_html-elements.scss
Helper Classes
Layout
Components
partials/
_components.scss
components/
_button.scss
_nav.scss
_pager.scss
_vertical-tabs.scss
partials/
_components.scss
components/
_nav.scss
nav/
_nav--pipeline.scss
_nav--main-menu.scss
Quick Fixes
Keep Mustache & Sass in Sync
_patterns/
00-base/
01-components/
navigation/
main-menu.mustache
02-layouts/
display-suite/
slat.mustache
sass/partials/
base/
components/
nav/
_nav--main-menu.scss
layouts/
ds/
_slat.scss