Developing Style Guides at Light Speed with Fabricator

DEVELOPING STYLE GUIDES AT LIGHT SPEED WITH FABRICATOR

ABOUT ME

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

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.

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.

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

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)

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.

STYLE GUIDES VS TOOLKITS

Style Guides• Focused on Business• Not self-documenting• Instruction Manual• Reusable

Toolkits• Focused on code• Modular• Reusable• Living document

WHY NOT COMBINE THE TWO?

• Toolkits need documentation• Documentation is hard• How do you combine the two?

INTRODUCING FABRICATOR

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

BENEFITS

• Easy Modularization• CSS• JavaScript• Asset

• Automatic Bundling and Minification• Visual Guide with code samples.

REQUIREMENTS

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

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.

JARGON

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

DEMO

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