@nib/css-framework

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@^0.1.0/dist/styles.min.css"
     rel="stylesheet"
   />
   

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

Getting started

To get started:

1. Clone the repository:

    git clone [e-mail]: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.