Documenting an A T O M I C Design System with Jekyll Presented by @toddmoy from @viget
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Documenting an
A T O M I CDesign System with Jekyll
Presented by @toddmoy from @viget
BACKGROUND
handoff to their tech team
3
AT0MIC DESIGN
ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
4
DOCUMENTATION ISSUES
DesignSystem_20150120.pdfDesignSystem_20141218.pdfDesignSystem_20141205.pdfDesignSystem_20141120.pdfDesignSystem_20141101.pdfDesignSystem_20141031.pdfDesignSystem_20151010.pdf
FORMAT NAVIGATION & USABILITY VERSIONING
6
JEKYLL
8
A Static Site Generator
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
BUILT
JEKYLLWITH
22
How we used it
PROCESS
OMNIGRAFFLEINVISION
basecampJEKYLL
11
How we used it
STRUCTURE
12
How we used it
EDIT ING
13
How we used it
Purpose & UsAGE
SAMPLE SCREENS
FUNCTIONAL REQUIREMENTS
EDITORIAL Requirements
STYLISTIC GUIDELINES
INCLUDED COMPONENTS &
ELEMENTS
CONTENT
15
How we used it
COMMITS
16
How we used it
PULL REQUESTS
17
How we used it
HOSTING
18
FUTURE PLANS?
19
Thanks y’all!Presented by @toddmoy from @viget
21
Related Documents
