@nib/css-framework

CSS utilities and component styles for non-react projects

Downloads in past

Stats

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

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:
```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:
```bash
 git clone git@github.com:nib-group/css-framework.git
```
  1. Install the dependencies:
```bash
# Using npm
npm install

# Using Yarn
yarn
```
  1. Build the dist folder:
```bash
# 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:
```bash
# 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.