COMPONENT BASED DESIGN AND DEVELOPMENT CRISTINA CHUMILLAS - - PowerPoint PPT Presentation

▶
component based
SMART_READER_LITE
LIVE PREVIEW

COMPONENT BASED DESIGN AND DEVELOPMENT CRISTINA CHUMILLAS - - PowerPoint PPT Presentation

Nov 21, 2023 104 likes •655 views

COMPONENT BASED DESIGN AND DEVELOPMENT CRISTINA CHUMILLAS @chumillas ckrina / Designer and frontend developer at Ymbra WHAT ARE WE GOING TO TALK ABOUT Components CSS Methodologies Design Systems Styles Guides In Drupal WEB PROJECTS

slide-1
SLIDE 1

COMPONENT BASED

DESIGN AND DEVELOPMENT

slide-2
SLIDE 2

CRISTINA CHUMILLAS

/ @chumillas ckrina Designer and frontend developer at Ymbra

slide-3
SLIDE 3

WHAT ARE WE GOING TO TALK ABOUT

Components CSS Methodologies Design Systems Styles Guides In Drupal

slide-4
SLIDE 4

WEB PROJECTS

slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8

COMPONENTS

slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14

CSS METHODOLOGIES

slide-15
SLIDE 15

BEM

(Block Element Modifier)

.site-search {} /* Block */ .site-search__field {} /* Element */ .site-search--full {} /* Modifier */

slide-16
SLIDE 16

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>

slide-17
SLIDE 17

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>

slide-18
SLIDE 18

SMACSS

Base Layout Module (Components) State Theme

slide-19
SLIDE 19

SMACSS

slide-20
SLIDE 20

DESIGN SYSTEMS

slide-21
SLIDE 21

Everything that makes up your product.

  • -Mark Otto, FOWA 2013

Everything.

Typography, layouts and grids, colors, icons, components, coding conventions

slide-22
SLIDE 22

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

  • -Stephen Hay
slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25

WHY DESIGN SYSTEMS?

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

slide-26
SLIDE 26

CARD DESIGN

slide-27
SLIDE 27
slide-28
SLIDE 28

ATOMIC DESIGN

slide-29
SLIDE 29

BRAD FROST

slide-30
SLIDE 30
slide-31
SLIDE 31
slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35

WHEN?

slide-36
SLIDE 36

WIREFRAMES

Static wireframes vs HTML Wireframes

slide-37
SLIDE 37

STATIC WIREFRAMES

They’re abstractions They’re full of assumptions They’re verbose They’re a crutch

slide-38
SLIDE 38

HTML WIREFRAMES

They get into the browser quicker They reinforce the notion that you’re creating a website They’re interactive They allow for living, breathing annotations They lay the foundation for the final product

slide-39
SLIDE 39

DESIGNING IN THE BROWSER

PSD/ for early planning/research phases The composition in the browser Make decisions in the browser Reusable work

slide-40
SLIDE 40

STYLE GUIDES

Documentation of a Design System

slide-41
SLIDE 41
slide-42
SLIDE 42

WHY?

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

slide-43
SLIDE 43
slide-44
SLIDE 44
slide-45
SLIDE 45

STYLEGUIDE DRIVEN DEVELOPMENT(SDD)

Style guides that are generated directly from the style definition sources

slide-46
SLIDE 46

STYLE GUIDES

Drupal Style Guide module KSS (Knyle Style Sheets) (Zen 6) Pattern Lab

slide-47
SLIDE 47

STYLE GUIDES - RESOURCES

styleguides.io Articles, Books, Podcasts, Talks, Tools, Examples, etc.

slide-48
SLIDE 48

IN DRUPAL

slide-49
SLIDE 49

ADAPT TO AGNOSTIC STYLE GUIDES

  • 1. Wrapping components
  • 2. Changing default markup
slide-50
SLIDE 50

UI COMPONENTS TO DRUPAL COMPONENTS

CODING

Field formatter hook_alter Process and preprocess functions ...

slide-51
SLIDE 51

UI COMPONENTS TO DRUPAL COMPONENTS

DISPLAY SUITE

View modes

slide-52
SLIDE 52

UI COMPONENTS TO DRUPAL COMPONENTS

DISPLAY SUITE

Field templates

slide-53
SLIDE 53

UI COMPONENTS TO DRUPAL COMPONENTS

PANELS

Custom Panes Mini Panels Context

slide-54
SLIDE 54

THANKS!

/ @chumillas ckrina