Getting started
+You can get started using mini.css in one of many ways. It is published on npm and yarn, so you can easily download it, using your preferred package manager:
npm install mini.css
yarn add mini.css
Alternatively, you can use either rawgit or cdnjs to import mini.css into your HTML page's <head> tag:
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.0-alpha.2/dist/mini-default.min.css">-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/v3.0.0-alpha.2/mini-default.min.css">+
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.0-alpha.3/dist/mini-default.min.css">+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/v3.0.0-alpha.3/mini-default.min.css">
After adding mini.css to your project, remember to also add the following line inside your HTML page's <head> tag to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
mini.css is crafted with long-term support in mind, so expect it to be compatible with all modern browsers, as well as their future versions. However, most legacy and proxy browsers, such as Internet Explorer, Opera Mini, IE Mobile and UC Browser are not officially supported, meaning certain features may not be displayed properly or behave exactly as expected.
Edge15
Firefox31
Firefox35
Chrome49
Safari9.1
Opera36
Getting started
Common textual elements
+mini.css utilizes the ruleset of Normalize.css v7.0.0 to reliably deal with inconsistencies between browsers, while applying some tasteful defaults on top, such as using native font stack to figure out the best font for each device, setting the background and foreground colors, as well as the size of the text to 16px and its line height to 1.5.
All of the most common HTML5 elements, such as paragraphs, links, bold, small and slanted text, have been styled by default using clean, modern typography to make your pages look cool and stand out from the rest of the internet.
Example
This is a paragraph with some sample text. Did you know that the latest version of mini.css is codenamed Gluon? Well, now you do!
Remember that mini.css is totally free, no fine print involved!
Common textual elements
Customization
- Text color can be changed globally by changing the value of the
--fore-colorvariable. - Background color can be changed globally by changing the value of the
--back-colorvariable. - Border color can be changed globally by changing the value of the
--border-colorvariable. This affects the color of<hr>elements. - Universal margin for elements can be changed globally by changing the value of the
--universal-marginvariable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen. - Universal padding for elements can be changed globally by changing the value of the
--universal-paddingvariable. - You can change the color of links by changing the values of the
--a-link-colorand--a-visited-colorvariables.
Headings
+All of the HTML5 heading elements are styled, using a customizable ratio and simple rules, providing a clean base for your web app's titles. Apart from the headings themselves, customized rules are provided for displaying subheadings or explanatory text below your web app's headings.
Example
Heading 1Subheading
Heading 2Subheading
Headings
Customization
- Text color can be changed globally by changing the value of the
--fore-colorvariable. This will affect the color of the headings' main text. - Secondary text color can be changed globally by changing the value of the
--secondary-fore-colorvariable. This will affect the color of subheadings. - Universal margin for elements can be changed globally by changing the value of the
--universal-marginvariable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen. - You can change the ratio of headings' size by chaning the value of the
--heading-ratiovariable. Bear in mind that the value of this variable must be unitless to work properly.
Images & captions
+Image elements are responsive by default, automatically scaling down as necessary to display properly on smaller devices. Images retain their original aspect ratio and they will never scale above their original size.
If you want to add captions to images, you can use HTML5 figure elements, along with their related captions.
Example
Images & captions
Customization
- You can change the text color of
<figcaption>elements by changing the value of the--secondary-fore-colorvariable. - Universal margin for elements can be changed globally by changing the value of the
--universal-marginvariable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.
Lists
+List elements, both unordered and ordered, are minimally styled to match with the rest of the framework's aesthetics. Their margins and padding are reset to properly align with the rest of the common HTML5 elements, providing a stable foundation for all of your web app's lists.
Example
- Apple
- Orange
- Strawberry
- Wake up
- Eat breakfast
- Go to work
Lists
Customization
- Text color can be changed globally by changing the value of the
--fore-colorvariable. - Background color can be changed globally by changing the value of the
--back-colorvariable. - Universal margin for elements can be changed globally by changing the value of the
--universal-marginvariable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen. - Universal padding for elements can be changed globally by changing the value of the
--universal-paddingvariable.
Code & quotations
+Code blocks and quotation elements are styled using custom rules that help make them stand out from the rest of the text, while inline code and keyboard input tags are minimally styled, aiming not to break the flow of regular text.
Example
This is some text with some inline source code and some keyboard input.
function sum(num1, num2){
@@ -137,6 +143,7 @@ Code & quotations
Customization
- Text color can be changed globally by changing the value of the
--fore-color variable. This will affect the text color of <code> and <pre> elements and background color of <kbd> elements. - Background color can be changed globally by changing the value of the
--back-color variable. This will affect the background color of <blockquote> elements and text color of <kbd>. - You can change the background color of
<code> and <pre> elements by changing the value of the --secondary-back-color variable. - You can change the text color of
<blockquote> elements by changing the value of the --secondary-fore-color variable. - You can change the border color of
<pre> and <blockquote> elements by changing the value of the --secondary-border-color variable. - You can change the border color of the left border of
<pre> elements by changing the value of the --pre-color variable. - You can change the border color of the left border of
<blockquote> elements by changing the value of the --blockquote-color variable. - Universal margin for elements can be changed globally by changing the value of the
--universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen. - Universal padding for elements can be changed globally by changing the value of the
--universal-padding variable. - Universal border radius for elements can be changed globally by changing the value of the
--universal-border-radius variable.
Grid system
+The grid system of mini.css utilizes the Flexbox layout to provide you with a simple, modern, responsive layout system for your web apps. Like most modern CSS frameworks' grid systems, it is composed of three main components - containers, rows and columns:
- The container (
.container) is the outermost layer of the grid system and serves as a fluid wrapper, which can be used as the basis for your layout. - Inside the container, you can add one or more rows (
.row), which will in turn house the columns.
@@ -301,6 +308,7 @@ - Universal padding for elements can be changed globally by changing the value of the
--universal-paddingvariable. This only affects the padding of the container.
Screen sizes and width
Each column class is defined by specifying a s
Customization
Cards
+mini.css provides you with cards (.card), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the grid system, meaning that they need to be placed inside a grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.
Example
Card 1
This is a basic card with some sample content.
Alternative sizes
You can create small (.small, 24
Customization
--card-fore-color variable.--card-back-color variable.--card-border-color variable.--universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.--universal-border-radius variable.
Card sections
+Card content is usually organized in smaller sections (.section) to be more easily digestible. A card section can be any valid HTML5 element with the appropriate class applied to it.
Example
Title section
This is a section with some textual content.
Media sections
You can create sections for media (.media
Customization
- Text color for cards and card sections can be changed by changing the value of the
--card-fore-colorvariable. - Background color for cards and card sections can be changed by changing the value of the
--card-back-colorvariable. - Border color for cards and card sections can be changed by changing the value of the
--card-border-colorvariable. - You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.
- Universal padding for elements can be changed globally by changing the value of the
--universal-paddingvariable.
Forms & input
+Forms, labels and common HTML5 input elements have been styled using clean, modern rules, improving the accessibility and usability of your web apps' forms.