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
99
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
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
960
1年目のクリエイターがつくりあげた！採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
490
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
「Figmaプラグイン開発してみた」＠スタメンデザイナーオープン勉強会
kiyoshifuwa
0
100
なぜ今必要？Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
530
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
380
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
130
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
260
Next Door Stranger - Final Character Designs
reidneedssleep
PRO
0
140
横断組織デザイナーの働き方
mixi_design
PRO
0
310
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
330
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k

Featured

See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A designer walks into a library…
pauljervisheath
205
24k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
A better future with KSS
kneath
238
17k
Producing Creativity
orderedlist
PRO
343
39k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
YesSQL, Process and Tooling at Scale
rocio
171
14k
How STYLIGHT went responsive
nonsquared
96
5.3k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k
Into the Great Unknown - MozCon
thekraken
34
1.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