Prebuilt flavors

mini.css comes with a few prebuild flavors out of the box, so you can get started without having to finetune every little aspect of your CSS framework:

Default: SCSS file - CSS file - CSS file (minified)
Dark: SCSS file - CSS file - CSS file (minified)
Nord: SCSS file - CSS file - CSS file (minified)

Complementary tools

Building a custom flavor can be complex, even with the amount of streamlining we have provided. We have hand-picked the following tools to assist you in creating the perfect flavor for your needs:

Build your own flavor

Core module

The Core module contains styling rules for common textual elements, headings, quotations and code, as well as rules for universal styling and color palettes. This module is always enabled, as many other modules and components depend on it.

Textual content

Base root font size (px):

Base font size for all text elements, in pixels

Base line height:

Base line height for all text elements (unitless)

Heading font weight:

Font weight for headings (400 is normal, 700 is bold)

Heading ratio:

Ratio for headings

Heading line height:

Line height for headings

Heading font weight:

Font weight for headings (400 is normal, 700 is bold)

Subheading font size (em):

Font size for subheadings, relative to context

Subheading top margin (rem):

Top margin for subheadings, relative to root

Small text font size (em):

Font size for small text, relative to context

Horizontal rule line height:

Line height for headings

Code font size (em):

Font size for code elements, relative to context

Superscript top position (em):

Top position for superscript, relative to context

Subscript bottom position (em):

Bottom position for subscript, relative to context

Blockquote quotation size (rem):

Font size for the quotation of blockquotes, relative to root

Blockquote cite size (rem):

Font size for the citation of blockquotes, relative to root

Color palette

Foreground color:

Foreground color for most textual elements

Background color:

Background color for document body

Border color:

Border color for most elements

Secondary foreground color:

Secondary foreground color for certain textual elements

Secondary background color:

Secondary background color for certain elements

Secondary border color:

Secondary border color for certain elements

Blockquote sidebar color:

Sidebar color for blockquote elements

Preformatted text sidebar color:

Sidebar color for preformatted text elements

Link color:

Text color for hyperlink elements

Visited link color:

Text color for visited hyperlink elements

Universal styles

Universal padding (rem):

Universal padding for most elements, relative to root

Universal margin (rem):

Universal margin for most elements, relative to root

Universal border radius (rem):

Universal border radius for most elements, relative to root

Universal box shadow:

Universal box shadow for most elements

Mobile breakpoint (px):

Breakpoint between mobile screen and desktops, in pixels

Large screen breakpoint (px):

Breakpoint between desktops and large screens, in pixels

Layout module

The Layout module contains rules and functionality for the grid and card systems. This module is not always enabled, but it's highly recommended that you enable it, as many other components depend on its functionality to work properly.

Module enabled? (recommended)

Grid

Grid column count:

Number of horizontal column partitions for the grid system (default 12)

Cards

Card normal width (px):

Width of normal cards, in pixels

Card small width (px):

Width of small cards, in pixels

Card large width (px):

Width of large cards, in pixels

Card media section height (px):

Height of card media sections, in pixels

Card foreground color:

Foreground color for cards

Card background color:

Background color for cards

Card border color:

Border color for cards

Warning card foreground color:

Foreground color for warning cards

Warning card background color:

Background color for warning cards

Warning card border color:

Border color for warning cards

Error card foreground color:

Foreground color for error cards

Error card background color:

Background color for error cards

Error card border color:

Border color for error cards

Card dark section foreground color:

Foreground color for card dark sections

Card dark section background color:

Background color for card dark sections

Input control module

The Input control module contains styling rules for forms, input elements and buttons. This module is not always enabled, but it's highly recommended that you enable it, as some other components depend on its functionality to work properly.

Module enabled? (recommended)

Forms & input

Form foreground color:

Foreground color for forms

Form background color:

Background color for forms

Form border color:

Border color for forms

Input foreground color:

Foreground color for input elements

Input background color:

Background color for input elements

Input border color:

Border color for input elements

Input border color (focused):

Border color for focused input elements

Input border color (invalid):

Border color for invalid input elements

Buttons

Button foreground color:

Foreground color for buttons

Button background color:

Background color for buttons

Button border color:

Border color for buttons

Button background color (hover):

Background color for buttons on hover

Button border color (hover):

Border color for buttons on hover

Button primary variant foreground color:

Foreground color for primary button variant

Button primary variant background color:

Background color for primary button variant

Button primary variant background color (hover):

Background color for primary button variant on hover

Button secondary variant foreground color:

Foreground color for secondary button variant

Button secondary variant background color:

Background color for secondary button variant

Button secondary variant background color (hover):

Background color for secondary button variant on hover

Button tertiary variant foreground color:

Foreground color for tertiary button variant

Button tertiary variant background color:

Background color for tertiary button variant

Button tertiary variant background color (hover):

Background color for tertiary button variant on hover

Button inverse variant foreground color:

Foreground color for inverse button variant

Button inverse variant background color:

Background color for inverse button variant

Button inverse variant background color (hover):

Background color for inverse button variant on hover

Button group border color:

Border color for buttons

Navigation module

The Navigation module contains styling rules for headers, footers, navigation bars and menu drawers. This module is not always enabled, but it's recommended that you enable it, as it contains functionality that is useful for most designs and layouts.

Module enabled? (recommended)

Header height (rem):

Height for header elements, relative to root

Header logo font size (rem):

Font size of header elements, relative to root

Header foreground color:

Foreground color for header elements

Header background color:

Background color for header elements

Header border color:

Border color for header elements

Header background color (hover):

Background color for header elements on hover

Depth of navigation bar:

Maximum number of navigation bar levels

Navigation bar foreground color:

Foreground color for navigation bars

Navigation bar background color:

Background color for navigation bars

Navigation bar border color:

Border color for navigation bars

Navigation bar background color (hover):

Background color for navigation bars on hover

Navigation bar link color:

Foreground color for navigation bar links

Footer font size (rem):

Font size for footers, relative to root

Footer foreground color:

Foreground color for footers

Footer background color:

Background color for footers

Footer border color:

Border color for footers

Footer link color:

Foreground color for footer links

Menu drawer width (px):

Width of menu drawers, in pixels

Menu drawer toggle font size (em):

Font size for menu drawer toggle control, relative to context

Menu drawer close size (rem):

Font size for menu drawer close, relative to root

Menu drawer background color:

Background color for menu drawers

Menu drawer border color:

Border color for menu drawers

Menu drawer background color (hover):

Background color for menu drawers on hover

Menu drawer close color:

Close color for menu drawers

Table module

The Table module contains styling rules for tables. This module is not always enabled and it's recommended to enable it only if you're planning to use tables for displaying data.

Module enabled?

Tables

Table max height (px):

Table max height, in pixels

Caption font size (rem):

Font size of table captions, relative to root

Mobile card label:

Attribute name for tables' mobile card labels

Mobile card label font weight:

Font weight for tables' mobile card labels (400 is normal, 700 is bold)

Table border color:

Border color for tables

Table separtor border color:

Separator border color for tables

Table heading foreground color:

Foreground color for table headings

Table heading background color:

Background color for table headings

Table data foreground color:

Foreground color for table data

Table data background color:

Background color for table data

Table data alternative background color:

Alternative background color for table data

Table data background color (hover):

Background color for table data on hover

Contextual module

The Contextual module contains styling rules for text highlighting, toasts, tooltips, modal dialogs, spoilers and accordions. This module is not always enabled, but it's recommended that you enable it, as it contains functionality that is useful for most designs and layouts.

Module enabled?

Text highlighting

Highlight foreground color:

Foreground color for highlighted text elements

Highlight background color:

Background color for highlighted text elements

Highlight font size (em):

Font size for highlighted text elements, relative to context

Highlight line height:

Line height for highlighted text elements

Secondary highlight background color:

Background color for highlighted text element secondary variant

Tertiary highlight background color:

Background color for highlighted text element tertiary variant

Highlight tag variant border radius (em):

Border radius for highlighted text element tag variant, relative to context

Toasts

Toast foreground color:

Foreground color for toasts

Toast background color:

Background color for toasts

Tooltips

Tooltip foreground color:

Foreground color for tooltips

Tooltip background color:

Background color for tooltips

Modal dialogs

Modal overlay color:

Overal color for modal dialogs

Modal close color:

Close color for modal dialogs

Modal close background color (hover):

Background color for modal dialogs' close (on hover)

Modal close size (rem):

Modal dialog close size, relative to root

Spoilers & accordions

Collapse label height (rem):

Label height for spoilers & accordions, relative to root

Collapse content max height (px):

Maximum height for content in spoilers & accordions, in pixels

Collapse content background color:

Background color for content in spoilers & accordions

Collapse border color:

Border color for spoilers & accordions

Collapse label foreground color:

Foreground color for labels in spoilers & accordions

Collapse label background color:

Background color for labels in spoilers & accordions

Collapse label background color (hover):

Background color for labels in spoilers & accordions (on hover)

Collapse selected label background color:

Background color for selected labels in spoilers & accordions

Collapse selected label border color:

Border color for selected labels in spoilers & accordions

Progress module

The Progress module contains styling rules for progress bars and donut spinners. This module is not always enabled, but it's recommended that you enable it, as it contains functionality that is useful for most designs and layouts.

Module enabled?

Progress bars

Progress bar height (rem):

Height of progress bars, relative to root

Progress bar foreground color:

Foreground color for progress bars

Progress bar background color:

Background color for progress bars

Progress bar primary variant foreground color:

Foreground color for progress bar primary variant

Progress bar secondary variant foreground color:

Foreground color for progress bar secondary variant

Progress bar tertiary variant foreground color:

Foreground color for progress bar tertiary variant

Progress bar maximum value:

Maximum value for progress bars

Progress bar inline width (%):

Width for inline progress bars, in percentage

Donut spinners

Donut spinner size (rem):

Size of donut spinners, relative to root

Donut spinner thickness (rem):

Thickness of donut spinners, relative to root

Donut spinner foreground color:

Foreground color for donut spinners

Donut spinner background color:

Background color for donut spinners

Donut spinner primary variant foreground color:

Foreground color for donut spinner primary variant

Donut spinner secondary variant foreground color:

Foreground color for donut spinner secondary variant

Donut spinner tertiary variant foreground color:

Foreground color for donut spinner tertiary variant

Icons module

The Icons module contains styling rules for icons. This module is not always enabled and it's recommended to enable it only if you're planning to use the icon set provided.

Utility module

The Utility module contains styling rules for utility classes. This module is not always enabled, but it's recommended to enable it as it contains some features that can be useful in most designs.

Get your flavor

Click the button below to get your customized flavor! You will have to be a little patient, as flavor generation can take up to a few minutes. You will be prompted to download a zip file as soon as it's done!