@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

Note: This section is still incomplete.

Using CDN

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

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

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

Getting started

To get started:

1. Clone the repository:

    git clone [e-mail]:nib-au/css-framework.git
   

2. Install the dependencies:

   # Using npm
   npm install
   
   # Using Yarn
   yarn
   

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

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

Building for production

To optimise the CSS for production, cssnano has been used.

To build an optimised version of the CSS, simply run:

# Using npm
npm run build

# Using Yarn
yarn run build

After that's done, see dist/styles.css and dist/styles.min.css to see the output.

Any questions?

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