Web projects

aa

Components

Use components
to Make systems modular

For a system to be modular, it must have interchangeable parts.

What makes a component modular?

• Standard & shared design
• Centralized code
• Controlled via system, not the user
• Customizable options

“We’re not designing pages, we’re designing systems of components.”

--Stephen Hay

Design systems

Everything that makes up your product.

--Mark Otto, FOWA 2013

Everything.

Typography, layouts and grids, colors, icons, components, coding conventions...

Why Design Systems?

Reusable work - COMPONENTS

More efficient projects

Large-scale ready code

Everybody knows how everything works

Integrates multi-disciplinary workflow

Atomic design

Brad Frost

Wireframes

Static wireframes vs HTML Wireframes

Static wireframes

• They are abstractions
• They are full of assumptions
• They are never complete

HTML Wireframes

• They get into the browser quicker
• They reinforce the notion that you’re creating a website
• They are interactive
• They allow annotations
• They are the base for the final product

Design

Static delirables vs HTML delirables-prototypes

Designing in the browser

• PSD for early planning/research phases
• The composition in the browser
• Make decisions in the browser
• Reusable work > Developer will know how do you wnat you output

CSS Methodologies

OOCSS

• Flexible, modular, swappable components that do
  One Thing Well
• Focuses on Single Responsibility Principle
• Focuses on Separation of Concerns(SoC)

OOCSS

    /* Media Object */
    .media {}
    .media .img {}
    .media .img img {}
    .media .imgExt {}
            

BEM

          .site-search {}          /* Block */
          .site-search__field {}   /* Element */
          .site-search--full {}    /* Modifier */
            

BEM

        <div class="block-name__wrapper">
          <div class="block-name">
            <h2 class="block-name__title">Block title</h2>
            <p class="block-name__text">Block text</p>
          </div>
        </div>
      

BEM

          <div class="block-name--big">
            <h2 class="block-name__title">Block title</h2>
            <p class="block-name__text">Block text</p>
          </div>
      

SMACSS

• Base
• Layout
• Module (Components)
• State
• Theme

Style Guides

Documentation of a Design System

Why?

• Improve User Experience
• Easy onboarding of new team members
• Efficient Design and Development
• Makes Testing easier

Styleguide Driven Development(SDD)

Style guides that are generated directly from the style definition sources

KSS (Knyle Style Sheets)

• Documentation specification and styleguide format.
  
  
• Structured to be automatically extracted and processed.

// Pager
//
// Markup: pager.hbs
//
// Style guide: components.navigation.pager

.pager,
%pager {
  clear: both;
  margin: 0;
  padding: 0;
  text-align: center;

  // A page item in the pager list.
  &__item {
    @include adjust-font-size-to(12px);
    display: inline;
    padding: 0 .5em;
    border-right: solid 1px color(grey-dark);
    list-style-type: none;
    background-image: none;
    color: color(grey-dark);
  }

  // The current page's list item.
  &__current-item {
    @extend %pager__item;
  }
}
            

// Pager
<ul class="pager {{modifier_class}}">
  <li class="pager__item">
    <a title="Go to page 1" href="/admin/content">1</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 2" href="/admin/content?page=1">2</a>
  </li>
  <li class="pager__current-item">3</li>
  <li class="pager__item">
    <a title="Go to page 4" href="/admin/content?page=3">4</a>
  </li>
  <li class="pager__item">
    <a title="Go to page 5" href="/admin/content?page=4">5</a>
  </li>
</ul>
            

Style Guides - resources

styleguides.io

Articles, Books, Podcasts, Talks, Tools, Examples, etc.

In Drupal

Adapt to agnostic Style Guides

1. Wrapping components
2. Changing default markup

UI components to Drupal components

• Coding
• Display Suite
• Panels

Coding

• Field formatter
• hook_alter
• Process and preprocess functions
• ...

Display Suite

View modes

Display Suite

Field templates (Display Suite extras)

Panels

• Custom Panes
• Templates for pane
• Add class to the pane
• Mini Panels
• Context

Panels

<?php

$plugin = array(
  'single' => TRUE,
  'title' => t('Menu shortcuts to the themes'),
  'category' => t('MSF ES: Themes'),
  'render callback' => 'jumpmenu_themes_render',
  'admin info' => 'jumpmenu_themes_admin_info',
);

/**
 * The 'admin info' callback for panel pane.
 */
function jumpmenu_themes_admin_info($subtype, $conf, $contexts) {
  (...)
}

/**
 * Render callback function.
 */
function jumpmenu_themes_render($subtype, $conf, $args, $contexts) {
  (...)
}

Panels

    /**
     * Implements hook_preprocess_panels_pane().
     */
    function mymodule_preprocess_panels_pane(&$variables) {

      switch ($variables['pane']->subtype) {
        case 'my-pane-name':
          $variables['template_files'][] = 'panels-pane-test';
          break;
      }
    }

Panels

    /**
     * Implements hook_preprocess_panels_pane().
     */
    function mymodule_preprocess_panels_pane(&$variables) {

      switch ($variables['pane']->subtype) {
        case 'my-pane-name':
          $classes = 'my-custum-class';
          $variables['classes_array'][] = $classes;
          break;
      }
    }

Panels

Panels

Thanks!

@chumillas / ckrina