Skip to main content

Distribution

CSS & JS

The Style Kit consists of a CSS file and optionally a JavaScript file for the Style Kit’s Interactive components.

These files are available in two forms:

  • default/normal - designed for testing and human readable with whitespace and full variable names
  • minified - is intended for production use with optimisations to reduce the file size (such as no whitespace)

Both forms work exactly the same way and include all of the Style Kit, the only difference is their readability by humans

Name URL
CSS
https://cdn.web.bas.ac.uk/bas-style-kit/0.5.0/css/bas-style-kit.css
JavaScript
https://cdn.web.bas.ac.uk/bas-style-kit/0.5.0/js/bas-style-kit.js
CSS (minified)
https://cdn.web.bas.ac.uk/bas-style-kit/0.5.0/css/bas-style-kit.min.css
JavaScript (minified)
https://cdn.web.bas.ac.uk/bas-style-kit/0.5.0/js/bas-style-kit.min.js

These files are hosted by the BAS CDN and is the recommended way to include the Style Kit in a website or application.

If the BAS Style Kit JavaScript files are included, you will also need to include additional JavaScript dependencies.

Web fonts

Web fonts used by the BAS Style Kit are declared in their respective @font-face declarations in these formats:

  • .eot
  • .ttf
  • .woff
  • .woff2

The Style Kit will load these fonts from the BAS CDN automatically.

Logos

Logos used by the BAS Style Kit are made available in these formats:

  • .png
  • .eps

EPS logos should only be used when advised by the BAS Communications Team

These logos are available from the BAS CDN and is the recommended way to include them in a website or application.

JavaScript dependencies

This section only applies if you are using the BAS Style Kit’s Interactive components.

Each component will list the libraries it depends upon (in the dependencies section). These libraries are not included in the Style Kit and need to loaded before the Style Kit to function correctly.

Name Version URL Status
jQuery 3.1.1
https://cdn.web.bas.ac.uk/libs/jquery/3.1.1/jquery-3.1.1.min.js
Retired
jQuery 3.3.1
https://cdn.web.bas.ac.uk/libs/jquery/3.3.1/jquery-3.3.1.min.js
Live
js-cookie 2.1.3
https://cdn.web.bas.ac.uk/libs/js-cookie/2.1.3/js.cookie-2.1.3.min.js
Live

For convenience, these libraries are hosted by the BAS CDN and is the recommended way to include them in a website or application.

These libraries are not included in other distribution types and will need to be sourced separately.

Optional components

These components are not part of the Style Kit but can be included to enable extra features.

Each optional component will list the libraries or other files it depends upon. These files are not included in the Style Kit.

Name Type Version URL Status
Font Awesome Pro CSS 5.3.1
https://cdn.web.bas.ac.uk/libs/font-awesome-pro/5.3.1/css/all.min.css
Live
Dropzone.js JS 5.5.0
https://cdn.web.bas.ac.uk/libs/dropzone/5.5.0/js/dropzone.min.js
Live

For convenience, these files are hosted by the BAS CDN and is the recommended way to include them in a website or application.

These files are not included in other distribution types and will need to be sourced separately.

Sub-Resource Integrity (SRI) values

Sub-Resource Integrity (SRI) values are available for all Style Kit CSS and JS files served through the BAS CDN.

You only need to include SRI values for files you directly include, you don’t need to worry about any resources referenced within them, such as fonts.

Resource SRI value
css/bas-style-kit.css sha256-e48N8sO6qN2OIRCS5WqduKowEzB3gSkHAGRf+TDeuXc=
css/bas-style-kit.js sha256-0qtIuMJjlTzdT9seJFbpgr6zUYkwgIRwA9gviHNUwnQ=
css/bas-style-kit.min.css sha256-f1krGfSoxLtD+u0HEHuqF3D5JW27nONtsLkNZ68+hhM=
css/bas-style-kit.min.js sha256-ovsRXnHWw8vzEuH6E3/0R44Etu6OISlK9FjEA1mGuUQ=

These values are also available in a machine readable format from:

https://style-kit.web.bas.ac.uk/data/bsk-sri.json

SRI values are also available for Style Kit’s JavaScript dependencies.

Resource SRI value
libs/jquery/3.1.1/jquery-3.1.1.min.js sha256-iS/MJJubD9bocndB0h1c3VR0I4MnuhFjCLXfrW3f0b0=
libs/jquery/3.3.1/jquery-3.3.1.min.js sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=
libs/js-cookie/2.1.3/js.cookie-2.1.3.min.js sha256-EareStqgZTnMUqLWtDkCa3SldvB8NPBY8u5C6ZUMWRc=

SRI values are also available for Style Kit’s Optional components.

Resource SRI value
libs/font-awesome-pro/5.3.1/css/all.min.css sha256-dmYY0yByM18KPaizF7sJXlVB3j4gBovN0xzGOEePAYg=
libs/dropzone/5.5.0/js/dropzone.min.js fIn7+wa+KI2s9jjRMk/rcswRt8mf82rxIXntRYKLofg=

CORS

Cross Origin Resource Sharing (CORS) is supported for all files served through the the BAS CDN using a wildcard (*) allowed origin value.

CORS authentication is not supported by the BAS CDN, and files should be accessed anonymously. This is the default policy in most cases, however it is a best practice to state this explicitly by including the crossorigin="anonymous" attribute in <link> and <script> elements.

E.g.

<link rel="stylesheet" href="https://www.example.com/script.js" crossorigin="anonymous">

Direct download

A .zip archive of the Style Kit is available containing:

  • compiled CSS
  • compiled JavaScript
  • compiled and minified JavaScript
  • web fonts in .eot, .ttf, .woff and .woff2 formats
  • logos in .png formats

It is strongly recommended to use the BAS CDN rather than managing these files yourself to make upgrading to future Style Kit releases easier.

Download latest version

NodeJS package

Source files for the Style Kit are available as a NodeJS package.

$ npm i @antarctica/bas-style-kit

Using the Style Kit in this way requires you to compile the Style Kit’s Sass and JavaScript yourself, as well as other tasks for fonts and logos. This workflow is documented in the core BAS Style Kit project .

Source files

Source files for the Style Kit are available from the Git repository of the core BAS Style Kit project. Stable releases of the Style Kit are also tagged as releases.

$ git clone https://github.com/antarctica/bas-style-kit.git

It is strongly recommended to use the NPM package rather than managing these files yourself to make upgrading to future Style Kit releases easier.

Using the Style Kit in this way requires you to compile the Style Kit’s Sass and JavaScript yourself, as well as other tasks for fonts and logos. This workflow is documented in the core BAS Style Kit project.

Themes and templates

The Style Kit provides integrations for a limited number of applications and template languages. See the introduction section for supported options.

Jekyll

A Jekyll theme is available for the Style Kit.

  1. add gem "jekyll-theme-bas-style-kit" to your Jekyll site’s Gemfile file
  2. run the bundle command
  3. and theme: jekyll-theme-bas-style-kit to your Jekyll site’s _config.yml file

See the Jekyll theme documentation for more information.

Pug

A set of Pug (AKA Jade) templates are available for the Style Kit.

$ npm i @antarctica/bas-style-kit-pug-templates

See the Pug templates documentation for more information.

Oracle Apex

An Apex theme is available for the Style Kit.

See these instructions for how to install the Style Kit theme into Apex.

See the Apex theme documentation for more information.