COMPONENT BASED - 2015.drupalcamp.es · DESIGNING IN THE BROWSER PSD/ for early planning/research...
54
COMPONENT BASED DESIGN AND DEVELOPMENT
Transcript of COMPONENT BASED - 2015.drupalcamp.es · DESIGNING IN THE BROWSER PSD/ for early planning/research...
COMPONENT BASEDDESIGN AND DEVELOPMENT
CRISTINA CHUMILLAS / @chumillas ckrina
Designer and frontend developer at Ymbra
WHAT ARE WE GOING TO TALKABOUT
ComponentsCSS MethodologiesDesign SystemsStyles GuidesIn Drupal
WEB PROJECTS
COMPONENTS
CSS METHODOLOGIES
BEM(Block Element Modifier)
.site-search {} /* Block */ .site-search__field {} /* Element */ .site-search--full {} /* Modifier */
BEM(Block Element Modifier)
<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(Block Element Modifier)
<div class="block-name--big"> <h2 class="block-name__title">Block title</h2> <p class="block-name__text">Block text</p> </div>
SMACSSBaseLayoutModule (Components)StateTheme
SMACSS
DESIGN SYSTEMS
Everything that makes up your product.
--Mark Otto, FOWA 2013
Everything.Typography, layouts and grids, colors, icons, components, coding conventions
“We’re not designing pages, we’redesigning systems of components.”
--Stephen Hay
WHY DESIGN SYSTEMS?Reusable work - COMPONENTS
More efficient projects
Large-scale ready code
Everybody knows how everything works
Integrates multi-disciplinary workflow
CARD DESIGN
ATOMIC DESIGN
WHEN?
WIREFRAMESStatic wireframes vs HTML Wireframes
STATIC WIREFRAMESThey’re abstractionsThey’re full of assumptionsThey’re verboseThey’re a crutch
HTML WIREFRAMESThey get into the browser quickerThey reinforce the notion that you’re creating a websiteThey’re interactiveThey allow for living, breathing annotationsThey lay the foundation for the final product
DESIGNING IN THE BROWSERPSD/ for early planning/research phasesThe composition in the browserMake decisions in the browserReusable work
STYLE GUIDESDocumentation of a Design System
WHY?Improve User ExperienceEasy onboarding of new team membersEfficient Design and DevelopmentMakes Testing easier
STYLEGUIDE DRIVENDEVELOPMENT(SDD)
Style guides that are generated directly from the styledefinition sources
STYLE GUIDESDrupal Style Guide module
KSS (Knyle Style Sheets) (Zen 6)
Pattern Lab
STYLE GUIDES - RESOURCESstyleguides.io
Articles, Books, Podcasts, Talks, Tools, Examples, etc.
IN DRUPAL
ADAPT TO AGNOSTIC STYLE GUIDES1. Wrapping components2. Changing default markup
UI COMPONENTS TO DRUPAL COMPONENTS
CODINGField formatterhook_alterProcess and preprocess functions...
UI COMPONENTS TO DRUPAL COMPONENTS
DISPLAY SUITEView modes
UI COMPONENTS TO DRUPAL COMPONENTS
DISPLAY SUITEField templates
UI COMPONENTS TO DRUPAL COMPONENTS
PANELSCustom PanesMini PanelsContext
