Web projects

aa

Lifetime of a project

• Responsive
• Interactions
• ...

Clients wants PS because they’re used to it.

Components

How can we improve it?

What is a component?

Any pre-defined object usable across multiple pages (widgets or modules)

 <!-- Last News component -->

 <div class="last-news">
  <h2 class="last-news__title">
    Últimas noticias
  </h2>

  <ul class="last-news__list">
    <li class="last-news__item">(...)</li>
    <li class="last-news__item">(...)</li>
  </ul>

  <a class="last-news__more">Ver más</a>
 </div>
            

Independent entity with its own meaning

Use components to Make systems modular

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

Make system modular with components

What makes a component modular?

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

NO tools 4 authors design > provide library of reusable components

--Stephen Hay

MAIN SLIDE

Design systems

--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, BEM, SMACSS

Methodologies for scalable maintainable frontend code

OOCSS

• Flexible, modular, swappable components that doOne 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 */
            

It's a naming methodology

underscore / dash

1. Abstractions

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

If not in previous steps, HERE!

Why?

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

Out of date Style Guides are useless.

Styleguide Driven Development(SDD)

Style guides that are generated directly from the style definition sources

Separation of UX-Design-Frontend-Backend. Developing UI separately in a styleguide.

Separating the UI and backend tasks > start at the same time & plug-and-play directly

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

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