What is a front-end toolkit?

A front-end toolkit acts as a reference, not only for developers but for anyone working on the front-end of a website. It is a “living” body of front-end code and documentation for a website which is updated as and when a site develops during its lifetime. This “living” body of code is built from the same code used to build the website and in this way helps to ensure that there is always up-to-date documentation for the front-end interface.

Why do we need them?

The aim of a front-end toolkit is to help prevent duplication of code and to encourage collaboration between design and development teams. Websites are constantly changing entities in terms of content, ‘look and feel’ and code. Designers and developers who work on websites also change continuously.  Without fully documenting the front-end of a website, it can be difficult for designers or developers new to a project to understand what components are already available on the site, what components can be re-used and which components need to be built.

Components

A front-end toolkit will contain a list of all the available components for a website. A component is a reusable pattern that can be used throughout a website. Components consist of:

• HTML
• CSS
• JavaScript
• Content

An example of a component could be:

• A panel or a button

Components can also contain other components. For example, a panel component may also contain a button component.

Within the front-end toolkit, each component should include:

• A short description about the purpose of the component;
• The example HTML code used to create the component;
• Documentation for any specific CSS classes or JavaScript hooks need by the component;
• A working example of the component.

Page types

Along with a list of components, a front-end toolkit contains example pages so everyone working on the website understands how the components fit together to create page types. Not every page type needs to be covered as part of a front-end toolkit but it helps to provide a representative sample so the project team and clients can visualise how pages on the website may appear.

In summary

This approach to creating modular components in a front-end toolkit is extremely flexible as it not only reduces the risk of duplicating code, but can save time and money when it comes to integrating front-end code within a back-end system. By ensuring the front-end code is well documented, back-end developers can simply reuse existing components as and when needed without requiring time from design and front-end development teams.

Front-end toolkits in the wild

• Sky Global Toolkit
• Starbucks
• Twitter Bootstrap
• Topcoat