Documenting an Atomic Design System with Jekyll

A lightning talk presented at Explore UX / TriUPA.

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