Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Documenting an Atomic Design System with Jekyll

Avatar for Todd Moy Todd Moy
July 24, 2015
Design
1
370

Documenting an Atomic Design System with Jekyll

A lightning talk presented at Explore UX / TriUPA.
Avatar for Todd Moy

Todd Moy

July 24, 2015
Tweet

More Decks by Todd Moy

See All by Todd Moy
Wild Mushroom
Avatar for Todd Moy toddmoy
1
100
Misdirection
Avatar for Todd Moy toddmoy
0
130
Magic
Avatar for Todd Moy toddmoy
0
220
The Secret Life of Usability (AIGA)
Avatar for Todd Moy toddmoy
6
520
The Secret Life of Usability
Avatar for Todd Moy toddmoy
11
600
Alternate Reality Games
Avatar for Todd Moy toddmoy
1
190
Brain Bugs
Avatar for Todd Moy toddmoy
3
200

Other Decks in Design

See All in Design
CIRCULAR ECONOMY + SERVICES
Avatar for John Manoochehri jmanooch
0
110
portfolio_YumiYasuda
Avatar for yumi yasuda yum0418
0
280
商業デザインのアクセシビリティにおける倫理フレームワークの考察
Avatar for Yu Morita securecat
1
600
AI動画生成ガチャ紹介
Avatar for Takatomo Torigoe piyo7
1
110
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
200
Kid Cowboy 103
Avatar for Marilu Molina marilutwin
0
250
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
Avatar for Shingo Suzuki shingo2000
1
1.5k
minpaku-community-scrum-patterns
Avatar for Noriaki Kawanishi norinity1103
1
110
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
320
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
Avatar for Kaito UDAGAWA kaitou
1
180
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
Avatar for sugiyama sugiyama_sukedachi
0
120
Echoes Boomerang
Avatar for Cloud Yu artcloudyu
PRO
0
240

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
660
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
330
24k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
6.1k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
51k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.7k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
34k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k

Transcript

  1. Documenting an A T O M I C Design System

    with Jekyll Presented by @toddmoy from @viget

  2. BACKGROUND handoff to their tech team 3

  3. AT0MIC DESIGN ATOMS MOLECULES ORGANISMS TEMPLATES PAGES 4

  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

  5. JEKYLL 8 A Static Site Generator

  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. BUILT JEKYLL WITH 22

  8. How we used it PROCESS OMNIGRAFFLE INVISION basecamp JEKYLL 11

  9. How we used it STRUCTURE 12

  10. How we used it EDITING 13

  11. How we used it Purpose & UsAGE SAMPLE SCREENS FUNCTIONAL

    REQUIREMENTS EDITORIAL Requirements STYLISTIC GUIDELINES INCLUDED COMPONENTS & ELEMENTS CONTENT 15

  12. How we used it COMMITS 16

  13. How we used it PULL REQUESTS 17

  14. How we used it HOSTING 18

  15. FUTURE PLANS? 19

  16. Thanks y’all! Presented by @toddmoy from @viget 21