---

Below you can see a showcase of the features and styles included in the default flavor of mini.css.

Typography Styles for common textual elements

This is a paragraph with some sample text. Did you know mini.css v2.0 is codenamed Fermion? No? Well, now you do! Maybe you want to know what our inline elements look like. For example a link to the Github repository of mini.css looks like that! Neat, right? Maybe you want to see some inline code or some sample input. Oh, also small text is cool, along with its siblings: the subscript_hi! and the superscript^hello!. We use highlights quite a lot as well. Apart from the primary color, you can also try the secondary and tertiary colors. If you wanna be fancy, maybe use a tag or a bubble. All of these work well inside headings and the like. To finish our typography tour, check out the preformatted code block below.

function sum(num1, num2) {
    var num3 = num1 + num2;
    console.log('Result: ' + num3);
}

---

Grid system Easy layout using flexbox

mini.css uses the Flexible Layout Module (commonly known as flexbox) to create a grid system for easy page layout. The grid system is not the most feature-rich one, but it contains all the essential components. The container of the grid is fluid by default, meaning it will adjust to fill its parent container. Rows are easily created using the row class and columns can be created using the usual col-SZ-XX syntax where SZ and XX are replaced by a screen size and a number of vertical columns respectively. Columns can also scale themselves automatically if you omit the number of vertical columns in the class name. Similarly, you can use offsets with the col-SZ-offset-XX syntax. The default grid is separated into 12 vertical columns. You can see some examples below.

---

Common Elements Styles for common HTML elements

mini.css adds modern styles for many of the HTML elements.

Progress bars

The <progress> element is used for progress bars. There are three color variants (default, secondary and tertiary), as well as an inline class that displays the progress bar as an inline block, along with a nano variant for tiny progress bars. Below are some examples:

Inline progress:

Nano progress:

Tables

Tables are responsive and use the data-label attribute to specify the header name for each cell, so that they can be displayed as cards on mobile devices. Here's an example (resize to see mobile display if you are on desktop):

Hacker List

Name	Surname	Email	Handle
John	Smith	johnsmith@mail.com	SmithereensJohn
Lisa	Cody	codyl@mail.com	Codyl
Max	Roberts	terminus@mail.com	T3rm1nu5
Adam	Leeks	leekt@mail.com	Leekt

Buttons

Buttons are already pre-styled in mini.css to allow for consistent presentation. However, there is a lot you can do to customize them, as the pre-applied styles are mostly overrides for the default presentation styles. Pre-styled buttons and other button-like inputs can be seen below:

Normal button Link button Disabled button

File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. mini.css deals with the problem, using a workaround involving labels that use the button class, which applies the exact same style to those labels. Just link it to the <input type="file"> element of your choice and you're good to go. For example:

 Upload file

There are also different kinds of buttons, specifically primary, secondary and tertiary, as well as small and large buttons. All of these types can be specified as classes. For example:

Primary normal button Small primary disabled label button

Forms

Forms are pre-styled as well and they offer consistency across all inputs. There are options for normal forms (unaligned) or inline forms (horizontal), as well as aligned forms, that utilise the grid system to present their content. Below are some examples: