MinimalSize matters!
- -
-
mini.css aims to provide as much functionality as possible in less than 10KB 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!
+
MinimalSize matters!
+ +
+
mini.css aims to provide as much functionality as possible in less than 10KB 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!
+
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!
+
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
You can import the default flavor of mini.css in your webpage by simply adding the following reference inside your HTML page's <head> tag:
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css">
+
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css">
If you want to download the package using your favorite package manager, you can use either Bower or NPM:
If you are interested in tinkering with the flavor files and cooking your own flavor, check out the Customization page for information, tips on how to get started and general guidelines.
+
Quick overview
Take a couple of minutes to learn how mini.css differs from all those other UI toolkits (Bootstrap, Semantic UI etc):
| 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.
-+
| 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:
-
@@ -268,6 +291,7 @@
- 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!
