Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Documenting an Atomic Design System with Jekyll
Search
Todd Moy
July 24, 2015
Design
1
330
Documenting an Atomic Design System with Jekyll
A lightning talk presented at Explore UX / TriUPA.
Todd Moy
July 24, 2015
Tweet
Share
More Decks by Todd Moy
See All by Todd Moy
Wild Mushroom
toddmoy
1
91
Misdirection
toddmoy
0
120
Magic
toddmoy
0
210
The Secret Life of Usability (AIGA)
toddmoy
6
510
The Secret Life of Usability
toddmoy
11
580
Alternate Reality Games
toddmoy
1
170
Brain Bugs
toddmoy
3
180
Other Decks in Design
See All in Design
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
970
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
310
PRDがデザインプロセスを高速化した話
tooomo
1
330
Jeremy's First Day
myates3
1
130
Wishing Star Comic
torije
2
1.2k
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
190
Sociotechnical design for software and human systems
xinyao
2
500
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
150
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
450
Designing UIs without a UI designer
strongeron
0
130
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
290
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Side Projects
sachag
451
41k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Building Adaptive Systems
keathley
32
1.9k
Producing Creativity
orderedlist
PRO
338
39k
Clear Off the Table
cherdarchuk
85
310k
We Have a Design System, Now What?
morganepeng
44
6.8k
What's new in Ruby 2.0
geeforr
337
31k
Transcript
Documenting an A T O M I C Design System
with Jekyll Presented by @toddmoy from @viget
BACKGROUND handoff to their tech team 3
AT0MIC DESIGN ATOMS MOLECULES ORGANISMS TEMPLATES PAGES 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
JEKYLL 8 A Static Site Generator
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
BUILT JEKYLL WITH 22
How we used it PROCESS OMNIGRAFFLE INVISION basecamp JEKYLL 11
How we used it STRUCTURE 12
How we used it EDITING 13
How we used it Purpose & UsAGE SAMPLE SCREENS FUNCTIONAL
REQUIREMENTS EDITORIAL Requirements STYLISTIC GUIDELINES INCLUDED COMPONENTS & ELEMENTS CONTENT 15
How we used it COMMITS 16
How we used it PULL REQUESTS 17
How we used it HOSTING 18
FUTURE PLANS? 19
Thanks y’all! Presented by @toddmoy from @viget 21