Documenting an Atomic Design System with Jekyll
Transcript of Documenting an Atomic Design System with Jekyll
![Page 1: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/1.jpg)
Documenting an
A T O M I CDesign System with Jekyll
Presented by @toddmoy from @viget
![Page 2: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/2.jpg)
BACKGROUND
handoff to their tech team
3
![Page 3: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/3.jpg)
AT0MIC DESIGN
ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
4
![Page 4: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/4.jpg)
DOCUMENTATION ISSUES
DesignSystem_20150120.pdfDesignSystem_20141218.pdfDesignSystem_20141205.pdfDesignSystem_20141120.pdfDesignSystem_20141101.pdfDesignSystem_20141031.pdfDesignSystem_20151010.pdf
FORMAT NAVIGATION & USABILITY VERSIONING
6
![Page 5: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/5.jpg)
JEKYLL
8
A Static Site Generator
![Page 6: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/6.jpg)
JEKYLLMARKDOWN
CONTENTstatic
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
![Page 7: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/7.jpg)
BUILT
JEKYLLWITH
22
![Page 8: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/8.jpg)
How we used it
PROCESS
OMNIGRAFFLEINVISION
basecampJEKYLL
11
![Page 9: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/9.jpg)
How we used it
STRUCTURE
12
![Page 10: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/10.jpg)
How we used it
EDIT ING
13
![Page 11: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/11.jpg)
How we used it
Purpose & UsAGE
SAMPLE SCREENS
FUNCTIONAL REQUIREMENTS
EDITORIAL Requirements
STYLISTIC GUIDELINES
INCLUDED COMPONENTS &
ELEMENTS
CONTENT
15
![Page 12: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/12.jpg)
How we used it
COMMITS
16
![Page 13: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/13.jpg)
How we used it
PULL REQUESTS
17
![Page 14: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/14.jpg)
How we used it
HOSTING
18
![Page 15: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/15.jpg)
FUTURE PLANS?
19
![Page 16: Documenting an Atomic Design System with Jekyll](https://reader033.fdocuments.in/reader033/viewer/2022042611/58f164211a28abd6428b45fd/html5/thumbnails/16.jpg)
Thanks y’all!Presented by @toddmoy from @viget
21