Skip to content
Mesh

CSS Framework

CSS Framework is designed to be used as a standalone CSS library, independent of javascript frameworks such as React or AngularJS and is component agnostic. CSS Framework provides utility classes that allow for design flexibility while the styles provided align with the nib brand.

CSS Framework is a utility-first framework powered by Tailwind CSS.

Core features

The framework is a modified version of the default Tailwind CSS theme. All base utilities are generated from this theme which covers foundational design elements such as spacing, colours, typography. Using utility classes, we've also created utility-only implementations of foundational React components that make it easier to use in your designs.

Utility-first

html
<div class="p-3 bg-white">

Responsive

html
<div class="p-4 md:p-6 xl:color-dark">

Component-friendly

html
<a class="button button-primary">

Limitations

There are some limitations with CSS Framework when compared to Mesh's React components:

  • Does not cover all features that Mesh React components offer.
  • Its a CSS-only framework which means there are some JS-dependant components which haven’t been included such as the date picker.
  • Only two breakpoints md: 640px and xl: 960px are included (which are two of the most commonly used). To reduce the framework's file size as much as possible, we've found that each breakpoint adds around 30kb.

Getting started

Following are recommened methods to add CSS Framweork to your webpage or app:

Using the CDN

html
<link
href="https://unpkg.com/@nib/[email protected]^0.0.3/dist/styles.min.css"
rel="stylesheet"
/>

Via npm

The package is publically available.

bash
$ npm install @nib/css-framework

.js file

js
import "@nib/css-framework/dist/styles.min.css";

.scss file

scss
@import "@nib/css-framework";

Code examples and reference

Please visit the CSS Framework code examples page for usage guidelines.

View the source on GitHub.

Try it out

Visit the CSS Framework sandbox on CodePen to experiment with the framework before adding it to your webpage or app.

Component availability

Please visit our component status page for a full list of CSS Framework component availability.