$30 off During Our Annual Pro Sale. View Details »

Documenting an Atomic Design System with Jekyll

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
100
Misdirection
Avatar for Todd Moy toddmoy
0
130
Magic
Avatar for Todd Moy toddmoy
0
230
The Secret Life of Usability (AIGA)
Avatar for Todd Moy toddmoy
6
520
The Secret Life of Usability
Avatar for Todd Moy toddmoy
11
600
Alternate Reality Games
Avatar for Todd Moy toddmoy
1
190
Brain Bugs
Avatar for Todd Moy toddmoy
3
200

Other Decks in Design

See All in Design
Marpで推しCSSスライドを作ろう！ / marp-with-favorite-css
Avatar for ふじえもん fujiemon
0
760
mento Design Team Portfolio
Avatar for mento _official mento0fficial
2
1.1k
Character Experience AI 〜 AIキャラクターのつくりかた 〜
Avatar for 株式会社スマートバンク smartbank
1
430
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
2.7k
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
150
21 Ways to Call American Airlines Customer Care Full Guide USA
Avatar for Sonny americanhub
0
320
デザインシステムの「種」を使って、受託開発を加速させる
Avatar for akane akane___ui
0
12k
身の丈に合うところから始めるデザインシステム
Avatar for Tommy tommytommy30
1
110
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
780
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
920k
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
0
230
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.4k

Featured

See All Featured
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
30
5.7k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.1k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.8k
Side Projects
Avatar for Sacha Greif sachag
455
43k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k

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