Component Driven Design and Development

Slide 1

Slide 2

COMPONENT DRIVEN DESIGN AND DEVELOPMENT Cristina Chumillas

Slide 3

CRISTINA CHUMILLAS @chumillas / ckrina Designer and frontend developer at Ymbra

Slide 4

WHAT ARE WE GOING TO TALK ABOUT Components Design Systems CSS Methodologies Styles Guides In Drupal

Slide 5

WEB PROJECTS

Slide 6

Slide 7

invisble

Slide 8

vs Responsive Interactions …

Slide 9

COMPONENTS

Slide 10

invisble

Slide 11

<!— 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>

Slide 12

USE COMPONENTS TO MAKE SYSTEMS MODULAR For a system to be modular, it must have interchangeable parts.

Slide 13

WHAT MAKES A COMPONENT MODULAR? Standard & shared design Centralized code Controlled via system, not the user Customizable options

Slide 14

Slide 15

Slide 16

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

Slide 17

DESIGN SYSTEMS

Slide 18

Everything that makes up your product. —Mark Otto, FOWA 2013 Everything. Typography, layouts and grids, colors, icons, components, coding conventions…

Slide 19

Slide 20

Slide 21

WHY DESIGN SYSTEMS? Reusable work - COMPONENTS More efficient projects Large-scale ready code Everybody knows how everything works Integrates multi-disciplinary workflow

Slide 22

ATOMIC DESIGN

Slide 23

BRAD FROST

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

WHEN?

Slide 30

WIREFRAMES Static wireframes vs HTML Wireframes

Slide 31

STATIC WIREFRAMES They are abstractions They are full of assumptions They are never complete

Slide 32

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

Slide 33

DESIGN Static delirables vs HTML delirables-prototypes

Slide 34

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

Slide 35

CSS METHODOLOGIES

Slide 36

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)

Slide 37

OOCSS (Object Oriented CSS) /* Media Object */ .media {} .media .image {} .media .comment {}

Slide 38

BEM (Block Element Modifier) .site-search {} .site-search__field {} .site-search—full {} /* Block / / Element / / Modifier */

Slide 39

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>

Slide 40

SMACSS

Slide 41

STYLE GUIDES Documentation of a Design System

Slide 42

Slide 43

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

Slide 44

Slide 45

Slide 46

Slide 47

STYLEGUIDE DRIVEN DEVELOPMENT(SDD) Style guides that are generated directly from the style definition sources

Slide 48

KSS (KNYLE STYLE SHEETS) Documentation specification and styleguide format. Structured to be automatically extracted and processed.

Slide 49

base/ layout/ components/ pager/ _pager.scss _pager.hbs

Slide 50

_pager.scss // Pager // // Markup: pager.hbs // // Style guide: components.navigation.pager .pager, %pager { margin: 0; // All the styles here. }

Slide 51

_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>

Slide 52

Slide 53

STYLE GUIDES - RESOURCES styleguides.io Articles, Books, Podcasts, Talks, Tools, Examples, etc.

Slide 54

IN DRUPAL

Slide 55

GENERAL APPROACHES 1. Wrapping components 2. Changing default markup

Slide 56

OUR COMPONENTS TO DRUPAL COMPONENTS In code Display Suite Panels

Slide 57

IN CODE Field formatter Process and preprocess functions hook_(…)_alter hook_page_alter() hook_form_alter() hook_node_view_alter() (…) …

Slide 58

DISPLAY SUITE View modes

Slide 59

DISPLAY SUITE Field templates (Display Suite extras)

Slide 60

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

Slide 61

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) { (…) }

Slide 62

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; } }

Slide 63

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; } }

Slide 64

PANELS Mini-panels

Slide 65

PANELS Context

Slide 66

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