Documenting an Atomic Design System with Jekyll

Documenting an A T O M I C Design 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.pdf DesignSystem_20141218.pdf DesignSystem_20141205.pdf DesignSystem_20141120.pdf DesignSystem_20141101.pdf DesignSystem_20141031.pdf DesignSystem_20151010.pdf FORMAT
NAVIGATION & USABILITY VERSIONING 6

JEKYLL 8 A Static Site Generator

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

BUILT JEKYLL WITH 22

How we used it PROCESS OMNIGRAFFLE INVISION basecamp JEKYLL 11

How we used it STRUCTURE 12

How we used it EDITING 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

Documenting an Atomic Design System with Jekyll

Documenting an Atomic Design System with Jekyll

Todd Moy

More Decks by Todd Moy

Other Decks in Design

Featured

Transcript