Introduction
Overview
The BAS Style Kit is based on Bootstrap, the world’s 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 Design System
- other frameworks, organisations and sources of best practice
Quick start
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.
<link rel="stylesheet" href="https://cdn.web.bas.ac.uk/bas-style-kit/0.6.1/css/bas-style-kit.min.css" integrity="sha256-k05vjok9IGTMBJ8KYnQYX9sEc7A9eGWsTM8tQ2XqE8A=" crossorigin="anonymous">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 <body>
element.
<script src="https://cdn.web.bas.ac.uk/libs/jquery/3.5.1/js/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.web.bas.ac.uk/libs/js-cookie/2.2.1/js/js.cookie-2.2.1.min.js" integrity="sha256-MdF5lmO7tgKSFNkLp9uc3HJfoCwW1LCQrdNyHkQji2s=" crossorigin="anonymous"></script>
<script src="https://cdn.web.bas.ac.uk/bas-style-kit/0.6.1/js/bas-style-kit.min.js" integrity="sha256-cW+jowQERFqjJwdZ1VSZgG7dXQly19ykM5kVIONXmFg=" crossorigin="anonymous"></script>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
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
Pug is a JavaScript template engine, formally known as ‘Jade’. Pug supports a concise/abbreviated form of HTML that makes it ideal for prototyping. A set of templates (layouts, includes and mixins) are available to use the Style Kit with Pug.
Pug is not a static site generator, and requires other tools to structure content for viewing. These tools can include task runners such as Gulp or a static site generator.
Jinja2
Jinja2 is a Python template engine. A set of templates (layouts, includes and macros) are available to use the Style Kit with Jinja.
Jinja2 is not a static site generator, and requires other tools to structure content for viewing, such as Flask or a static site generator.
Oracle Apex
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.
Global prefix
To avoid clashes with other CSS styles and to provide a more uniform and predictable structure, all classes within the
Style Kit use a bsk- prefix.
I.e. use .bsk-btn .bsk-btn-default not .btn .btn-default.
Take care not to use default Bootstrap classes as they won’t be styled correctly and may stop working without warning.