Skip to main content
live This is a new website – your feedback will help us to improve it.

Distribution

CSS & JS

The Style Kit’s CSS and optional JavaScript are available as minified or un-minified versions:

  • un-minified files are intended for testing, they include whitespace and full variables names but are larger
  • minified files are intended for production, things like whitespace are removed to reduce the file size

You only need to include one or the other not both. If in doubt, use the minified versions.

Functionally both versions work the same way, the difference is the overall file size and readability by humans.

Name URL
CSS 
https://cdn.web.bas.ac.uk/bas-style-kit/0.7.3/css/bas-style-kit.css
JavaScript 
https://cdn.web.bas.ac.uk/bas-style-kit/0.7.3/js/bas-style-kit.js
CSS (minified)
recommended		 
https://cdn.web.bas.ac.uk/bas-style-kit/0.7.3/css/bas-style-kit.min.css
JavaScript (minified)
recommended		 
https://cdn.web.bas.ac.uk/bas-style-kit/0.7.3/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 too.

Web fonts

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

  • .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.

These dependencies need to be loaded before the Style Kit for it to function correctly.

Name Version URL
jQuery 3.6.0 
https://cdn.web.bas.ac.uk/libs/jquery/3.6.0/js/jquery-3.6.0.min.js
js-cookie 2.2.1 
https://cdn.web.bas.ac.uk/libs/js-cookie/2.2.1/js/js.cookie-2.2.1.min.js

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 included separately.

Optional components

Some components in the Style Kit require one or more extra dependencies. This will be indicated by the relevant component where this applies.

Name Type Version URL
Font Awesome Pro CSS 5.13.0 
https://cdn.web.bas.ac.uk/libs/font-awesome-pro/5.13.0/css/all.min.css
Dropzone.js JS 5.5.0 
https://cdn.web.bas.ac.uk/libs/dropzone/5.5.0/js/dropzone.min.js
HTML5 Sortable JS 0.9.4 
https://cdn.web.bas.ac.uk/libs/html5sortable/0.9.4/js/html5sortable.min.js

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 included separately.

Additional components (Non-Style Kit)

For convenience, there are a number of additional components that can be used in websites and applications.

These components are not part of the Style Kit but are documented here for consistency.

Name Type Version URL
Proj4JS JS 2.4.3 
https://cdn.web.bas.ac.uk/libs/proj4js/2.4.3/proj4-2.4.3.min.js
Leaflet JS 1.6.0 
https://cdn.web.bas.ac.uk/libs/leaflet/1.6.0/js/leaflet.min.js
Leaflet CSS 1.6.0 
https://cdn.web.bas.ac.uk/libs/leaflet/1.6.0/css/leaflet.min.css
Proj4Leaflet JS 1.0.1 
https://cdn.web.bas.ac.uk/libs/proj4leaflet/v1.0.1/js/proj4leaflet-1.0.1.min.js
markdown-it JS 11.0.0 
https://cdn.web.bas.ac.uk/libs/markdown-it/11.0.0/js/markdown-it.min.js

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 included 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-7D6ujWuNqHED5QdhdI0DmKwZ9PPajs7vv+qzwIRdFQg=
js/bas-style-kit.js sha256-DcZO04dGm4mJ3BUBKu/2AKy6IzLlFklZKbAgKDm9uvc=
css/bas-style-kit.min.css sha256-IQbFVuPltp9fndG5bH9NPKd7KTOYJ4fPqXIc0/pnbLs=
js/bas-style-kit.min.js sha256-gZ+qic08vtKHiM28aXhNHl8Al1qEToL6o8d3omPEJEY=

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/jquery/3.5.1/js/jquery-3.5.1.min.js sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=
libs/jquery/3.6.0/js/jquery-3.6.0.min.js sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=
libs/js-cookie/2.1.3/js.cookie-2.1.3.min.js sha256-EareStqgZTnMUqLWtDkCa3SldvB8NPBY8u5C6ZUMWRc=
libs/js-cookie/2.2.1/js/js.cookie-2.2.1.min.js sha256-MdF5lmO7tgKSFNkLp9uc3HJfoCwW1LCQrdNyHkQji2s=

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

Resource SRI value
libs/font-awesome-pro/5.9.0/css/all.min.css sha256-kanXop/o8YI8mee6ao6HKghRywSQiUisB6pXb6HRsWk=
libs/font-awesome-pro/5.13.0/css/all.min.css sha256-DjbUjEiuM4tczO997cVF1zbf91BC9OzycscGGk/ZKks=
libs/dropzone/5.5.0/js/dropzone.min.js sha256-fIn7+wa+KI2s9jjRMk/rcswRt8mf82rxIXntRYKLofg=
libs/html5sortable/0.9.4/js/html5sortable.min.js sha256-a5lgB8k+KyfXyaS32wQevsCnEm8Hz2o7cPEfthVOzLM=

SRI values are also available for the non-Style Kit additional components.

Resource SRI value
libs/proj4js/2.4.3/proj4-2.4.3.min.js sha256-2ywP8gZSxQqabTEhcw+Xc3zpb/n6aAc3D0sneTtRNHw=
libs/leaflet/1.6.0/js/leaflet.min.js sha256-JOnsZs28NnzfQkVhxtJmqdalYkF/ejmYWXD//vFzgWA=
libs/leaflet/1.6.0/css/leaflet.min.css sha256-UU2pVKdO1sE4T0KZHipoxQmYePb1fWMCCR09RzM616Y=
libs/proj4leaflet/v1.0.1/js/proj4leaflet-1.0.1.min.js sha256-2/tIGOC+qdPryEVGe/iMOwpH4YHC3tcam5t8aqi74KI=
libs/markdown-it/11.0.0/js/markdown-it.min.js sha256-3mv+NUxFuBg26MtcnuN2X37WUxuGunWCCiG2YCSBjNc=

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 .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.

Jinja2

A set of Jinja2 templates are available for the Style Kit.

$ pip install bas-style-kit-jinja-templates

See the Jinja 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.