Documentation
An introduction to toolkit-driven development
Modern day web interfaces are large, complex systems of interoperable parts. If not planned thoughtfully, UI code can become overly complex and difficult to scale. It can be helpful take some queues from other industries that have solved this problem of scale already.
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. These pieces can be used in any type of end-application, whether it is .NET, Ruby on Rails, Node.js, or just plain HTML.
Fabricator is a tool for building toolkits. It provides an efficient, optimized working environment to help you build your toolkit.
Thinking of a website as a system of materials can be a powerful shift in thinking. Each piece must work both independently and in concert with an unknown combination of other pieces. The UI must be backend-agnostic so it can work in as many places as possible.
To achieve this, developers must design their code to be modular and scalable. Further, toolkits should be a single .js and .css file that contains a site's entire design system. A developer should be able to drop these two files on any page an have access to the entire design system.
When done well, a mature toolkit can be used to build a large number of unique pages and layouts. Once a baseline of materials has been built, designers can compose new pages by selecting existing materials, then design to fill the gaps. The need to produce a layout artifact for each new page is eliminated. The time it takes to layout new pages dramatically decreases as the toolkit matures.
Website style guides have evolved over the years, first starting as an outreach of the tradition (print) branding style guides, and eventually maturing into interactive examples of how a brand should be look and feel on the web. See Starbucks, Yelp, Salesforce, Code For America, and Google's Material Design.
A toolkit is more focused on code - specifically the modularity of website interfaces. Toolkits break down websites into small, repeatable chunks, then use those chunks to build an infinite number of layouts. Bootstrap, Topcoat, and Zurb's Foundation are popular toolkits.
Both are great and can be extremely useful. Fabricator gives you a way to combine both concepts into one deliverable.
When you work with Fabricator, you develop a brand's look and feel on the web while also producing a code toolkit.
Next, learn how to use Fabricator.