New This website is new, your feedback will help us to improve it.

Distribution

CSS and JS

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

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

Name URL
CSS https://cdn.web.bsk.ac.uk/bsk-style-kit/0.7.4-beta.1/css/bsk-style-kit.css
JavaScript https://cdn.web.bsk.ac.uk/bsk-style-kit/0.7.4-beta.1/js/bsk-style-kit.js
CSS (minified) recommended https://cdn.web.bsk.ac.uk/bsk-style-kit/0.7.4-beta.1/css/bsk-style-kit.css.min
JavaScript (minified) recommended https://cdn.web.bsk.ac.uk/bsk-style-kit/0.7.4-beta.1/js/bsk-style-kit.js.min

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.

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 URL
Oracle APEX styles CSS tbc
Font Awesome Pro CSS tbc
Dropzone.js JS tbc
HTML5 Sortable JS tbc

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.

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.

{
  "/css/bas-style-kit.css": "sha384-Uw+IfPZEKXdUNsaq+VJKLIGuWfeSzTM+LYTNw4thmtz7ab94+300N4iJdtNNsJ7V",
  "/css/bas-style-kit.min.css": "sha384-ey+RWH9ouubU3wSvuNzvoCxIy+rnmvAr+5rx6kssQNGqt0oYbVUM6oJ0+ohZIFFn",
  "/css/bas-style-kit-apex.css": "sha384-FU9uPXEVwPZIc5+kvuJVfRNSUVmEoCHABmilIajkxQEG5W/DyL1m4DyUP51lG6Hz",
  "/js/bas-style-kit.js": "sha384-nV+htjfHs0gUJlehh41+gS//Rtp8pzieMLUcxcjAjSuJig+5Zj5C4JNQc9zbyTJD",
  "/js/bas-style-kit.min.js": "sha384-amLSHJwX9NVbGF5X1WSc94y7OeCg5nVUjH/XKg04YbzLwJWRez70eU/WHvsDapJg"
}

These values are also available here: cdn.web.bas.ac.uk/bas-style-kit/0.7.4-beta.1/sri/sri-map.json

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:

  • CSS files: standard, minified and APEX version
  • JavaScript files: standard and minified
  • Web fonts in .woff2 formats
  • Images and logos in .jpg, .png formats and a favicon.ico icon

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 install bsk-style-kit

Using the Style Kit in this way requires you to include tooling in your project to process files into webserver directories in your project.
See the example below.

// package.json
"scripts": {
    "dev:css": "tailwindcss -i ./static_src/css/main.css -o ./src/css/bas-style-kit.css --watch",
    "dev:js": "node build.js"
},
// build.js
import { build } from 'esbuild';
import "bas-stylekit-npm/js/main.js";

const baseConfig = {
  entryPoints: ['static_src/js/main.js'],
  bundle: true,
  format: 'esm',
  target: 'esnext'
};

// Standard
await build({
  ...baseConfig,
  outfile: 'src/js/bas-style-kit.js',
  sourcemap: true,
  minify: false
});

// Minified
await build({
  ...baseConfig,
  outfile: 'src/js/bas-style-kit.min.js',
  minify: true
});

Source files

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.

Themes and templates

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

Oracle Apex