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
<div class="p-3 bg-white">
Responsive
<div class="p-4 md:p-6 xl:color-dark">
Component-friendly
<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: 640pxandxl: 960pxare 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
<linkhref="https://unpkg.com/@nib/css-framework@^0.1.0/dist/styles.min.css"rel="stylesheet"/>
Via npm
The package is publically available.
$ npm install @nib/css-framework
.js file
import "@nib/css-framework/dist/styles.min.css";
.scss file
@import "@nib/css-framework";
Code examples and reference
Please visit the CSS Framework documentation site for usage guidelines.
View the source on GitHub.
Try it out
Component availability
Please visit our component status page for a full list of CSS Framework component availability.