1. DEVELOPING STYLE GUIDES
AT LIGHT SPEED WITH
FABRICATOR

2. ABOUT ME
• Brett Whittington
• Developer for 10 years
• Worked at HMB for over 3 years
• Enjoy working with Web Technologies

3. PROBLEM #1
Organization has distributed teams that are extremely vertical
and independent. However, branding for the organization is
shared and any changes to the enterprise stylesheets requires
approvals and meetings.

4. PROBLEM #2
Organization has many different clients with different brands and
marketing strategies. It has a large pool of developers that cycle
on and off the different brands depending on who has time
available to work on them. No one person is a subject matter
expert so stylesheets are a mish mash of styles that are
constantly changes.

5. WHAT IS A STYLE GUIDE?
• A document on how to tell a story.
• How to write
• How it should look
• How things interact
• Key is consistency

6. STYLE GUIDES ARE IMPORTANT
• Align marketing goals and objectives
• Create a visual dictionary for your brand
• Reduces cost of future work (no re-inventing the wheel)

7. UI TOOLKITS
• A UI "toolkit" addresses the issue of complexity by breaking
down an interface into smaller chunks. It is the digital
equivalent of the auto industry's sub-assemblies and modules.
It is a collection of independent pieces that are assembled to
form larger pieces. A toolkit is not a website, rather it is the
pieces that make up a website.

8. STYLE GUIDES VS TOOLKITS
Style Guides
• Focused on Business
• Not self-documenting
• Instruction Manual
• Reusable
Toolkits
• Focused on code
• Modular
• Reusable
• Living document

9. WHY NOT COMBINE THE TWO?
• Toolkits need documentation
• Documentation is hard
• How do you combine the two?

10. INTRODUCING FABRICATOR
• Developed by Resource/Amirati Luke Askew
• Open source
• Encourages prototyping
• Combines style guide and toolkit into one living document.

11. BENEFITS
• Easy Modularization
• CSS
• JavaScript
• Asset
• Automatic Bundling and Minification
• Visual Guide with code samples.

12. REQUIREMENTS
• Node.js
• Download Fabricator (zip) - Add to the project.

13. TECHNOLOGIES YOU’LL USE
• Gulp – A build process built for use in Node.js
• Browserify – Allows easy modularization of javascript files and
bundles them into one
• Markdown – Write text instead of HTML
• SASS – CSS compiler
• HTML/CSS*
• JavaScript*
* = Only ones you really need to know.

14. JARGON
• Components – small unit of design
• Structures – combination of components
• Templates – combination of structures that resembles a page.

15. DEMO

16. LESSONS LEARNED
• Needs buy in from everyone
• Does require some extra maintenance or must change workflow
• Sometimes it fails to update after saving or takes a long time to
refresh.
• Documentation isn’t there yet
• Adds a lot of files to a project.
• Bleeding Edge of many JavaScript Frameworks