Github

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 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.3/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://gitcdn.link/repo/Chalarangelo/mini.css/master/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 and light border colors. All of the colors used in this flavor are loosely based on Google's Material design color palette.

    Author: Chalarangelo

    Size: 7 KB

  • Dark  View on Codepenmini-dark

    <link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-dark.min.css">

    The dark version of the default flavor, Dark uses a dark gray background with light gray foreground color. All modules are the same as in the default flavor, but with a dark palette, loosely based on Google's Material design color palette.

    Author: Chalarangelo

    Size: 7 KB

  • Lite  View on Codepenmini-lite

    <link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-lite.min.css">

    Lite is a light flavor that uses the default palette (light gray background and gray-black foreground color). It uses the default naming conventions (.primary, .secondary etc.). The grid system has 12 columns and most components use sharp corners without shadows. To make the flavor lighter, button groups, horizontal and vertical tables, certain card and progress styles, along with spinner donuts, tooltips, navigation bars, modals, drawers and toasts are not included.

    Author: Chalarangelo

    Size: 5 KB

  • Sucroa  View on Codepenmini-sucroa

    <link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/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, .secondary etc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. The card module's .dark and .darker classes have been replaced by the .light and .lighter classes respectively. Finally, the .shadowed class is replaced by varying degrees of generic shadows (.shadow-none, .shadow-small, .shadow-medium and .shadow-large).

    Author: Angeliki Daskalakis

    Size: 7 KB (loads external fonts)

  • Nord  View on Codepenmini-nord

    <link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-nord.min.css">

    Nord is a full flavor that uses the Nord color palette (arctic, north-bluish color palette). It uses the default naming conventions (.primary, .secondary etc.). The grid system has 12 columns and most components use soft shadows combined with rounded corners. All modules and components that are available in the default flavor are also available in Nord. Finally, the .shadowed class is replaced by varying degrees of generic shadows (.shadow-none, .shadow-small, .shadow-medium and .shadow-large).

    Author: tphecca

    Size: 7 KB

  • Progressive Web App  View on Codepenmini-pwa

    <link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-pwa.min.css">

    The Progressive Web App flavor follows the Google Material Design Guidelines and targets mobile devices and especially those based on the Android operating system. It uses mostly the default naming conventions (.primary etc.). The grid system has 12 columns and most components use rounded corners with soft shadows. To make the flavor lighter, button groups, horizontal and vertical tables, certain card styles, the entirety of the progress and tab modules, along with tooltips, navigation bars, modals and most style variants are not included. Finally, the card module's .dark class has been replaced by the .accent class.

    Author: Chalarangelo

    Size: 5 KB

If you would rather modify one of the pre-defined flavors or create your own, check out our customization page for instructions.