A presentation at DrupalCon Barcelona 2015 in in Barcelona, Spain by Cristina Chumillas
COMPONENT DRIVEN DESIGN AND DEVELOPMENT Cristina Chumillas
CRISTINA CHUMILLAS @chumillas / ckrina Designer and frontend developer at Ymbra
WHAT ARE WE GOING TO TALK ABOUT Components Design Systems CSS Methodologies Styles Guides In Drupal
WEB PROJECTS
invisble
vs Responsive Interactions …
COMPONENTS
invisble
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
WHEN?
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 want you output
CSS METHODOLOGIES
OOCSS (Object Oriented CSS) Based in Object Oriented programming paradigm: Do One Thing Well Single Responsibility Principle (1 responsability = 1 class) Focuses on Separation of Concerns(SoC)
OOCSS (Object Oriented CSS) /* Media Object */ .media {} .media .image {} .media .comment {}
BEM (Block Element Modifier) .site-search {} .site-search__field {} .site-search—full {} /* Block / / Element / / 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>
SMACSS
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.
base/ layout/ components/ pager/ _pager.scss _pager.hbs
_pager.scss // Pager // // Markup: pager.hbs // // Style guide: components.navigation.pager .pager, %pager { margin: 0; // All the styles here. }
_pager.hbs // 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
GENERAL APPROACHES 1. Wrapping components 2. Changing default markup
OUR COMPONENTS TO DRUPAL COMPONENTS In code Display Suite Panels
IN CODE Field formatter Process and preprocess functions hook_(…)_alter hook_page_alter() hook_form_alter() hook_node_view_alter() (…) …
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 Custom Panes (CTools Content Type or Plugin) <?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 Custom template for pane /** * 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 Custom class /** * 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 Mini-panels
PANELS Context
THANKS! @chumillas / ckrina Drupal-generated markup is not your friend — use a styleguide! Robert Caracaus Tuesday 22 14:15-15:15 Room 112 Prototypes and Drupal: from designing in-browser to implementing custom templates Yuriy Gerasimov and Morten Christoffersen Wednesday 23 10:45-11:45 Room 111
Presented at DrupalCon Barcelona 2015, September 22nd. The video can be watched at: https://www.youtube.com/watch?v=RcQD0K_MexA
The Web is in permanent evolution, specially the Front end world. Solutions like Responsive Web Design have transformed our day-to-day and forced us to rethink our workflow constantly.
Working with components means to take a step back to integrate and improve this workflow. New tools and methodologies that can help us are appearing every day and it only takes small mindset shifts to take full advantage of them.
Atomic design is an amazing example of these methodologies that are able to assist us with this change. It relies on interlocking components, from small bits like labels (atoms) to large systems like full page templates. This applies to all the pieces involved in the Front end layer: from the design to the prototype creation or the final code, or also live Styleguides like KSS or CSS methodologies like BEM or SMACSS. On top of all the above, it will allow us to test our Front end layer, avoiding regressions and preparing it for large-scale projects.
In this session, we will cover:
for free. You
can too.