BAS Style Kit 2025 - NPM Package

An NPM package to add the BAS Style Kit to a Node.js project.

This project lives inside a mono-repo for the BAS Style Kit 2025.

It is the repo for the CSS & JS source files.

It builds these files into CSS & JS bundles that can be used for a web UI that is consistent with the look of the BAS public website www.bas.ac.uk.

CSS is based on Tailwind CSS 4
JS uses UmbrellaJS

Set up

This project requires Node v20 & Node Version Manager v10
Recommend that Node Version Manager is used for this

• Install NVM
• NVM Set up guide

Install this project

• Run npm install

Usage

• Run npm run build - a series of files will be created in the dist directory
• See packages/bas-stylekit-npm/package.json for more See package.json for more commands

Usage in other projects

The BAS Style Kit Documentation website uses this package. It is a good example of how to use it:
https://gitlab.data.bas.ac.uk/web-apps/bsk/bas-style-kit-2025-documentation

The package.json file in the documents project shows how to use NPM commands to help develop and build websites with this NPM package.

CSS Styles

CSS is compiled by Tailwind CSS 4. The main CSS file packages/bas-stylekit-npm/css/main.css imports other files to generate CSS files in the dist directory. The main CSS file also contains the design tokens (values) for the style kit.

JS Scripts

JavaScript is compiled by esbuild via the script here: packages/bas-stylekit-npm/build.js. This script picks up JavaScript files from here: packages/bas-stylekit-npm/js/main.js and generates JavaScript into the dist directory. The scripts here use UmbrellaJS a modern alternative to jQuery.

Images & Fonts

Images and fonts are not directly included in the NPM package. This is so developers can choose how they want assets to be included in their projects. There are two logo images included in this package. The main BAS logo PNG and the favicon ICO.

Testing

Integration tests

Linting is used to ensure Sass styles and JavaScript follow a set of standard conventions. They will be executed automatically through Continuous Integration:

• ESlint is used for checking CSS & JavaScript

To run tests manually run dev:lint.
See package.json scripts for more.

Publishing NPM package

The contents of the npm package are determined by the .npmignore file and .gitignore files in this directory and parent directories.

To create a local packaage npm pack

Log into a npmjs account - bas-webapps in this instance npm login

To publish a new version: npm publish --access public

Release procedures

See the main project for information about how to create new releases:
https://gitlab.data.bas.ac.uk/web-apps/bsk/bas-style-kit-2025/-/tree/main/packages/bas-stylekit-npm

Issue tracking and contributing

Use the main project issue tracker to raise issues:
https://gitlab.data.bas.ac.uk/web-apps/bsk/bas-style-kit-2025/-/issues

See CONTRIBUTING.md for details about how to contribute to this project.

Feedback

The maintainer of this project is the BAS Web & Applications Team, they can be contacted through the BAS Service Desk.

Licence

This project uses the MIT License found here: LICENSE.md.