Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Documenting an Atomic Design System with Jekyll

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Todd Moy Todd Moy
July 24, 2015
Design
380
1

Documenting an Atomic Design System with Jekyll

A lightning talk presented at Explore UX / TriUPA.

Avatar for Todd Moy

Todd Moy

July 24, 2015

More Decks by Todd Moy

See All by Todd Moy
Wild Mushroom
Avatar for Todd Moy toddmoy
1
110
Misdirection
Avatar for Todd Moy toddmoy
0
140
Magic
Avatar for Todd Moy toddmoy
0
240
The Secret Life of Usability (AIGA)
Avatar for Todd Moy toddmoy
6
540
The Secret Life of Usability
Avatar for Todd Moy toddmoy
11
620
Alternate Reality Games
Avatar for Todd Moy toddmoy
1
200
Brain Bugs
Avatar for Todd Moy toddmoy
3
210

Other Decks in Design

See All in Design
社長の宿題への回答 「新卒×AI」が生み出す価値
Avatar for さき saki822
2
170
工房としてのAI ── デザイナー、作家、ビルダー
Avatar for hiranotomoki hiranotomoki
0
310
タイル紹介サイト「タイルだもんで」
Avatar for しま calpin
0
150
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
260
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.3k
2026年5月24日Redesigner Career Jamご参加者様ご案内資料
Avatar for BASE, Inc. base
PRO
0
200
Frontier
Avatar for Renny Wang rwang05
0
170
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
Avatar for Yu Morita securecat
1
220
hicard_credential_202601
Avatar for hicard hicard
0
250
Spacemarket Brand Guide
Avatar for Spacemarket spacemarket
2
1.1k
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
490
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
1.2k

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
880
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.8k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
220
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
330
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
460
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
250
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.2k
Visualization
Avatar for Eitan Lees eitanlees
152
17k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
430

Transcript

  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