The navigation module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.
The navigation module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation menus.
All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.
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:
<head>
<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.1.5/dist/mini-default.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.2.0/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:
minimal, responsive, style-agnostic CSS framework
v2.1
v2.2
Alternatively, you can use either GitCDN or RawGit to import the default flavor of mini.css. Simply add one of the following references inside your HTML page's <head> tag:
Finally, you can find mini.css on cdnjs, which you can use to include it in your projects.
Take a couple of minutes to explore what makes mini.css different from all those other CSS frameworks and UI toolkits.
mini.css is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, mini.css blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in mini.css.
The navigation module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks. More specifically, the navigation module contains:
The navigation module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation menus. More specifically, the navigation module contains:
The contextual module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts and tooltips are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily. More specifically, the contextual module contains:
If you are familiar with mini.css and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the modules page.
You can import the default flavor of mini.css in your webpage by simply adding one of the following references inside your HTML page's <head> tag:
You can also find mini.css on cdnjs, which you can use to include it in your projects.
We strongly suggest you add the following line inside your HTML page's <head> to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">