Quick overview

Take a couple of minutes to explore what makes mini.css different from all those other CSS frameworks and UI toolkits.

Why should I use mini.css?

mini.css is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, mini.css blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in mini.css.

Not convinced yet? Maybe you should read these 5 reasons to try out mini.css.

What exactly does mini.css provide?

Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. mini.css provides a handful of very powerful modules that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:

Core - Basic reset and fix rules, based on Normalize.css v5.0.0, typography and common textual element styling

Grid - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as flexbox)

Navigation - Common navigational elements such as headers, footers and navigation bars

Input Control - Form, input element, checkbox, radio button and button styling

Table - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices

Card - Sleek, modern general-purpose content containers, media embedding

Tab - Modern, responsive tabs, accordions and collapses

Contextual - Content highlight element styling, elegant alerts and accessible tooltips

Progress - Modern progress bar styling and spinning progress indicators

Utility - Utilities, visibility helper classes, responsive sizing and breadcrumbs

While not strictly part of the framework, we have also created component libraries for React and Preact, which will make your development faster and easier, especially if you are developing progressive web apps. You can get started with one of our Javascript libraries here!

How do I customize mini.css?

mini.css allows you to easily customize your designs, using Flavors, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the customization section.