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:
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.
@@ -56,7 +53,7 @@
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!
-
Sample code
<p>This is a paragraph. with some <strong>bold text</strong> and some <em>italics text</em>.</p>
+
Sample code
<p>This is a paragraph. with some <strong>bold text</strong> and some <em>italics text</em>.</p><ahref="#">This is a link.</a><small>This is some small text.</small><sub>Subscript</sub>
@@ -78,7 +75,7 @@
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.
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.
<p>This is some text with some inline <code>source code</code> and some keyboard <kbd>input</kbd>.</p>
+
Sample code
<p>This is some text with some inline <code>source code</code> and some keyboard <kbd>input</kbd>.</p><pre>function sum(num1, num2){ return num1 + num2;}</pre>
@@ -154,7 +151,7 @@
Each column class is defined by specifying a screen size (small - sm, medium - md or large - lg) and a column width (a value between 1 and 12 or you can omit it for a fluid column), separated by dashes (e.g. .col-sm-6 for a 6-wide column on a small screen). Using these you can apply different layouts for different screen sizes, by altering the width of columns, using multiple classes. Note that column widths are applied recursively, meaning that if you do not specify a width for a specific screen size the column will use the width applied for the previous largest screen size.
You can create small (.small, 240px wide) or large (.large, 480px wide) cards by applying the appropriate modifiers to a card. Apart from that, you can also create fluid (.fluid) cards, that take up as much space as is available, however you will have to place these cards inside a grid layout's columns, effectively adding one extra step for them to display properly.
You can create sections for media (.media), such as images or videos (using an <img> or a <iframe> element respectively). These sections are styled appropriately for presentation of media content, meaning that the content will scale appropriately to fill up the available space.
Example
Card with image
Card with video
@@ -375,7 +372,7 @@
<divclass="section"></div><p>This should have been a section!</p></div>
Don't: Avoid mixing regular content with content in sections. Instead, wrap all of your card's contents in sections.
-
Notes
While not mandatory, it is highly suggested that you wrap all of your cards' contents in one or more sections.
Remember that a section can be any valid HTML5 element, so you can apply them to headings, paragraphs, input elements etc.
Buttons and button-like input elements have been styled by default to be consistent across browsers. You can also style other elements, such as links or form labels, to look like buttons, using the appropriate class (.button) or the button role.
To make your buttons stand out, you can give them a primary (.primary), secondary (.secondary), tertiary (.tertiary) or inversed (.inverse) color palette.
If you want your drawer menus to not expand into normal containers on larger screens, simply add the appropriate modifier (.persistent) on the checkbox controlling the drawer and its toggle button.
Don't: You should not place anything between the checkbox controlling the drawer and the container.
Notes
Drawer menus are responsive by default and will expand into normal containers on screens larger or equal to 768px wide.
It is highly recommended to place your drawer's toggle button inside your web app's header element.
You can combine the navigation bar element with the drawer menu for better results.
Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the drawer menu not rendering or behaving properly.
Customization
Text color can be changed globally by changing the value of the --fore-color variable. This will affect the text color of the toggle button and items inside the drawer container.
Background color for the drawer container can be changed by changing the value of the --drawer-back-color variable.
Border color for the drawer container can be changed by changing the value of the --drawer-border-color variable.
Text color for the drawer close button can be changed by changing the values of the --drawer-close-color.
Background color for the drawer close button when focused or hovered over can be changed by changing the values of the --drawer-hover-back-color.
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.
+
+
Tables
+
Tables are styled in a minimal, modern and responsive manner, allowing users on all devices to easily browse tabular data, taking advantage of the Flexbox layout's capabilities. To make tabular data properly display on mobile devices, remember to specify a data-label attribute for each <> element (usually same as the heading of the column).
Don't: Avoid placing <td> elements in the <thead> of your tables, as well as placing <th> elements in the <tbody>.
+
Notes
Remember to always specify a data-label attribute for all of your <td> elements, otherwise they will not display properly on mobile.
Due to the way tables are displayed, the <tfoot> element is not supported.
Tables are vertically scrollable by default, with a max-height property of 400px.
+
Customization
Text color for <th> and <td> elements can be changed by changing the values of the --table-head-fore-color and --table-body-fore-color variables respectively.
Background color for <th> and <td> elements can be changed by changing the values of the --table-head-back-color and --table-body-back-color variables respectively.
Border color for tables can be changed by changing the value of the --table-border-color variable.
Border color for the separator between a table's heading and a table's body can be changed by changing the value of the --table-border-separator-color variable.
Alternative background color for <td> elements in striped tables can be changed by changing the value of the --table-body-alt-back-color variable.
Hover background color for <tr> elements in hoverable tables can be changed by changing the value of the --table-body-hover-back-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.
+
+
Text highlighting
+
The native HTML5 mark element has been minimally styled to allow for easy text highlighting.
+
Example
This is a paragraph with some highlighted text.
+
Sample code
<p>This is some <mark>highlighted text</mark>.</p>
+
Modifiers
+
Color variants
You can change the color of highlighted text, based on context by applying the appropriate class (secondary - .secondary or tertiary - .tertiary).
Example
This is a secondary highlight and this is a tertiary highlight.
Sample code
<p>This is a <markclass="secondary">secondary highlight</mark> and this is a <markclass="tertiary">tertiary highlight</mark>.</p>
Style variants
You can make highlights look like tags (.tag) or display as inline blocks (.inline-block), by applying the appropriate class.
Example
This is a highlight styled as a tag.
This is some highlighted text that is displayed as an inline block.
Sample code
<p>This is a highlight styled as a <markclass="tag">tag</mark>.</p>
+<p><markclass="inline-block">This is some highlighted text that is displayed as an inline block.</mark></p>
+
Best practices
<markclass="inline-block"><markclass="secondary">Secondary highlight</mark> inside a inline block.</mark>
Do: You can nest a highlight inside another one, if the outer one is displayed as an inline-block.
<markclass="primary inverse">Highlight</mark>
+
Don't: Avoid applying multiple color modifiers on the same highlight.
+
Notes
Highlighted text scales according to its parent element, so it can be used inside any kind of element (headings, forms, paragraphs etc.).
+
Customization
Text color for highlighted text can be changed by changing the value of the --mark-fore-color variable.
Background color for highlighted text can be changed by changing the value of the --mark-back-color variable.
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.
+
+
Toasts
+
mini.css provides you with toast messages (.toast), allowing you to display native-looking notifications on mobile devices.
+
Example
This is a toast message!
+
Sample code
<spanclass="toast">This is a toast message!</span>
+
+
+
Notes
Toast elements do not have any pre-defined behavior, but you can use Javascript to add functionality to them.
+
Customization
Text color for toast messages can be changed by changing the value of the --toast-fore-color variable.
Background color for toast messages can be changed by changing the value of the --toast-back-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.
+
+
Tooltips
+
You can utilize the aria-label property to create accessible tooltips (.tooltip), allowing you to display explanatory text for different elements.
+
Example
Hover over this text to see a tooltip!
+
Sample code
<spanclass="tooltip"aria-label="Tooltip text">Hover over text to see tooltip</span>
+
Modifiers
+
Position variant
You can make tooltips display below the related text, by adding the appropriate class (.bottom).
Example
Hover over this text to see a tooltip!
Sample code
<spanclass="tooltip bottom"aria-label="Tooltip text">Hover over text to see tooltip</span>
+
+
Notes
Tooltips depend on the aria-label property, so they are fully accessible on screen readers.
+
Customization
Text color for tooltips can be changed by changing the value of the --tooltip-fore-color variable.
Background color for tooltips can be changed by changing the value of the --tooltip-back-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.
+
+
Modal dialogs
+
mini.css provides you with a modal dialog component to display messages to users. It is composed of three components - the modal dialog, the toggle button and the close button:
+
To create a modal dialog, simply create a checkbox input, applying the appropriate class to it (.modal), immediately followed by a <div> container. The former serves as your modal dialog's control, while the latter is the actual modal dialog container.
+
Create a label anywhere outside your modal dialog's container for the checkbox controlling your modal dialog. This will serve as the toggle button for your modal dialog.
+
Finally, inside your modal dialog's container, add another label for the checkbox controlling your modal dialog, applying the appropriate class (.modal-close). This will serve as the close button for your modal dialog.
+
+
Example
Modal
This is a modal dialog!
+
Sample code
<labelfor="modal-control">Show modal</label>
+
+<inputtype="checkbox"id="modal-control"class="modal">
+<div>
+<divclass="card">
+<labelfor="modal-control"class="modal-close"></label>
+<h3class="section">Modal</h3>
+<pclass="section">This is a modal dialog!</p>
+</div>
+</div>
+
+
Best practices
<inputtype="checkbox"id="modal-control"class="modal">
+<divrole="dialog"aria-labelledby="dialog-title">
+<divclass="card">
+<labelfor="modal-control"class="modal-close"></label>
+<h3class="section"id="dialog-title">Modal</h3>
+<pclass="section">This is a modal dialog!</p>
+</div>
+</div>
Do: You can use the role="dialog" to add accessibility to your modal dialogs. Remember to properly label it and manage keyboard focus, as required.
<inputtype="checkbox"id="modal-control"class="modal">
+<!-- Do not place other stuff between these -->
+<div>
+<divclass="card">
+<labelfor="modal-control"class="modal-close"></label>
+<h3class="section">Modal</h3>
+<pclass="section">This is a modal dialog!</p>
+</div>
+</div>
Don't: You should not place anything between the checkbox controlling the modal dialog and the container.
+
Notes
Modal dialogs should be used in combination with the card component for best results.
Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the modal dialog not rendering or behaving properly.
You can omit the toggle for the modal dialog and use Javascript to show/hide it, instead. You can also use any correctly linked label inside the modal dialog to change its state.
+
Customization
Background color for the modal dialog overlay can be changed by changing the value of --modal-overlay-color.
Text color for the modal dialog close button can be changed by changing the value of the --modal-close-color.
Background color for the modal dialog close button when focused or hovered over can be changed by changing the value of the --modal-close-hover-color.
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.
+
+
Spoilers & accordions
+
mini.css provides you with accessible spoilers and accordions. They are composed of two components - the wrapper, the toggle button and the content container:
+
To create a collapsible spoiler, simply create a <div>, applying the appropriate class to it (.collapse). This serves as the wrapper for the collapsible spoiler.
+
Inside the wrapper, create a checkbox or radio input, immediately followed by a <label> for the checkbox. The former serves as your collapsible spoiler's control, while the latter is the toggle button for your collapsible spoiler.
+
Create a <div> right after the <label>. This will serve as the container for the collapsible content.
+
+
If you want to create an accordion, simply repeat the last two steps above for each section of the accordion. In order to make collapsible spoilers and accordions fully accessible, it is highly recommended to add the aria-hidden="true" attribute to all labels and inputs that control the behavior of these components.
+
Example
This is the first section of the collapse
This is the second section of the collapse
+
This is the first section of the accordion
This is the second section of the accordion
+
Sample code
<divclass="collapse">
+<inputtype="checkbox"id="collapse-section1"checkedaria-hidden="true">
+<labelfor="collapse-section1"aria-hidden="true">Collapse section 1</label>
+<div>
+<p>This is the first section of the collapse</p>
+</div>
+<inputtype="checkbox"id="collapse-section2"aria-hidden="true">
+<labelfor="collapse-section2"aria-hidden="true">Collapse section 2</label>
+<div>
+<p>This is the second section of the collapse</p>
+</div>
+</div>
<divclass="collapse">
+<inputtype="radio"id="accordion-section1"checkedaria-hidden="true"name="accordion">
+<labelfor="accordion-section1"aria-hidden="true">Accordion section 1</label>
+<div>
+<p>This is the first section of the accordion</p>
+</div>
+<inputtype="radio"id="accordion-section2"aria-hidden="true"name="accordion">
+<labelfor="accordion-section2"aria-hidden="true">Accordion section 2</label>
+<div>
+<p>This is the second section of the accordion</p>
+</div>
+</div>
+
+
Best practices
<divclass="collapse">
+<inputtype="checkbox"id="collapse-section1"checkedaria-hidden="true">
+<!-- Do not place other stuff between these -->
+<labelfor="collapse-section1"aria-hidden="true">Collapse section 1</label>
+<!-- Do not place other stuff between these -->
+<div>
+<p>This is the first section of the collapse</p>
+</div>
+</div>
Don't: You should not place anything between the checkbox controlling the collapsible spoiler and its label or between the label and the content container.
+
Notes
Make sure all the radio buttons in the same accordion have the same name.
If you want a collapsible spoiler or an accordion section to be expanded by default, you can add the checked attribute to the respective collapsible spooiler's or section's control.
The max-height of the content container is 400px.
Using the aria-hidden="true" attribute is highly recommended, as screen readers will ignore the controls of the collapsible spoiler or accordion and read all the contained content normally.
+
Customization
Background color, text color and background color on hover for the collapsible spoiler's labels can be changed by changing the values of --collapse-label-back-color, --collapse-label-fore-color and --collapse-label-hover-back-color respectively.
Border color for the collapsible spoiler can be changed by changing the value of the --collapse-border-color.
Background color for the collapsible spoiler's content can be changed by changing the value of the --collapse-content-back-color.
Background color and border for the spoiler's content selected labels can be changed by changing the values of the --collapse-selected-label-back-color and --collapse-selected-label-border-color respectively.
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.
+
+
Progress bars
+
Progress bars are minimally styled to match with the rest of the framework's aesthetics and be consistent across all modern browsers.
+
Example
+
Sample code
<progressvalue="450"max="1000"></progress>
+
Modifiers
+
Inline progress bars
You can create inline progress bars (.inline), by applying the appropriate modifier.
Don't: Avoid applying two color modifiers on the same progress bar.
+
Notes
Progress bars are designed to work with a max="1000" attribute, as this covers the most common use-cases.
+
Customization
Foreground color for progress bars can be changed by changing the value of the --progress-fore-color variable.
Background color for progress bars can be changed by changing the value of the --progress-back-color variable.
You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.
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 border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.
+
+
Donut spinners
+
mini.css provides you with animated loading indicators (.spinner), which you can use to indicate that some content is loading.
+
Example
+
Sample code
<divclass="spinner"></div>
+
Modifiers
+
Color variants
You can create primary, secondary or tertiary (.primary, .secondary, .tertiary) donut spinners, simply by adding the appropriate color modifier.
Don't: Avoid inserting text inside donut spinners.
<divclass="spinner primary secondary"></div>
Don't: Avoid applying two color modifiers on the same donut spinner.
+
Notes
You can use either a <div> or a <span> element to create a donut spinner.
You can add the role="progressbar" attribute to spinner donut elements to increase accessibility.
You can inline donut spinners inside a paragraph or some other textual content.
+
Customization
Foreground color for donut spinners can be changed by changing the value of the --spinner-fore-color variable.
Background color for donut spinners can be changed by changing the value of the --spinner-back-color variable.
You can customize the colors of different color variants by changing the values of the related variables in their respective definitions.
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.