Basics & Browser Support

Min's minimalism has several advantages. Firstly, it doesn't prescribe a specific design for you. Each element has just a handful of CSS rules applied to it, and as a result overriding default styles is extremely easy. Min being only 995 bytes means that there's less of it to get in your way when you want to customize your site. Contrast this with Bootstrap, where you may have to override many different rules to get what you want. Secondly, there's less markup to type. Min requires fewer superfluous divs and classes than any other framework, allowing every part of your code to be readable and semantically correct.

Because of its minimalist goal, Min core has fewer features than Bootstrap. Many of the features omitted in Min are superfluous, unsemantic, and just plain idiotic (I'm looking at you, text-left class.) However, when using the 3.5kB Min Bootstrap plugin, Min has full feature parity with Bootstrap. If you are migrating a complex site from Bootstrap to Min, it is highly recommended that you use this plugin.

Chrome IE FF Opera Safari
33 - 2 (27.32%) [2014 - 2009] 11 - 9 (5.22% + 0.20% + 0.20%) [2014 - 2011] 27 - 3.5 (18.66% + 0.09% + 0.04%) [2014 - 2009] 19 - 10 (1.51% + 1.32%) [2014 - 2009] 7 - 4 (3.88% + 11.66% + 5.55%) [2014 - 2009]
None 8 - 5.5 (4.56%) [2009 - 2000] 3 (0.03%) [2008] 9 (0.00%) [2006] None
1 - 0.2 (0.00%) [2008 - 2008] 5 - 1 (0.01%) [1999 - 1995] 2 - 0.8 (0.05%) [2006 - 2004] 8 - 2 (0.00%) [2005 - 1996] 3 - 1 (0.00%) [2007 - 2003]

Key: Full support, partial support, and no support. Market share data from Wikimedia is in parens (in the format desktop+mobile+tablet); browser release dates are in brackets. Due to web crawlers and other mobile browsers, numbers will add up to about 80%. Click on each cell for details (if available.) Partial support means that Min supports that browser but there may be a small visual quibble, such as no rounded corners on buttons, a difference in how the page responds to resizing, or slight table shading differences. Netscape support has ended with the release of Min 2.0 as part of a push towards using semantic HTML5 elements. Replace all <nav> elements with <div>s to make Min work in Netscape 7+.

Buttons

btn-a btn-b btn-c classless 

<a class="btn btn-b smooth">btn-b</a>

btn-sm btn-a btn-sm btn-b btn-sm btn-c btn-sm classless 

<a class="btn btn-b btn-sm smooth">btn-sm</a>

Forms





$ 

<input type="text" class="smooth">
				
<textarea rows="3" class="smooth">
				
<span class="addon">$</span><input type="text" class="smooth">
Be careful with addons! If you do not want a space between the addon and the input make sure that there is no space between the </span> and <input> tags. Example: 
... </span> <input ...
$ 
... </span><input ...
$

Navbars


<nav class="nav" tabindex="-1" onclick="this.focus()">
    <div class="container">
        <a class="pagename current" href="#">Min</a>
        <a href="#">One</a>
        <a href="#">Two</a> 
        <a href="#">Three</a>
    </div>
</nav>
<button class="btn-close btn btn-sm">×</button>

Tables

#Widgets SoldRevenue (£)Profit (£)
15102
210204
35001000200


<table class="table">
	<thead>
		<tr>
			<th>#</th>
			<th>Widgets Sold</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>5</td>
		</tr>
		<tr>
			<td>2</td>
			<td>10</td>
		</tr>
		<tr>
			<td>3</td>
			<td>500</td>
		</tr>
	</tbody>
</table>

Icons

Android Safe ☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №

The "Android Safe" icons work everywhere, tested on hundreds of devices.
Total Set ✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩

Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.) 
<i class="ico">Copy and paste icons from above here!</i>

Grids

12
11
1
10
2
9
3
8
4
7
5
6
6
5
7
4
8
3
9
2
10
1
11
12

<div class="row">
    <div class="col c12">12</div>
</div>
					
<div class="row">
    <div class="col c4">4</div>
    <div class="col c8">8</div>
</div>

Headings

h1

h2

h3

h4

h5
h6

<h1>Level One Heading</h1>

Messages

Watch out! You almost scrolled off the page. There are reports of sea monsters past the end of the page and we do not advise you go there. 
<div class="msg">
	<strong>Alert headline!</strong>
	Message text
</div>

a scary sea monster