CSS Framework is a utility-first framework powered by Tailwind CSS.
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.
<div class="p-3 bg-white">
<div class="p-4 md:p-6 xl:color-dark">
<a class="button button-primary">
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
xl: 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.
Following are recommened methods to add CSS Framweork to your webpage or app:
Using the CDN
The package is publically available.
$ npm install @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
Please visit our component status page for a full list of CSS Framework component availability.