Documenting an Atomic Design System with Jekyll

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