Drupal-generated markup is not your friend

Use a styleguide!

Presented by Robert Caracaus from PreviousNext

Data Grid - markup

	
	<div class="two-column-grid">
		<div class="two-column-grid__item">
			<img src="/grid-image-1.png" />
			<a href="#" class="two-column-grid__title">
				Better Life Index
			</a>
		</div>
		<div class="two-column-grid__item">...</div>
		<div class="two-column-grid__item">...</div>
		<div class="two-column-grid__item">...</div>
	</div>
	

Remember that you need to serve the presentation HTML from a HTTP server.

Too Much Front-end

Yea, we know

But also

Too Much Sitebuilding

DS Expert Mode

Panels UI

Theme Pager

Class-based API

  <div class="region region-front-region-5">
    <div id="block-views-4f445c08f0d6c4bc9b3d998e263d64a2" class="block block-views">
      <h2>Recent blog posts</h2>
      <div class="content">
        <div class="view view-action-blog-blocks view-id-action_blog_blocks view-display-id-blog_block_homepage">
          <div class="view-content">
            <div class="item-list">

The faults of using

Default Drupal Classes

• Managing partials
• Code duplication
• "Forgot how it works"

Design components

To the rescue

<div class="two-column-grid">
  <div class="two-column-grid__item">*</div>
  <div class="two-column-grid__item">*</div>
</div>

Design components

To the rescue

• Scoped namespaced partials
• Markup can be documented and catalogued
• Can be modified and extended

Design component

Process tips

• Write css/html/js first
• Pretend Drupal doesn't exist
• Agile
• Source order less of a worry
• Static site not helpful unless componetized

Fugly selector!

  .magic-box__title,
  %magic-box__title {
    font-size: 2rem;
    background: pink;
  }

• interesting story about fugly selector (Now called Drupal Selectors)
• method of extending design components on top of Drupal classes.
• once
• pointless without example markup

The Styleguide

Styleguide frameworks

• patternlab
• blah
• kss-node

Famous Styleguides

• Mailchimp
• AirBnB
• GovUK

Different types of styleguides

• Documentation styleguide
• Living styleguide

Why we use KSS-node

• Client-side ones were too complicated and didn't work in IE8
• John is maintainer

Styleguide example video (2 mins)

• Parses scss files for documentation, could easily run off of a json, info or yml file
• Works with gulp or automation to update documentation as you go
• Creates a numbered catalogue of components
• Shows example markup

The benefits of the styleguide

• We can start prototyping earlier in the styleguide
• Document our example markup/sourceOrder next to our rendered/styled markup
• Have hard links to each of our components
• See our components interacting with eachother in the same environment
• Extending and reusing the CSS, Markup, and JS of components in unique ways.
• Extend sass components (code example)
• With a templating system, build out combinations of components (code/pic example)
• Front-end performance measurements

Process around styleguide driven development

• BEM (GOVUK Quote)
• Name based on the design patterns, not based on inputs/outputs
• Provide the same namespace for your dirs, partials, JS and classes.
• Separate the styling of base elements from the styling of customized display patterns. - semantics
• Store example markup and/or templates in the same folder or file as the the CSS that styles them.
• Build the component in raw HTML/CSS in the styleguide first, before any markup is generated by Drupal.
• Try not to style any Drupal classes in the styleguide.
• The Drupal theme should reflect styleguide markup as closely as possible.

Important that BEM stuff go through a code review process due to the manual conventions around BEM

Problems with Fugly

• We use the fugly
• Can be confusing. (example)
• It is verbose.
• Fugly selectors are hard to manage.
• You are maintaining twice as many classes
• Drupal classes not documented, nor are extends

Should we ditch the fugly?

• We wouldn't have to follow two abstraction holes.
• The variation is stored in the actual markup rather than creating maps and organizing the fuglies.
• Less front-end code, more mapping with PHP in template.php
• Your front-end is abstraction is free of Drupalisms and other arms of organization can use it.

The downside of Styleguide?

• Complexity: Gulp, npm, bugs, process, CI.
• Biggest issue for PNX: Duplicate Handlebars/PHP templates (code examples) Segways into templating.

The web's Evolution towards

Web Components

Styleguide wins in Drupal 8

Twig and TwigJS Triforce

• TwigJS (Twig and JS logos)
• Styleguide, Server Side Drupal, Clientside (Triforce around the logos transition)

Twig Includes

• PHP template hell code examples
• How includes can save us for smaller components

Twig Extends

• PHP template hell code examples
• How extends can save us for re-using entire layouts (panel layouts anyone?)

Example data in the Styleguide

• Using a .json file to provide default data for kss-node components

Client-side templating

• Restful Web Services make the use of client-side templates more useful