Flavors
One of the core ideas behind mini.css is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using mini.css, you usually try out the default flavor, using 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">
There are, however a handful of other flavors included with mini.css. Below, you can see a full list of them:
-
Default mini-default
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css">
The default flavor for mini.css uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners with blurred shadows to give it a material-like design. All of the colors used in this flavor are based on Google's Material design color palette.
-
Classic mini-classic
Simpler, lighter version of the default flavor. Coming soon...
-
Sucroa View on Codepenmini-sucroa
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-sucroa.min.css">
Sucroa is a full flavor that uses a yellow-pink-lilac background color palette with dark purple-black foreground colors. It uses the default naming conventions (
.primary,.secondaryetc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. The card module's.darkand.darkerclasses have been replaced by the.lightand.lighterclasses respectively. Finally,.animatedalerts are not available.
If you would rather modify one of the pre-defined flavors or create your own, check out our customization page for instructions.