![Page 1: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/1.jpg)
1© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MICAH GODBOLT
ROAD RUNNER RULESOR MORE WHAT YOU’D CALL GUIDELINES OF A DESIGN SYSTEM
![Page 2: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/2.jpg)
© 2016 Phase22
MICAH GODBOLTFrontend Architect
Author of Frontend Architecture for Design Systems (fea.pub)
@micahgodbolt micah.codes
![Page 3: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/3.jpg)
© 2016 Phase23
ROAD RUNNER RULES
![Page 4: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/4.jpg)
© 2016 Phase24
ROAD RUNNER RULESOr More What You’d Call
Guidelines of a Design System
![Page 5: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/5.jpg)
5
![Page 6: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/6.jpg)
© 2016 Phase26
EMERY: 4 YEARS OLD“Daddy, can I have a flower?”
“I want a flower, now!” “This flower looks beautiful.”
![Page 7: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/7.jpg)
7
![Page 8: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/8.jpg)
© 2016 Phase28
RHYS: 2 YEARS OLD“Flower?” “Flower!” “Flower”
![Page 9: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/9.jpg)
© 2016 Phase29
LINGUISTICS
![Page 10: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/10.jpg)
© 2016 Phase210
LINGUISTICS: A SET OF STRUCTURAL RULES GOVERNING THE COMPOSITION OF CLAUSES, PHRASES,
AND WORDS IN ANY GIVEN NATURAL LANGUAGE.
![Page 11: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/11.jpg)
11© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The organization of sounds
PHONOLOGY
ONSET RIME
B eau
T y
![Page 12: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/12.jpg)
12© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure and composition of words
MORPHOLOGY
BEAUTY FUL
N A
ADJECTIVE
![Page 13: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/13.jpg)
13© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure of sentences
SYNTAX
“THIS FLOWER LOOKS BEAUTIFUL”
NounArticleNoun Phrase
AdjectiveVerbVerb Phrase
Sentence
![Page 14: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/14.jpg)
© 2016 Phase214
WHAT DOES LINGUISTICS HAVE TO DO WITH DESIGN SYSTEMS?
![Page 15: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/15.jpg)
© 2016 Phase215
WHAT IF WE DID A SCIENTIFIC STUDY OF A VISUAL LANGUAGE
![Page 16: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/16.jpg)
© 2016 Phase216
A SYSTEM OF COMMUNICATION USING VISUAL ELEMENTS
WIKIPEDIA.ORG/WIKI/VISUAL_LANGUAGE
![Page 17: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/17.jpg)
© 2016 Phase217
A SHARED VOCABULARY FOR DESIGN
WWW.IBM.COM/DESIGN/LANGUAGE
![Page 18: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/18.jpg)
18© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTTP://WWW.INTEL.COM/HTTPS://WWW.HILLARYCLINTON.COM/
Communicating Ideas • Trust • Value • Reliability • Authority
THEY BOTH HAVE A COMMON GOAL
![Page 19: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/19.jpg)
19© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTTPS://WWW.REDHAT.COMHTTP://WWW.MACYS.COM/
Communicating Intention • Click here • Read this first • Use this for navigation • Go here for help
THEY BOTH HAVE A COMMON GOAL
![Page 20: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/20.jpg)
20© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
THEY BOTH SHARE COMMON TRAITSDialects • Word Length • Information Density • Power Colors
![Page 21: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/21.jpg)
21© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
THEY BOTH SHARE COMMON TRAITSJargon • Price Quality Matrix
![Page 22: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/22.jpg)
22© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
THEY BOTH SHARE COMMON TRAITSSlang • Carousel Navigation • Hamburger Menu
HTTP://KENWHEELER.GITHUB.IO/SLICK/
![Page 23: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/23.jpg)
23© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
BOTH CAN BE BROKEN DOWN INTO SMALLER UNITS
![Page 24: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/24.jpg)
24© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
“PHONOLOGY” OF VISUAL LANGUAGE
Layout • Balance • Proportion
Typography • Weight • Scale
Iconography • Interface • Ornamental
Color • Palettes • Tints/Shades • Contrast/Accessibility
Animation • Types • Speed • Appropriate Uses
HTTPS://WWW.IBM.COM/DESIGN/LANGUAGE/FRAMEWORK/VISUAL/LAYOUT
HTTPS://MEDIUM.COM/EIGHTSHAPES-LLC/COLOR-IN-DESIGN-SYSTEMS-A1C80F65FA3 HTTPS://WWW.LIGHTNINGDESIGNSYSTEM.COM/RESOURCES/ICONS/
HTTP://WWW.GOOGLE.COM/DESIGN/SPEC/ANIMATION/RESPONSIVE-INTERACTION.HTML
The organization of “sounds”
![Page 25: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/25.jpg)
25© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure and composition of “words”“MORPHOLOGY” OF VISUAL LANGUAGE
![Page 26: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/26.jpg)
26© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
“MORPHOLOGY” OF VISUAL LANGUAGEThe structure and composition of “words”
![Page 27: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/27.jpg)
27© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure of sentences“SYNTAX” OF VISUAL LANGUAGE
FUN LAUGHS UNDERDOGS FIND A PARK
PARKS R US ABOUT | CONTACT
![Page 28: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/28.jpg)
28© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
“SYNTAX” OF VISUAL LANGUAGE
HTTP://BRADFROST.COM/WP-CONTENT/UPLOADS/2015/12/ATOMIC-GIF-3.GIF
![Page 29: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/29.jpg)
© 2016 Phase229
LINGUISTICS: A SET OF STRUCTURAL RULES GOVERNING THE COMPOSITION OF CLAUSES, PHRASES,
AND WORDS IN ANY GIVEN NATURAL LANGUAGE.
DESIGN SYSTEM
VISUAL
![Page 30: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/30.jpg)
© 2016 Phase230
DESIGN SYSTEMS
![Page 31: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/31.jpg)
31© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
![Page 32: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/32.jpg)
32© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Methodologies • OOCSS (Object Oriented CSS)
RULES<div class="toggle simple"> <div class="toggle-control open"> <h1 class=“toggle-title"> Title 1 </h1> </div> <div class="toggle-details open”> ... </div> ... </div>
Two Main Principles
1.Separation of structure and skin
2.Separation of container and content
![Page 33: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/33.jpg)
33© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Methodologies • SMACSS (Scaleable Modular Architecture for CSS)
RULES
<div class="toggle toggle-simple"> <div class="toggle-control is-active"> <h2 class="toggle-title">Title 1</h2> </div>
<div class="toggle-details is-active"> ... </div> ... </dl>
Folder Structure
1. Base 2. Layout 3. Module 4. State 5. Theme
![Page 34: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/34.jpg)
34© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
<div class="toggle toggle--simple"> <div class="toggle__control toggle__control--active"> <h2 class="toggle__title">Title 1</h2> </div>
<div class="toggle__details toggle__details--active"> ... </div> ... </dl>
Methodologies • BEM (Block Element Modifier)
RULES
![Page 35: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/35.jpg)
35© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULESRules of Thumb
![Page 36: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/36.jpg)
36© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULESRules of Thumb • Single Source of Truth
.blog-feed h1 { color: red; font-size: 32px; }
article .title { font-size: 26px; line-height: 1.2; }
<section class="blog-feed"> <h1>Our Blog</h1> <article> <h1 class="title"> A Blog Title </h1> ... </article> </section>
![Page 37: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/37.jpg)
37© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
<section class="blog-feed"> <h2 class="headline"></h2> </section>
<footer> <h2 class="headline"></h2> </footer>
RULESRules of Thumb • Single Responsibility Principle
.headline { color: red; font-size: 28px; }
.blog-feed .headline { text-transform: uppercase; }
![Page 38: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/38.jpg)
38© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULESRules of Thumb • Flat CSS Selectors.about-contact .hero1 .container > section.features-quarter > section.f-contact h3 { color: red; }
.about-contact .hero1 .container > section.features-quarter > section.f-contact h3.active { color: white; }
![Page 39: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/39.jpg)
39© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULESRules of Thumb • Flat CSS Selectors
.about-contact__title { color: red; }
.about-contact__title--active { color: white; }
![Page 40: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/40.jpg)
40© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULESAsset Guidelines
![Page 41: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/41.jpg)
41© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULESAsset Guidelines • How to create icons
HTTPS://WWW.IBM.COM/DESIGN/LANGUAGE/FRAMEWORK/VISUAL/ICONOGRAPHY
![Page 42: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/42.jpg)
42© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULESAsset Guidelines • Photography dos and don’ts
HTTPS://DESIGN.ATLASSIAN.COM/BRAND/PHOTOGRAPHY
![Page 43: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/43.jpg)
43© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Custom Rules • Visible • Agreed Upon • Actionable
RULES
![Page 44: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/44.jpg)
44© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTML:
ASSETS
![Page 45: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/45.jpg)
45© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTML: • Raw Markup
ASSETS
HTTP://GETBOOTSTRAP.COM/COMPONENTS/
![Page 46: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/46.jpg)
46© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTML: • Templates
ASSETS
HTTPS://GITHUB.COM/DRUPAL/DRUPAL COMMENT.HTML.TWIG
<article{{ attributes.addClass(classes) }}> <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}”> </mark>
<footer class="comment__meta"> {{ user_picture }} <p class="comment__submitted">{{ submitted }}</p>
{% if parent %} <p class="parent visually-hidden">{{ parent }}</p> {% endif %}
{{ permalink }} </footer>
<div{{ content_attributes.addClass('content') }}> {% if title %} {{ title_prefix }} <h3{{ title_attributes }}>{{ title }}</h3> {{ title_suffix }} {% endif %} {{ content }} </div> </article>
![Page 47: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/47.jpg)
47© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTML: • API
ASSETS
HTTPS://RIZZO.LONELYPLANET.COM/STYLEGUIDE/UI-COMPONENTS/CARDS
![Page 48: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/48.jpg)
48© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Linked Assets: • CSS • JavaScript • Fonts • Images/SVGs
ASSETS
![Page 49: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/49.jpg)
49© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
ASSETSBuild Assets: • Sass • JavaScript Modules • Task Runners
![Page 50: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/50.jpg)
50© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
DELIVERING A DESIGN SYSTEMStyle Guides • KSS • Living Style Guide • Hologram
HTTPS://TRULIA.GITHUB.IO/HOLOGRAM/
HTTP://WARPSPIRE.COM/KSS/
HTTPS://LIVINGSTYLEGUIDE.ORG/
![Page 51: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/51.jpg)
51© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
DELIVERING A DESIGN SYSTEMPattern Libraries: • Fractal • Pattern Lab
HTTP://PATTERNLAB.IO/
HTTP://FRCTL.GITHUB.IO/
![Page 52: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/52.jpg)
52© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
DELIVERING A DESIGN SYSTEMRoll Your Own • Lightening Design System • Rizzo (Lonely Planet) • Pattern Kit
HTTPS://RIZZO.LONELYPLANET.COM
HTTPS://WWW.LIGHTNINGDESIGNSYSTEM.COM
HTTPS://GITHUB.COM/PATTERNBUILDER/PATTERN-KIT
![Page 53: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/53.jpg)
© 2016 Phase253
DESIGN SYSTEMSA Design System is a set of rules and assets…
![Page 54: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/54.jpg)
© 2016 Phase254
DESIGN SYSTEMS…define how to express everything a visual language needs
to say
![Page 55: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/55.jpg)
55
FOCUS ON
[Name of country in native language]
Promo
VIDEOS
NAME OF LOCATIONSOCIAL
Technologies Services & support Success stories About Red Hat
CUSTOMERS PARTNERS OPEN SOURCE COMMUNITIES
Executives
Developers
Partners
RHEL
Red Hat Storage Server 2.1
JBoss Fuse Serviceworks
OpenShift Enterprise
Red Hat OpenStack
Red Hat Cloud Infrastructure
My Account
Customer Portal
Resources
Hardware Catalog
Buy online
Contact sales
Find a reseller
Contact us
Feedback
Social
News
Investors
Jobs @ Red Hat
Cool Stuff Store
Videos
Events
INFO FOR FEATURED TOOLS PURCHASE COMMUNICATE ABOUT
COPYRIGHT 2014 RED HAT , INC. Privacy policy ENGLISH[Country specific policy]
CALL TO ACTION
RED HAT CUSTOMERS
99 11 222 33 44
Loreum ipsum dolor sit amet.
Accumsan ut secundum euismod opes nostrud secundum odio nostrud regula ad vulputate.
Headline for featured topicVery brief subtitle lorem ipsum dolor ad potentas in migo astram exculpam preo. Vulputate huic ut fere nimis euismod molior consequat exerci dolore. Facilisi tation aliquip dolor vel duis incassum quis olim aliquip. Veniam exputo immitto praesent tego nostrud consectetuer ex vicis.
EVENTS
MORE NEWS
Red Hat in the press
Video caption
••••
LOCAL CONTACTS
NEWS & EVENTS POPULAR LINKS RESOURCESLOCAL CONTACTS
Red Hat [Location]
Red Hat HQ
Red Hat [Location]
Red Hat HQ
Red Hat [Location]
Red Hat HQ
Red Hat [Location]
Red Hat HQ
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
NAME OF LOCATION
99 11 222 33 44
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
NAME OF LOCATION
99 11 222 33 44
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
NAME OF LOCATION
99 11 222 33 44
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
POPULAR LINKS
Products
CALL TO ACTION
EXPLORE MORE VIDEOS
Data Sheets Whitepapers Case StudiesReference
ArchitecturesBrochures Infographics
MORE RESOURCES
FEATURED RESOURCES
Loreum ipsum dolor sit amet.
Accumsan ut secundum euismod opes nostrud secundum odio nostrud regula ad vulputate.
Your Partners
NEWS
Services
Local Training
Certification sites
Red Hat Enterprise Linux
JBoss Middleware
Cloud computing
Data sheet Case study Reference architecture
Name of the resource. Example: Managing Hybrid Cloud: Diversified Workloads and Unified Cloud Infrastructure Administration
READ MORE
Name of the resource. Example: Managing Hybrid Cloud: Diversified Workloads and Unified Cloud Infrastructure Administration
Name of the resource. Example: Managing Hybrid Cloud: Diversified Workloads and Unified Cloud Infrastructure Administration
READ MORE READ MORE
VIDEO TITLE VIDEO TITLE VIDEO TITLE
CALL TO ACTION
1
Country specific - NEW [detail] 2
2
1Anchor links to frequently accessed content panels. Is not persistent with the scroll. Image behind the hero spot should be from the country specified, rather than standard stock.
2
Country marketing team may use this panel for whatever messaging they require. It may be a single or two column layout.
Headline is optional.
3
Up to three campaign cards. Needs to be able to accommodate several types of imagery (icon, photo). Card three illustrates behavor of CTA button revealed on mouseover. (e.g. Nordic country pages)
This type of panel could accomodate a headline, but it should only be used if all cards have a common theme.
3
4
4
Content in this promo band supplied by HQ
Annotations
PurposeThe detail page for a specific country or region educates users on Red Hat on the culture, product/services offerings, campaigns, and success stories from that area. It is a primary marketing page for that country: driving traffic to contact the country/regional sales team, download targeted resources, or to participate in local events/initiatives.
55 Should include the filter set to the region's
country.
66 Red Hat customers based or operating
heavily in the selected country.
7 7 Similar mortar system to Executive Team. Blocking is the address for that location. Ideally, each location card is a shared content type that is pulled in to this panel.
8 8 For each of these quick links, whenever possible take user to a pre-filtered list of partners/training locations/etc for that country.
99 This uses the Success Story card format.
No more than two rows of three featured resource cards. These can be selected by the country's marketing team, but ideally should simply be a reference to a document (and its associated metadata) in the Resource Library. The icon and resource type are picked up from the particular resource featured.
10
10 Like the filter buttons on the main Resources home page, these link the user off to a results set filtered both by the region and resource type tags. If a particular resource type does not have entries for that region, ideally its selector box should not display here.
FOCUS ON
[Name of country in native language]
Promo
VIDEOS
NAME OF LOCATIONSOCIAL
Technologies Services & support Success stories About Red Hat
CUSTOMERS PARTNERS OPEN SOURCE COMMUNITIES
Executives
Developers
Partners
RHEL
Red Hat Storage Server 2.1
JBoss Fuse Serviceworks
OpenShift Enterprise
Red Hat OpenStack
Red Hat Cloud Infrastructure
My Account
Customer Portal
Resources
Hardware Catalog
Buy online
Contact sales
Find a reseller
Contact us
Feedback
Social
News
Investors
Jobs @ Red Hat
Cool Stuff Store
Videos
Events
INFO FOR FEATURED TOOLS PURCHASE COMMUNICATE ABOUT
COPYRIGHT 2014 RED HAT , INC. Privacy policy ENGLISH[Country specific policy]
CALL TO ACTION
RED HAT CUSTOMERS
99 11 222 33 44
Loreum ipsum dolor sit amet.
Accumsan ut secundum euismod opes nostrud secundum odio nostrud regula ad vulputate.
Headline for featured topicVery brief subtitle lorem ipsum dolor ad potentas in migo astram exculpam preo. Vulputate huic ut fere nimis euismod molior consequat exerci dolore. Facilisi tation aliquip dolor vel duis incassum quis olim aliquip. Veniam exputo immitto praesent tego nostrud consectetuer ex vicis.
EVENTS
MORE NEWS
Red Hat in the press
Video caption
••••
LOCAL CONTACTS
NEWS & EVENTS POPULAR LINKS RESOURCESLOCAL CONTACTS
Red Hat [Location]
Red Hat HQ
Red Hat [Location]
Red Hat HQ
Red Hat [Location]
Red Hat HQ
Red Hat [Location]
Red Hat HQ
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
NAME OF LOCATION
99 11 222 33 44
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
NAME OF LOCATION
99 11 222 33 44
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
NAME OF LOCATION
99 11 222 33 44
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
POPULAR LINKS
Products
CALL TO ACTION
EXPLORE MORE VIDEOS
Data Sheets Whitepapers Case StudiesReference
ArchitecturesBrochures Infographics
MORE RESOURCES
FEATURED RESOURCES
Loreum ipsum dolor sit amet.
Accumsan ut secundum euismod opes nostrud secundum odio nostrud regula ad vulputate.
Your Partners
NEWS
Services
Local Training
Certification sites
Red Hat Enterprise Linux
JBoss Middleware
Cloud computing
Data sheet Case study Reference architecture
Name of the resource. Example: Managing Hybrid Cloud: Diversified Workloads and Unified Cloud Infrastructure Administration
READ MORE
Name of the resource. Example: Managing Hybrid Cloud: Diversified Workloads and Unified Cloud Infrastructure Administration
Name of the resource. Example: Managing Hybrid Cloud: Diversified Workloads and Unified Cloud Infrastructure Administration
READ MORE READ MORE
VIDEO TITLE VIDEO TITLE VIDEO TITLE
CALL TO ACTION
1
Country specific - NEW [detail] 2
2
1Anchor links to frequently accessed content panels. Is not persistent with the scroll. Image behind the hero spot should be from the country specified, rather than standard stock.
2
Country marketing team may use this panel for whatever messaging they require. It may be a single or two column layout.
Headline is optional.
3
Up to three campaign cards. Needs to be able to accommodate several types of imagery (icon, photo). Card three illustrates behavor of CTA button revealed on mouseover. (e.g. Nordic country pages)
This type of panel could accomodate a headline, but it should only be used if all cards have a common theme.
3
4
4
Content in this promo band supplied by HQ
Annotations
PurposeThe detail page for a specific country or region educates users on Red Hat on the culture, product/services offerings, campaigns, and success stories from that area. It is a primary marketing page for that country: driving traffic to contact the country/regional sales team, download targeted resources, or to participate in local events/initiatives.
55 Should include the filter set to the region's
country.
66 Red Hat customers based or operating
heavily in the selected country.
7 7 Similar mortar system to Executive Team. Blocking is the address for that location. Ideally, each location card is a shared content type that is pulled in to this panel.
8 8 For each of these quick links, whenever possible take user to a pre-filtered list of partners/training locations/etc for that country.
99 This uses the Success Story card format.
No more than two rows of three featured resource cards. These can be selected by the country's marketing team, but ideally should simply be a reference to a document (and its associated metadata) in the Resource Library. The icon and resource type are picked up from the particular resource featured.
10
10 Like the filter buttons on the main Resources home page, these link the user off to a results set filtered both by the region and resource type tags. If a particular resource type does not have entries for that region, ideally its selector box should not display here.
![Page 56: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/56.jpg)
56
![Page 57: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/57.jpg)
57
![Page 58: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/58.jpg)
58HTTPS://TWITTER.COM/SOPHSHEPHERD/STATUS/725075564445483012
DESIGN SYSTEMS ARE THE FUTURE OF THE WEB
![Page 59: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/59.jpg)
59
![Page 60: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/60.jpg)
© 2016 Phase260
HOW DO WE GET OUR DESIGN SYSTEM INTO DRUPAL?
![Page 61: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/61.jpg)
© 2016 Phase261
HOW DO WE GET OUR DESIGN SYSTEM INTO DRUPAL?
Why haven’t we already done this?
![Page 62: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/62.jpg)
62© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
DIRTY DATA MODELS
Model
$title
function(title)
<h1>Title</h1>
![Page 63: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/63.jpg)
63© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Solved by D8
DIRTY DATA MODELS
Model
{{title}}
{{image}}
{{content}}
![Page 64: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/64.jpg)
64© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
TYRANNY OF THE MODEL VIEW PARADIGM
Model
{{title}}
{{image}}
{{content}}
View
![Page 65: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/65.jpg)
65© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Enter Atomic Design
TYRANNY OF THE MODEL VIEW PARADIGM
Model
{{title}}
{{image}}
{{content}}
View
TitleTemplate
ImageTemplate
ContentTemplate
![Page 66: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/66.jpg)
66© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Model
{{title}}
{{image}}
{{content}}
View
TitleTemplate
ImageTemplate
ContentTemplate
{{headline}}
{{image}}
{{align}}
{{teaser}}
{{body}}
MODEL AND VIEW DON’T SPEAK THE SAME LANGUAGE
![Page 67: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/67.jpg)
67© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Model
{{title}}
{{image}}
{{content}}
View
TitleTemplate
ImageTemplate
ContentTemplate
{{headline}}
{{image}}
{{align}}
{{teaser}}
{{body}}
MODEL AND VIEW DON’T SPEAK THE SAME LANGUAGE
Presenter
FILTERRIGHT
Say hello to the Presenter
![Page 68: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/68.jpg)
68© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% extends 'card.twig' %}
{% block body %} {% include 'title.twig' with {'headline': title} only %}
{% include 'image.twig' with { 'image': image, 'align': 'right'} only %}
{% include 'content.twig' with { 'teaser': content|truncate(35), 'body': content} only %} {% endblock %}
A Basic Presenter
![Page 69: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/69.jpg)
69© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% include 'title.twig' with {'headline': title} only %}
Including the TitlePresenter
{{title}} {{headline}}
![Page 70: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/70.jpg)
70© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% include 'image.twig' with { 'image': image, 'align': 'right'} only %}
Including the ImagePresenter
{{title}} {{headline}}
{{image}}{{image}}
RIGHT {{align}}
![Page 71: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/71.jpg)
71© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTERIncluding the Content
{% include 'content.twig' with { 'body': content, 'teaser': content|truncate(35)} only %}
PresenterRIGHT
{{title}}
{{image}}
{{headline}}
{{image}}
{{align}}{{teaser}}FILTER{{content}}{{body}}
![Page 72: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/72.jpg)
72© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% extends 'card.twig' %}
{% block body %} … {% endblock %}
{# card.twig #} <div class="card"> {% block body %}
{% endblock %} </div>
Using Extends: Keeping the presenter pure
![Page 73: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/73.jpg)
73© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTERA Basic Presenter
{% extends 'card.twig' %}
{% block body %} {% include 'title.twig' with {'headline': title} only %}
{% include 'image.twig' with { 'image': image, 'align': 'right'} only %}
{% include 'content.twig' with { 'teaser': content|truncate(35), 'body': content} only %} {% endblock %}
![Page 74: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/74.jpg)
74© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTERDefining the Model: Creating an API
{ "type": "object", "properties": { "title": { "type": "string", }, "image": { "type": "string", }, "content": { "type": "string", "format": "html" } }, "required": ["title", "image", "content"] }
Model
{{title}}
{{image}}
{{content}}
![Page 75: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/75.jpg)
75© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
• Prototype your entire design system in a static environment • JSON Schemas • Twig
• Import your MVP into D7 with a single Drush command. • Creates a Paragraph bundle for each Model • Combine Paragraphs to make new content types
• Render your clean Model through standard Twig templates
INTRODUCING PATTERN BUILDER
![Page 76: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/76.jpg)
76© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Come to room 291 right after this talk for a BOF/demo!
drupal.org/project/patternbuilder github.com/patternbuilder
INTRODUCING PATTERN BUILDER
![Page 77: Road Runner Rules: More What You’d Call “Guidelines” for Design Systems](https://reader031.vdocuments.site/reader031/viewer/2022011722/58efb2381a28ab77728b4621/html5/thumbnails/77.jpg)
77
So How Was It? - Tell Us What You ThinkEvaluate this session -
Thanks!