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
370
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
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
TUNAG BOOK 2024
Avatar for 株式会社スタメン stmn
PRO
0
1.5k
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
630
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
240
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
4
3k
図じゃなく言語で描く - Common Ground for Design AI Operations.
Avatar for Kazuki Ikeda kazukiikeda
2
750
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
Avatar for mewmo mewmo
0
200
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
0
1.9k
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
590
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.4k
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.3k
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
260
改正JISを見据えた、企業のアクセシビリティ対応ロードマップ
Avatar for Yu Morita securecat
1
290

Featured

See All Featured
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
92
How to make the Groovebox
Avatar for あそなす asonas
2
2.1k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
460
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
660
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
6.2k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.2k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
230

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