Introduction

A CSS framework inspired by TailwindCSS which allows you to rapidly build modern websites without ever leaving your HTML.

Mint-UI is utility-first CSS framework packed with classes like displayFlex, pt4, textCenter, gridColSpan6 etc that can be composed to build any design, directly in your markup. Even with the same color palette and sizing scale, it's easy to build the same component with a completely different look in the next project.

Installation

You can directly import the css file in your html using the following link tag.

Add mint.css

<link rel="stylesheet" href="https://mint-css.netlify.app/styles/mint.css">

Note: Import your own css styles after you import mint-ui, so when you want you can override mint-ui classes.

Core Concept

Learn how utitlity first css works.

With Mint, you style elements by applying pre-existing classes directly in your HTML.
This approach allows us to implement a completely custom component design without writing a single line of custom CSS.
Aside from that maintaining a utility-first CSS project turns out to be a lot easier than maintaining a large CSS codebase, simply because HTML is so much easier to maintain than CSS.

MintUI follows camelCase to name its classes.

Let's see how it works, consider following example of a card.

Joey Tribbiani

ActorPreviously: Cologne sampler, Acting Teacher, WaiterEmail: joeytribbiani@joey.com

User information card

<div class="displayFlex p2 bgWhite rounded border borderGray2 shadowMdGray2">
        <img src="./joey.jpg" class="w24 roundedFull mr3" alt="user"/>
        <div class="displayFlex flexCol">
            <p class='fontBold lineHeightMd'>Joey Tribbiani</p>
            <small class='mb1 fontSemiBold'>Actor</small>
            <em class="mb2 textXs textGray5">Previously: Cologne sampler, Acting Teacher, Waiter</em>
            <small class=''>Email: joeytribbiani@joey.com</small>
        </div>
    </div>

In the above example we've used:

flexbox and padding utilities ('displayFlex' and 'p2') to control the card layout.
border, background-color and shadow utilities ('border, borderGray2, rounded', 'bgWhite' and 'shadowMdGray2') to control the look of card.
width, border-radius and margin utilities ('w24', 'roundedFull' and 'mr3') to give width to image, make it round and give some right margin.
text and font utilities ('textXs, textGray5' and 'fontBold, fontSemiBold') to control font-size, text-color and font-weight of text.

Concerns?

The biggest maintainability concern when using a utility-first approach is managing commonly repeated utility combinations. This is easily solved by extracting components, usually as template partials or components.