@nib/css-framework

CSS utilities and component styles for non-react projects

Usage no npm install needed!

<script type="module">
  import nibCssFramework from 'https://cdn.skypack.dev/@nib/css-framework';
</script>

README

Build status

CSS Framework

Tailwind-powered CSS Framework.

This documentation was written using Svelte.

Guidelines

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

    <link
  href="https://unpkg.com/@nib/css-framework@^1.0.0/dist/styles.min.css"
  rel="stylesheet"
/>

    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

  2. Install the dependencies:

    # Using npm
npm install

# Using Yarn
yarn

  3. 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 has been used for the minified styles.

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