MinimalSize matters!
mini.css aims to provide as much functionality as possible in less than 7KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!
ResponsiveThink mobile!
mini.css is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!
Style-agnosticInfinitely customizable!
mini.css provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!
Setup & usage
mini.css is published in npm, yarn and bower, so you can easily download it, using your preferred package manager:
npm install mini.css
yarn add mini.css
bower install mini.css
After downloading mini.css, pick a Flavor and use it for your project.
Alternatively, you can use either GitCDN or RawGit to import the default flavor of mini.css. Simply add one of the following references inside your HTML page's <head> tag:
<link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.2/dist/mini-default.min.css">
Finally, you can find mini.css on cdnjs, which you can use to include it in your projects.
Quick overview
Take a couple of minutes to learn how mini.css differs from all those other UI frameworks (Bootstrap, Semantic UI etc):
| Name | Version | Size (uncompressed) | Size (minified) | Size (gzipped) |
|---|---|---|---|---|
| Bootstrap | v3.3.7 | 143 KB | 117 KB | 20 KB |
| Material Framework | v3.0 | 114 KB | 90 KB | 18 KB |
| mini.css | v2.1.2 | 50 KB | 40 KB | 7 KB |
| Semantic UI | v2.2.10 | 752 KB | 553 KB | 95 KB |
| Zurb Foundation | v6.3.1 | 103 KB | 73 KB | 13 KB |
The above comparison takes into account only the CSS files of each framework. mini.css's size is an approximation due to the nature of its flavor system. The calculated results were produced using Refresh-SF.
Module list
- Core - Resets, typography rules and fixes
- Grid - Powerful, responsive flexbox-based grid
- Navigation - Common elements for navigation
- Input Control - Forms, buttons and inputs
- Table - Modern, responsive tables
- Card - Sleek, modern content containers
- Tab - Responsive tabs and accordions
- Contextual - Contextual highlights and alerts
- Progress - Modern progress bars and loaders
- Utility - Utility and helper classes
Why does mini.css have so few modules?
Modules are what make frameworks so powerful, by giving developers the essential components they need to structure and style their websites. mini.css simplifies the crafting and learning process for new developers by providing a handful of very powerful modules that can do many different things. This way, new developers will only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. For example, cards can be used for almost any type of layout and can be customized to behave exactly as the developer needs them to. Tabs, on the other hand, are very responsive on mobile, collapsing to a stack below a certain width, but they can also be forced into a stack, allowing accordions and collapses to be built using the same building block as tabs.
| Browser | Not supported | Partially supported | Fully supported |
|---|---|---|---|
| Internet Explorer | 8- | 9-10 | 11+ |
| Edge | n/a | n/a | 12+ |
| Firefox | 21- | 22-27 | 28+ |
| Chrome | 20- | n/a | 21+ |
| Safari | 6- | n/a | 6.1+ |
| Opera | 11.5- | 12.1-16 | 17+ |
| Android Browser | 4.3- | n/a | 4.4+ |
Due to the way mini.css is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. Apart from the table above, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.
Getting started
If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:
- For a quick guide on getting started, you might wanna take a look at the available modules list and the tutorials provided for each one!
- To get you started even faster, we have created a handful of templates that might fit your needs!
- If you are familiar with mini.css and want a cheat sheet or quick reference guide, check the quick reference page!
- mini.css comes with a few nice pre-built customizable flavors. See which one of them better suits your needs!
- If you are more experienced or demanding, you can always take a look at the customization section to cook up a flavor of your own custom-tailored to your needs!