Download to read offline
Uploaded byTodd Moy
Documenting an Atomic Design System with Jekyll
This document discusses using Jekyll to document an atomic design system. It introduces atomic design and common documentation issues around formatting, navigation, usability, and versioning. It then explains how Jekyll is a static site generator that uses Markdown files and templates to generate static HTML and CSS pages. The rest of the document outlines how Jekyll was used to structure, edit, host, and improve the design system documentation through processes like Omnigraffle, InVision, Basecamp, commits and pull requests. Future plans are also mentioned.
![ceramic-art-and-pottery [Autosaved].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/ceramic-art-and-potteryautosaved-260113113456-35c55ddb-thumbnail.jpg?width=640&height=640&fit=bounds)
Documenting an Atomic Design System with Jekyll
- 1. Documenting an A TO M I C Design System with Jekyll Presented by @toddmoy from @viget
- 2. BACKGROUND handoff to theirtech team 3
- 3. AT0MIC DESIGN ATOMS MOLECULESORGANISMS TEMPLATES PAGES 4
- 4.
- 5. JEKYLL 8 A Static SiteGenerator
- 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.
- 8. How we usedit PROCESS OMNIGRAFFLE INVISION basecamp JEKYLL 11
- 9. How we usedit STRUCTURE 12
- 10. How we usedit EDITING 13
- 11. How we usedit Purpose & UsAGE SAMPLE SCREENS FUNCTIONAL REQUIREMENTS EDITORIAL Requirements STYLISTIC GUIDELINES INCLUDED COMPONENTS & ELEMENTS CONTENT 15
- 12. How we usedit COMMITS 16
- 13. How we usedit PULL REQUESTS 17
- 14. How we usedit HOSTING 18
- 15.
- 16. Thanks y’all! Presented by@toddmoy from @viget 21