Submit Search
Upload
Documenting an Atomic Design System with Jekyll
•
3 likes
•
1,315 views
Todd Moy
Follow
A lightning talk presented at Explore UX / TriUXPA
Read less
Read more
Design
Report
Share
Report
Share
1 of 16
Download Now
Download to read offline
Recommended
Atomic design React Nova Presentation
Atomic design React Nova Presentation
Steve Zyglowicz
Data science for infrastructure dev week 2022
Data science for infrastructure dev week 2022
ZainAsgar1
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
Renato Iwashima
An introduction to Emulsify
An introduction to Emulsify
valuebound
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
Nadya Rodionenko
Atomic Design con Pattern Lab
Atomic Design con Pattern Lab
Mauricio Angulo Sillas
Atomic design
Atomic design
Brad Frost
React Storybook, Atomic Design, and ITCSS
React Storybook, Atomic Design, and ITCSS
Trevor Pierce
More Related Content
What's hot
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Jasper Moelker
Building the Media Block in ReactJS
Building the Media Block in ReactJS
Nicole Sullivan
Atomic Design
Atomic Design
Rey Mayson
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)
webdagene
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Brad Frost
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
Brad Frost
Adventures in Atomic Design
Adventures in Atomic Design
Andrew Jones
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
Dave Olsen
Use atomic design ftw
Use atomic design ftw
GiantJohnPepper
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Brad Frost
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
Stephen Hay
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
Dave Olsen
The Server Side of Responsive Web Design
The Server Side of Responsive Web Design
Dave Olsen
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
Future Insights
Beginning WordPress Plugin Development
Beginning WordPress Plugin Development
Aizat Faiz
Battle for the Body Field (DrupalCon)
Battle for the Body Field (DrupalCon)
Jeff Eaton
The Battle For The Body Field
The Battle For The Body Field
Jeff Eaton
Responsive webdesign
Responsive webdesign
Bart De Waele
Plugins at WordCamp Phoenix
Plugins at WordCamp Phoenix
Andrew Ryno
Hardening WordPress - SAScon Manchester 2013 (WordPress Security)
Hardening WordPress - SAScon Manchester 2013 (WordPress Security)
Bastian Grimm
What's hot
(20)
Voorhoede - Front-end architecture
Voorhoede - Front-end architecture
Building the Media Block in ReactJS
Building the Media Block in ReactJS
Atomic Design
Atomic Design
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
Atomic Design - BDConf Nashville, 2013
Atomic Design - BDConf Nashville, 2013
Adventures in Atomic Design
Adventures in Atomic Design
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
Use atomic design ftw
Use atomic design ftw
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Server Side of Responsive Web Design
The Server Side of Responsive Web Design
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
Beginning WordPress Plugin Development
Beginning WordPress Plugin Development
Battle for the Body Field (DrupalCon)
Battle for the Body Field (DrupalCon)
The Battle For The Body Field
The Battle For The Body Field
Responsive webdesign
Responsive webdesign
Plugins at WordCamp Phoenix
Plugins at WordCamp Phoenix
Hardening WordPress - SAScon Manchester 2013 (WordPress Security)
Hardening WordPress - SAScon Manchester 2013 (WordPress Security)
Viewers also liked
Alternate Reality Games
Alternate Reality Games
Todd Moy
Memorial Sloan Kettering: Adventures in Drupal 8
Memorial Sloan Kettering: Adventures in Drupal 8
Phase2
Magic: What Web Designers Can Learn from Magicians
Magic: What Web Designers Can Learn from Magicians
Todd Moy
Atomic design
Atomic design
Bryan Wengren
Better. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC Design
jennifer gergen
The New Design Workflow
The New Design Workflow
Phase2
Building an Atomic Design System
Building an Atomic Design System
Tim Wright
Wild Mushrooms
Wild Mushrooms
Todd Moy
Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016
Matt Vanderpol
Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)
Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)
Jason Kalawe
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
die.agilen GmbH
Design in Tech Report 2017
Design in Tech Report 2017
John Maeda
Viewers also liked
(12)
Alternate Reality Games
Alternate Reality Games
Memorial Sloan Kettering: Adventures in Drupal 8
Memorial Sloan Kettering: Adventures in Drupal 8
Magic: What Web Designers Can Learn from Magicians
Magic: What Web Designers Can Learn from Magicians
Atomic design
Atomic design
Better. Faster. UXier. — AToMIC Design
Better. Faster. UXier. — AToMIC Design
The New Design Workflow
The New Design Workflow
Building an Atomic Design System
Building an Atomic Design System
Wild Mushrooms
Wild Mushrooms
Generate a Living Style Guide from CSS - CSSDevConf 2016
Generate a Living Style Guide from CSS - CSSDevConf 2016
Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)
Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Design in Tech Report 2017
Design in Tech Report 2017
Similar to Documenting an Atomic Design System with Jekyll
A (very) opinionated guide to MSBuild and Project Files
A (very) opinionated guide to MSBuild and Project Files
David Wengier
AngularJS for Web and Mobile
AngularJS for Web and Mobile
Rocket Software
OA Framwork Presentation.pptx
OA Framwork Presentation.pptx
wadierefky1
Amp Up Your Visual Studio Productivity
Amp Up Your Visual Studio Productivity
Chris Eargle
Polymer in production : we did it!
Polymer in production : we did it!
Fastory
Mstr meetup
Mstr meetup
Bhavani Akunuri
Robert polak candidate coversheet-2018-3
Robert polak candidate coversheet-2018-3
Robert Polak
Cisco Cloupia uic product overview and demo presentation
Cisco Cloupia uic product overview and demo presentation
xKinAnx
2013 10-10 selenium presentation to ocjug
2013 10-10 selenium presentation to ocjug
Philip Schlesinger
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB
DevRock #01 What's new ASP.net 5
DevRock #01 What's new ASP.net 5
Chaowlert Chaisrichalermpol
22nd Athens Big Data Meetup - 1st Talk - MLOps Workshop: The Full ML Lifecycl...
22nd Athens Big Data Meetup - 1st Talk - MLOps Workshop: The Full ML Lifecycl...
Athens Big Data
Bi apps 11117
Bi apps 11117
Ravi Kumar Lanke
Oracle Enterprise 2.0 & Business Applications
Oracle Enterprise 2.0 & Business Applications
Jaime Cid
JAX London 2021: Jumpstart Your Cloud Native Development: An Overview of Prac...
JAX London 2021: Jumpstart Your Cloud Native Development: An Overview of Prac...
Daniel Bryant
SYSPIC
SYSPIC
Mohamed Sahar
2012 05-10 fia practical problems in mobile web final
2012 05-10 fia practical problems in mobile web final
Stephan Haux
AWValuePitch, 7_12
AWValuePitch, 7_12
Carlos F. Camargo, Ph.D. - Realtor, CalBRE #01988431
How to Webpack your Django!
How to Webpack your Django!
David Gibbons
Cache Me If You Can - Tuist Quick Start .pptx
Cache Me If You Can - Tuist Quick Start .pptx
RonanOCiosoig1
Similar to Documenting an Atomic Design System with Jekyll
(20)
A (very) opinionated guide to MSBuild and Project Files
A (very) opinionated guide to MSBuild and Project Files
AngularJS for Web and Mobile
AngularJS for Web and Mobile
OA Framwork Presentation.pptx
OA Framwork Presentation.pptx
Amp Up Your Visual Studio Productivity
Amp Up Your Visual Studio Productivity
Polymer in production : we did it!
Polymer in production : we did it!
Mstr meetup
Mstr meetup
Robert polak candidate coversheet-2018-3
Robert polak candidate coversheet-2018-3
Cisco Cloupia uic product overview and demo presentation
Cisco Cloupia uic product overview and demo presentation
2013 10-10 selenium presentation to ocjug
2013 10-10 selenium presentation to ocjug
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
DevRock #01 What's new ASP.net 5
DevRock #01 What's new ASP.net 5
22nd Athens Big Data Meetup - 1st Talk - MLOps Workshop: The Full ML Lifecycl...
22nd Athens Big Data Meetup - 1st Talk - MLOps Workshop: The Full ML Lifecycl...
Bi apps 11117
Bi apps 11117
Oracle Enterprise 2.0 & Business Applications
Oracle Enterprise 2.0 & Business Applications
JAX London 2021: Jumpstart Your Cloud Native Development: An Overview of Prac...
JAX London 2021: Jumpstart Your Cloud Native Development: An Overview of Prac...
SYSPIC
SYSPIC
2012 05-10 fia practical problems in mobile web final
2012 05-10 fia practical problems in mobile web final
AWValuePitch, 7_12
AWValuePitch, 7_12
How to Webpack your Django!
How to Webpack your Django!
Cache Me If You Can - Tuist Quick Start .pptx
Cache Me If You Can - Tuist Quick Start .pptx
Recently uploaded
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
RufusGleave
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
JoshHolmes21
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
utariworks
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
ResDraft
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
aimonayesha7
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
johannesrothkegel
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
Vaishnavi R
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
TeeFusion
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
jfedou2105
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
Peter139483
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
OmarSelim27
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
TeeFusion
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
krc0yvm5
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
CaydenIngman
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
ssuseraaa1581
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
aimonayesha7
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
TeeFusion
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
ssuseraaa1581
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
studiotelon
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
aimonayesha7
Recently uploaded
(20)
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
Documenting an Atomic Design System with Jekyll
1.
Documenting an A T
O M I C Design System with Jekyll Presented by @toddmoy from @viget
2.
BACKGROUND handoff to their
tech team 3
3.
AT0MIC DESIGN ATOMS MOLECULES
ORGANISMS TEMPLATES PAGES 4
4.
DOCUMENTATION ISSUES DesignSystem_20150120.pdf DesignSystem_20141218.pdf DesignSystem_20141205.pdf DesignSystem_20141120.pdf DesignSystem_20141101.pdf DesignSystem_20141031.pdf DesignSystem_20151010.pdf FORMAT NAVIGATION
& USABILITY VERSIONING 6
5.
JEKYLL 8 A Static Site
Generator
6.
JEKYLL MARKDOWN CONTENT static web pages #
Title Integer posuere erat a ante venenatis dapibus posuere velit aliquet. * Lorem ipsum * Dolor site amet … HTML + CSS TEMPLATES <%= partial(‘header’) %> <body> <%= yield => </body> <%= partial(‘footer’) %> 9
7.
BUILT JEKYLL WITH 22
8.
How we used
it PROCESS OMNIGRAFFLE INVISION basecamp JEKYLL 11
9.
How we used
it STRUCTURE 12
10.
How we used
it EDITING 13
11.
How we used
it Purpose & UsAGE SAMPLE SCREENS FUNCTIONAL REQUIREMENTS EDITORIAL Requirements STYLISTIC GUIDELINES INCLUDED COMPONENTS & ELEMENTS CONTENT 15
12.
How we used
it COMMITS 16
13.
How we used
it PULL REQUESTS 17
14.
How we used
it HOSTING 18
15.
FUTURE PLANS? 19
16.
Thanks y’all! Presented by
@toddmoy from @viget 21
Download Now