Component Driven Design and Development
•
3 likes•1,013 views
This document discusses component-driven design and development. It covers topics like components, design systems, CSS methodologies, style guides, and how to implement a component-based approach in Drupal. Specific methodologies discussed include Atomic Design, BEM, OOCSS, SMACSS. It also covers style guides, KSS for generating documentation from code, and various Drupal-specific techniques for building out components like display suite, panels, and code alterations. The overall message is that taking a component and design system approach improves reusability, efficiency, and maintainability of projects.
Report
Share
Component Driven Design and Development
- 2. COMPONENT DRIVEN DESIGN AND DEVELOPMENT Cristina Chumillas
- 3. CRISTINA CHUMILLAS /@chumillas ckrina Designer and frontend developer at Ymbra
- 4. WHAT ARE WE GOING TO TALK ABOUT Components Design Systems CSS Methodologies Styles Guides In Drupal
- 5. WEB PROJECTS
- 7. invisble
- 9. COMPONENTS
- 10. invisble
- 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>
- 12. USE COMPONENTS TO MAKE SYSTEMS MODULAR For a system to be modular, it must have interchangeable parts.
- 13. WHAT MAKES A COMPONENT MODULAR? Standard & shared design Centralized code Controlled via system, not the user Customizable options
- 16. “We’re not designing pages, we’re designing systems of components.” --Stephen Hay
- 17. DESIGN SYSTEMS
- 18. Everything that makes up your product. --Mark Otto, FOWA 2013 Everything. Typography, layouts and grids, colors, icons, components, coding conventions...
- 21. WHY DESIGN SYSTEMS? Reusable work - COMPONENTS More efficient projects Large-scale ready code Everybody knows how everything works Integrates multi-disciplinary workflow
- 22. ATOMIC DESIGN
- 23. BRAD FROST
- 29. WHEN?
- 30. WIREFRAMES Static wireframes vs HTML Wireframes
- 31. STATIC WIREFRAMES They are abstractions They are full of assumptions They are never complete
- 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
- 33. DESIGN Static delirables vs HTML delirables-prototypes
- 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
- 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)
- 37. OOCSS (Object Oriented CSS) /* Media Object */ .media {} .media .image {} .media .comment {}
- 38. BEM (Block Element Modifier) .site-search {} /* Block */ .site-search__field {} /* Element */ .site-search--full {} /* Modifier */
- 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>
- 40. SMACSS
- 41. STYLE GUIDES Documentation of a Design System
- 43. WHY? Improve User Experience Easy onboarding of new team members Efficient Design and Development Makes Testing easier
- 47. STYLEGUIDE DRIVEN DEVELOPMENT(SDD) Style guides that are generated directly from the style definition sources
- 48. KSS (KNYLE STYLE SHEETS) Documentation specification and styleguide format. Structured to be automatically extracted and processed.
- 50. _pager.scss // Pager // // Markup: pager.hbs // // Style guide: components.navigation.pager .pager, %pager { margin: 0; // All the styles here. }
- 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>
- 53. STYLE GUIDES - RESOURCES styleguides.io Articles, Books, Podcasts, Talks, Tools, Examples, etc.
- 54. IN DRUPAL
- 55. GENERAL APPROACHES 1. Wrapping components 2. Changing default markup
- 56. OUR COMPONENTS TO DRUPAL COMPONENTS In code Display Suite Panels
- 57. IN CODE Field formatter Process and preprocess functions hook_(...)_alter hook_page_alter() hook_form_alter() hook_node_view_alter() (...) ...
- 59. DISPLAY SUITE Field templates (Display Suite extras)
- 60. PANELS Custom Panes Templates for pane Add class to the pane Mini Panels Context
- 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) { (...) }
- 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; } }
- 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; } }
- 65. PANELS Context
- 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