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

Documenting an Atomic Design System with Jekyll

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
PAMPHLET.pdf
Avatar for M-HAND,Inc. mhand01
0
1k
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
Avatar for Kimura Atsunobu a2k
1
230
デザインの文脈を理解する：エンジニアがデザインカンファレンスに参加して得た学びと気づき
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
240
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
Avatar for NishaMe nishame
1
1.1k
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
440
1000人規模の組織でデザインハーネスを導入するための第一歩
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
2
2.5k
Техники структурирования беседы с собой, заказчиком и командо
Avatar for Andrew Shapiro ashapiro
0
200
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
770
【優秀賞＋特別賞】くまモン食いしん坊弁当「くまモンの魔法の柑橘弁当」最終審査資料
Avatar for Shoko shoko_seven11
0
220
hicard_credential_202601
Avatar for hicard hicard
0
260
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
180
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
230

Featured

See All Featured
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
440
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
8.7k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
460
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.7k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
220
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
450
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
170
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
520

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