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 [email protected]: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.