The BAS Style Kit is based on Bootstrap, the worlds most popular CSS framework. The Style Kit uses a customised version of Bootstrap to follow our design choices (such as not using rounded corners).
The Style Kit is based on version 3.3.7 of the official Bootstrap Sass port.
As well as Bootstrap, the BAS Style Kit takes influences from:
- the Government Digital Service (GDS)
- other frameworks, organisations and sources of best practice
The simplest way to use the Style Kit is to include it’s CSS file, before any other of your project’s styles, in the
<head> element of your website or service.
To use any of the Style Kit’s interactive features, you will also need
to add the Style Kit’s JS file and its dependencies, usually just before the end of the
See the distribution section for other ways to include the Style Kit.
Themes and Templates
The Style Kit provides integrations with a limited number of applications and template languages. These integrations will automatically include the Style Kit and its dependencies into your website or service, and may provide other features to reduce having to write extra code.
Although these integrations are officially supported, they may be out of step with the core BAS Style Kit project. Take care to check which Style Kit version they support, and any caveats or known issues, when reading this documentation.
Jekyll is an static site generator for creating websites and blogs, such as this documentation site. A BAS Style Kit Jekyll theme is available to use the Style Kit within a Jekyll site.
Pug is not a static site generator, and requires other tools to feed in to be compiled and place content in a structure for viewing. These tools can include task runners such as Gulp or a static site generator.
Oracle Application Express (Apex) an application development platform built on top of the Oracle Database. Apex can be used to make information available in databases available without needing to develop a bespoke application. An Apex theme is available which applies some of the Style Kit’s styles and components on top of the Apex Universal Theme.
This theme is not a complete implementation of the Style Kit, but rather uses selected elements to make applications look consistent with it. The Style Kit’s grid system for example cannot be used as it doesn’t work with Apex.
To avoid clashes with other CSS styles and to provide a more uniform and predictable structure, all classes within the
Style Kit use a Global Prefix of
.bsk-btn .bsk-btn-default not
Take care not to use default Bootstrap classes as they won’t be styled correctly and may stop working without warning.