CSS utilities and component styles for non-react projects

Downloads in past


1.0.07 months ago3 years agoMinified + gzip package size for @nib/css-framework in KB


Build status
CSS Framework
Tailwind-powered CSS Framework.
This documentation was written using Svelte.


  • We have removed some of the default variants in the tailwind.config.js file (to save space)
  • Breakpoints: Currently only have 2 (md (640px), xl (960px))
  • Tailwind Intellisense vscode plugin is mint
  • Spacing in the theme determines the w-* utilities

Adding the CSS Framework to your App

Using CDN

  1. Add the styles.min.css via CDN into your index.html:

This will give you version `1.0.0`. To get the latest version, remove `@^1.0.0` from the `href`.

Getting started

To get started:
  1. Clone the repository:
 git clone git@github.com:nib-group/css-framework.git
  1. Install the dependencies:
# Using npm
npm install

# Using Yarn
  1. Build the dist folder:
# Using npm
npm run build

# Using Yarn
yarn run build

This will build out the `dist/styles.css` and `dist/styles.min.css` files used by the docs.

To optimise the CSS for production, [cssnano](https://cssnano.co/) has been used for the minified styles.
  1. Start the development server:
# Using npm
npm run dev

# Using Yarn
yarn run dev
Now you should be able to see the project running at localhost:5000.

Any questions?

If there are any questions about this process you can ask us at the #designops slack channel.