Toolkits

Web toolkit

The web toolkit provides a set of resuable HTML and CSS components that can be used inside any web based project.

Use the code samples provided in the UI Library along with the web toolkit.

Get the toolkit

How to use the web toolkit in your project

A) Compile source

Compiling the Honeycomb source is the preferred way of using the web toolkit as it allows settings to be customised to the projects requirements.

  • npm install git://github.com/red-gate/honeycomb-web-toolkit.git
  • In your Sass reference the different modules needed for the project. E.g. @import "honeycomb/src/base/css/main";

Modules that have settings will have settings directories and partials. Override the settings in your sass by setting them before importing the Honeycomb module.

B) Precompiled distributable

  • Download the dist directory from the Git repo and drop the contents into your project
  • Reference the honeycomb.css CSS file from your project

Design toolkit (Sketch library)

The design toolkit is a Sketch pattern library that lives in Brand.ai.

Get the toolkit

How to use the design toolkit in your project

Video walkthrough (No audio)

  • Ensure you have the latest version of Sketch (if you haven’t moved Sketch to the Apps folder you won’t get updates)
  • Ensure you have installed Roboto and Segoe UI (otherwise the elements will look weird and be misaligned).
  • Install and log in to the Brand.ai sketch plugin:
    • Download and run the plugin. This will install the plugin and launch Sketch
    • In Sketch, create a new document, or open an existing Sketch document
    • Open the Brand.ai window from the Sketch Menu (Plugins>Brand.ai) or CMD+Shift+D
    • Log in to Brand.ai
  • Hopefully you’re now ready start using Brand.ai in sketch – you should now be able to insert components and style existing elements with the Brand.ai plugin.

Ensure you’re always using the latest version of the Honeycomb Library

Click ‘Sync to Document’ at the bottom of the Brand.ai window to update your document to use the latest Honeycomb styles.

Winforms toolkit (Private)

WPF toolkit (Private)