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

BRAD FROST

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

THANKS! / @chumillas ckrina