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

Documenting an Atomic Design System with Jekyll

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Todd Moy Todd Moy
July 24, 2015
Design
1
370

Documenting an Atomic Design System with Jekyll

A lightning talk presented at Explore UX / TriUPA.

Avatar for Todd Moy

Todd Moy

July 24, 2015
Tweet

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
230
The Secret Life of Usability (AIGA)
Avatar for Todd Moy toddmoy
6
530
The Secret Life of Usability
Avatar for Todd Moy toddmoy
11
600
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
Connpass-Xperia_Camera_App_by_HCD.pdf
Avatar for ソニー株式会社 sony
0
490
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
840
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
2
250
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
300
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
200
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
130
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
7.1k
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
550
DMMデザイナーの “AI活用の現在と未来”
Avatar for TakumaS takumasaito
1
450
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
1
410
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
870

Featured

See All Featured
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
120
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
54
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
330
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
240
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
270
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
87
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
760
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
71k

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