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.3.4/dist/mini-default.min.css">
Finally, you can find mini.css on cdnjs, which you can use to include it in your projects.
Browser support
Edge12
Firefox28
Chrome26
Safari7.1
Opera17
Android4.4
Due to the way mini.css is designed, 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 such as Internet Explorer will display a less feature-rich and modern website. On a side note, remember 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.
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.
Support mini.css!
If you like mini.css, remember that you can show your support by starring it on Github.
It means a lot to us and it only takes a couple of seconds!
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 want to 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 want a step-by-step guide on how to utilize the most commonly used modules, be sure to check out these articles on Medium:
- If you are familiar with mini.css and want a cheat sheet or quick reference guide, check the quick reference page!
- If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our React & Preact Libraries, which will help you get started creating all kinds of custom components based on mini.css.
- 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!
- Finally, if you want to contribute to the framework's development in any way or have an interest in what happens behind the scenes, visit the Github repository to find out more.