Developing Style Guides at Light Speed with Fabricator
-
Upload
brett-whittington -
Category
Documents
-
view
245 -
download
1
Transcript of Developing Style Guides at Light Speed with Fabricator
![Page 1: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/1.jpg)
DEVELOPING STYLE GUIDES AT LIGHT SPEED WITH FABRICATOR
![Page 2: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/2.jpg)
ABOUT ME
• Brett Whittington• Developer for 10 years• Worked at HMB for over 3 years• Enjoy working with Web Technologies
![Page 3: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/3.jpg)
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.
![Page 4: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/4.jpg)
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.
![Page 5: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/5.jpg)
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
![Page 6: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/6.jpg)
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)
![Page 7: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/7.jpg)
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.
![Page 8: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/8.jpg)
STYLE GUIDES VS TOOLKITS
Style Guides• Focused on Business• Not self-documenting• Instruction Manual• Reusable
Toolkits• Focused on code• Modular• Reusable• Living document
![Page 9: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/9.jpg)
WHY NOT COMBINE THE TWO?
• Toolkits need documentation• Documentation is hard• How do you combine the two?
![Page 10: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/10.jpg)
INTRODUCING FABRICATOR
• Developed by Resource/Amirati Luke Askew• Open source• Encourages prototyping• Combines style guide and toolkit into one living document.
![Page 11: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/11.jpg)
BENEFITS
• Easy Modularization• CSS• JavaScript• Asset
• Automatic Bundling and Minification• Visual Guide with code samples.
![Page 12: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/12.jpg)
REQUIREMENTS
• Node.js• Download Fabricator (zip) - Add to the project.
![Page 13: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/13.jpg)
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.
![Page 14: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/14.jpg)
JARGON
• Components – small unit of design• Structures – combination of components• Templates – combination of structures that resembles a page.
![Page 15: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/15.jpg)
DEMO
![Page 16: Developing Style Guides at Light Speed with Fabricator](https://reader036.fdocuments.net/reader036/viewer/2022062904/587d54b01a28abee158b55c7/html5/thumbnails/16.jpg)
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