An Agile Front End Workflow

Ticket Workflow

The old way

The Process Problem

• Development is a bottleneck
• Theming at the end creates pressure

The Historical Problems

• Drupal - A million ways to die
• CSS is a one man game
• Hell is other people's CSS
• Adding things to the end of stylesheet
• Time taken to deliver a page that looks the same
• Onboarding time for new developers

Sprint 0

• Theme setup
• Drupal's CSS / markup
• CSS Methodology / Architecture
• Documentation
• Automation
• Assets
• Testing
• Definition of done
• Team structure

CSS Foundations

• SASS
• SMACSS / BEM

Coding standards

Drupal has CSS coding standards

The rest of the web has coding standards

There are tools to help you enforce coding standards

Will my team mates understand this?

SassDoc

Hologram syntax

/*doc
---
title: Alert
name: alert
category: basics
---
I am a comment
```html_example
<div class="alert">I am the example code</div>
```
*/

PatternLab

Benefits

• Visibility within the dev team
• Visibility for the client
• You can test the style guide
• You can theme without Drupal

Doubts

• Duplication of markup
• A solution for any project size?
• Yet another tool to learn

What we did right

1 User story - up to 3 sub tasks

• Theme
• Functionality
• Integrate

The new way

Prototyping inside Drupal

• Not tied to functionality
• Designer can sign off mid sprint
• HTML / CSS is integrated once signed off (and functionality is developed)

/**
* Implements hook_menu().
*/
  function sage_statics_menu() {
  $items = array();
  $items['statics/%'] = array(
    'page callback' => 'sage_statics_page',
    'page arguments' => array(1),
    'access arguments' => array('access content'),
  );
  return $items;
}

/**
* Page callback: Statics pages
*/
function sage_statics_page($page) {
  switch ($page) {
    case SageStatics::PAGE_BOOK_PRODUCT:
    return theme(SageStatics::THEME_BOOK_PRODUCT);

    // etc...
    }
}

Option 1: Fuglies

.component,
%component {
  content: 'component';

  &--variant {
    content: 'variant';
  }

  &__element {
    content: 'element';
  }
}

// Fugly selectors.
.my-fugly-selector {
  @extend %component__element;
}

Source: https://gist.github.com/JohnAlbin/b4329a2a4fb4a5caf1f2

Option 2: Preprocessing

AbstractThemeProcessor

abstract class AbstractThemeProcessor {
  /**
  * @var array
  */
  private $vars;
  /**
  * @param array $vars
  */
  private function __construct(&$vars) {
    $this->vars = &$vars;
    if ($this->isApplicable()) {
      $this->execute();
    }
  }
  /**
  * @param array $vars
  * @return static
  */
  public static function process(&$vars) {
    return new static($vars);
  }
  /**
  * @return mixed
  */
  abstract public function execute();
  /**
  * @return bool
  */
  abstract public function isApplicable();
}

Article Processor

class ArticleNodeProcessor extends AbstractNodeProcessor {
  // Example variable.
  const VAR_EXAMPLE = 'example';
  const VAR_EXAMPLE_FROM_NODE = 'example_node';
  /**
  * {@inheritDoc}
  */
  public function isApplicable() {
    return $this->isNodeType(ArticleController::getClassEntityBundle());
  }
  /**
  * {@inheritDoc}
  */
  public function execute() {
    $this->articleController = example_article_factory()->initWithEntity($this->getVar('node'));
    $this->addExtraDisplayItems();
  }
  /**
  * Add extra display items.
  */
  public function addExtraDisplayItems() {
    $this->setVar(self::VAR_EXAMPLE, 'Variable value');
    $this->setVar(self::VAR_EXAMPLE_FROM_NODE, $this->articleController->getExampleValue());
  }
}

/**
* Implements template_preprocess_node().
*/
function example_preprocess_node(&$vars) {
  ArticleNodeProcessor::process($vars);
  ArticleNodeTeaserProcessor::process($vars);ß
  BlogNodeProcessor::process($vars);
  CarouselItemNodeProcessor::process($vars);
}

Both?

Feedback loop

Early Feedback

@see: Design components

• SMACSS
• MindBEMding
• Managing Complex Projects With Design Components

@see: Coding standards

• CSS coding standards
• Principles of writing consistent, idiomatic CSS
• High-level advice and guidelines for writing sane, manageable, scalable CSS
• An opinionated styleguide for writing sane, maintainable and scalable Sass

@see: Style guides

• Hologram
• An overview of Pattern Library Generators