Utility

The utility module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

Quick overview

Every website or app has different needs and no CSS framework can predict them all. The utility module addresses this issue by providing you with a handful of utility and helper classes to make common, repetitive declarations easier. These classes include, but are not limited to, generic border styling and shadows, some responsive sizing and spacing utilities and a few other things, like a close icon, breadcrumbs styling and visiblity helpers for screen readers.

Quick start

To use the utility module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to 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">

Visibility helpers

You can hide content for all your users, using the default hidden attribute. However, we provide you with the .hidden class for the same purpose, as well as the .visually-hidden class which will make your content hidden, except for screen readers.

Sample code

<span class="hidden">Hidden text</span>
<span class="visually-hidden">Screen-reader-only text</span>

Notes

Both classes utilize !important declarations, so be careful when and how to use them.

<span class="hidden visually-hidden">Not a good idea</span>

Don't: Avoid using both classes at the same time. Instead, use .hidden to hide content for all users, .visually-hidden to hide it for non-screen-reader users or aria-hidden="true" to hide it for screen-reader-only users.

Generic borders & shadows

This is a paragraph with a piece of bordered text.

No shadow Small shadow Medium shadow Large shadow

Use the .bordered class to apply a generic black border with 25% opacity to any element. Apart from that you can use the .rounded and .circular classes to create generic border radiuses. Finally, you can use the .shadow-small, .shadow-medium and .shadow-large to add a generic box-shadow to any element, as well as the .shadow-none class to remove it entirely.

Sample code

<span class="bordered">Bordered</span>
<span class="rounded">Rounded</span>
<span class="circular">Circular</span>
<span class="shadow-none">No shadow</span>
<span class="shadow-small">Small shadow</span>
<span class="shadow-medium">Medium shadow</span>
<span class="shadow-large">Large shadow</span>

Notes

All of these classes utilize !important declarations, so be careful when and how to use them.
The .bordered class was originally created with elements such as buttons in mind, to allow users highlighting certain elements in their designs, without having to change any default styles.
All of the above classes can be used with most modern HTML elements.

<span class="bordered rounded shadow-small">Stylized element</span>

Do: You can combine a generic border with any border radius or shadow or even both.

<span class="rounded circular">Bad radius</span>
<!-- or -->
<span class="shadow-small shadow-large">Bad shadow</span>

Don't: Avoid combining two classes of the same type (i.e. two radii or two shadow styles), as they might overwrite each other and cause unexpected behavior.

Responsive sizing & spacing classes

Helper classes for the padding and margin attributes are provided in the form of .responsive-margin and .responsive-padding classes. Both of these classes are responsive, allowing you to collapse the spacing and size of elements on different displays to make better use of the device's viewport.

Sample code

<div class="responsive-padding">Responsive padding</div>
<div class="responsive-margin">Responsive margin</div>

Notes

If the default values of these classes are not suited to your needs, check out the customization page.
Both classes utilize !important declarations, so be careful when and how to use them.

<div class="responsive-padding responsive-margin">Responsive padding and margin</div>

Do: You can use both of these classes to make certain element adapt to changes. This could be especially useful for certain grid layouts.

Responsive visibility helpers

You can hide content (either fully or only visually) for certain screens, using the responsive visibility helpers. To hide elements completely use the .hidden-SCR_SZ syntax, replacing SCR_SZ with one of the available screen size names (sm for smaller screens, md for medium-sized screens or lg for larger screens). If you want to hide certains elements for all users, except screen readers, replace .hidden with .visually-hidden, followed by the screen size name.

Sample code

<span class="hidden-sm">Hidden in smaller screens</span>
<span class="hidden-md">Hidden in medium-sized screens</span>
<span class="hidden-lg">Hidden in larger screens</span>

<span class="visually-hidden-sm">Visually hidden in smaller screens</span>
<span class="visually-hidden-md">Visually hidden in medium-sized screens</span>
<span class="visually-hidden-lg">Visually hidden in larger screens</span>

Notes

Responsive visibility helper classes utilize !important declarations, so be careful when and how to use them.
The specific breakpoints for small, medium and large screen sizes are as follows:
- small: less than 768px wide
- medium: more than or equal to 768px wide but less than 1280px wide
- large: 1280px wide or more
Responsive visibility helper classes are independent, meaning that hiding an element in one screen size will not affect it visibility in any other screen size.

<span class="hidden-sm hidden-md">Hidden in smaller and medium-sized screens, visible in larger screens</span>
<!-- or -->
<span class="visually-hidden-md visually-hidden-lg">Visually hidden in medium-sized and larger screens, visible in smaller screens</span>
<!-- or -->
<span class="hidden-sm visually-hidden-lg">Hidden in smaller screens, visually hidden in larger screens, visible in medium-sized screens</span>

Do: You can combine responsive visibility helpers for different sizes, based on your needs.

<span class="hidden-sm visually-hidden-sm">Not a good idea</span>

Don't: Avoid combining responsive visibility helpers for the same screen size. Combining both of them might cause unexpected behavior.

Breadcrumbs

Root
Folder
File

Breadcrumbs are usually used to show the navigational hierarchy of pages or folders. To use them, simply create a <ul> element that implements the .breadcrumbs class. Inside this unordered list, add as many <li> elements as needed to show your hierarchy. You can add links to the list elements, as necessary.

Sample code

<ul class="breadcrumbs">
  <li><a href="#">Root</a></li>
  <li><a href="#">Folder</a></li>
  <li>File</li>
</ul>

Notes

The separators between breadcrumbs are added using some tricky CSS rules. Due to that, there might be a few browser versions or devices where you can see part of the seams between the element separators.
Breadcrumbs show a hierarchy, an ordered list. However, we do not use the <ol> element, as it might conflict with some custom styles we've seen people use.
If you want to add some accesibility to your breadcrumbs, you can add the role="navigation" attribute, although it is not required.

<ol class="breadcrumbs">
  <li><a href="#">Does</a></li>
  <li><a href="#">Not</a></li>
  <li>Work</li>
</ol>

Don't: The structure of the breadcrumb component prohibits the use of <ol> in place of the <ul> element.

<ul class="breadcrumbs">
  <li><a href="#">Root</a>
    <ul class="breadcrumbs">
      <li><a href="#">Folder</a></li>
    </ul>
  </li>
  <li>File</li>
</ul>

Don't: Avoid nesting lists, breadcrumbs or a combination of the two inside the .breadcrumbs list, as this might cause unexpected behavior.

Close icon

To create a close icon, simply add an element implementing the .close class.

Sample code

<span class="close"></span>

Notes

The close icon behaves similar to a button when hovering over it or otherwise focusing or selecting it.

<div class="close"></div>

Do: You can use a handful of other HTML elements instead of the <span> element showcased in the example above, most commonly <div> elements.

<button class="close"></button>

Do: If you want your close icon to behave like a button (i.e. register as a button on screen readers and have the required logic attached to it), you can apply the .close class to a <button> element instead. You can even apply any of the button color variant classes.

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.