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
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
450
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
210
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
280
コンテンツ作成者の体験を設計する
Avatar for Chiaki Okamoto chiilog
0
190
全員がアウトプットを出せる時代、 誰を採用する?
Avatar for NishaMe nishame
0
580
怖くないアクセシビリティ -カウンターカルチャーとしてのアッカン東京-
Avatar for Yu Morita securecat
1
200
30分でわかるインサイトマネジメント（2025年12月バージョン）
Avatar for Centou centou
1
670
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
1.4k
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
200
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
7
5.6k
CULTURE DECK／Creative Director
Avatar for M-HAND,Inc. mhand01
0
1.3k
もう迷わない！“なんとなく”を卒業するフォントの選び方【村田俊英】
Avatar for 村田俊英 toshihidemurata
0
650

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.5k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
400
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
200
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
240
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.3k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
340
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k

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