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

Documenting an Atomic Design System with Jekyll

Todd Moy
July 24, 2015
Design
1
360

Documenting an Atomic Design System with Jekyll

A lightning talk presented at Explore UX / TriUPA.

Todd Moy

July 24, 2015
Tweet

More Decks by Todd Moy

See All by Todd Moy
Wild Mushroom
toddmoy
1
100
Misdirection
toddmoy
0
130
Magic
toddmoy
0
220
The Secret Life of Usability (AIGA)
toddmoy
6
520
The Secret Life of Usability
toddmoy
11
590
Alternate Reality Games
toddmoy
1
190
Brain Bugs
toddmoy
3
190

Other Decks in Design

See All in Design
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
620
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ！
cremacrema
3
3k
世界中のチームワークを どうデザインしているのか
ka3zu1ma10
0
280
Illustrator2025がやってきた！私が好きな新機能
hamko1114
0
110
Museum Heist
allykae
0
120
ENEOS社事例｜アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
セブンデックス カルチャーブック
sevendex
0
1.7k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
LayerX DesignersDeck
layerx
PRO
0
2.5k

Featured

See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
We Have a Design System, Now What?
morganepeng
51
7.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
GitHub's CSS Performance
jonrohan
1030
460k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
4 Signs Your Business is Dying
shpigford
182
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k

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