mini.css

small normal large button

Use rows and columns for normal alignment, use input-groups in rows without columns for unaligned but just vertical forms or predesigned forms etc.

Add align-items:center hack style

Aligned form (using width and grid - no container):

Website

Username

Username

URL

Description

Inline form (default style):

Username  

Email  

Password

Aligned form (using width and grid):

Website

URL

Description

More inputs

Test Demo

Checkbox

Disabled

Value 1 Value 2 Value 3

Normal button Link button Disabled button

Button groups can also be created, utilising the .button-group class. Simply add a set of buttons in it and you're good to go. Check it out below:

File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. mini.css deals with the problem, using a workaround involving labels that use the button class, which applies the exact same style to those labels. Just link it to the <input type="file"> element of your choice and you're good to go. For example:

 Upload file

There are also different kinds of buttons, specifically primary, secondary and tertiary, as well as small and large buttons. All of these types can be specified as classes. For example:

Primary normal button Small primary disabled label button