Why it's awesome

Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!

Do you want to star it, tweet it, or share it with anyone? So do it! This means a lot to me ♥

Getting Started

There are some ways to get started. First, see all download options available below, then choose the most suitable option for your need. Now you should add the main file of the Milligram and the CSS Reset in the header of your project. Just that!

Download Milligram

<span class="pln">$ bower install milligram</span>

Install with npm

Milligram is also available to install using npm.

<span class="pln">$ npm install milligram</span>

Install with Yarn

Milligram is also available to install using Yarn.

<span class="pln">$ yarn add milligram</span>

What's included

Once downloaded, extract the compressed folder to see the main file in the uncompressed and minified version.

<span class="pln">milligram</span><span class="pun">/</span><span class="pln">
</span><span class="pun">├──</span><span class="pln"> dist</span><span class="pun">/</span><span class="pln">
</span><span class="pun">│</span><span class="pln">   </span><span class="pun">├──</span><span class="pln"> milligram</span><span class="pun">.</span><span class="pln">css
</span><span class="pun">│</span><span class="pln">   </span><span class="pun">└──</span><span class="pln"> milligram</span><span class="pun">.</span><span class="pln">min</span><span class="pun">.</span><span class="pln">css
</span><span class="pun">├──</span><span class="pln"> example</span><span class="pun">.</span><span class="pln">html
</span><span class="pun">├──</span><span class="pln"> license
</span><span class="pun">└──</span><span class="pln"> readme</span><span class="pun">.</span><span class="pln">md</span>

Usage

First, use any method mentioned above to download Milligram. Then, just add these tags in the head. Milligram is also available via CDN.

<span class="pln"><!-- Google Fonts -->
</span><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"><span class="pln">

<!-- CSS Reset -->
</span><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"><span class="pln">

<!-- Milligram CSS -->
</span><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"><span class="pln">

<!-- You should properly set the path from the main file. --></span>

CLI

A CLI for getting started with Milligram. It offers a super simple boilerplate project with Milligram.

<span class="pln">$ npm install </span><span class="pun">-</span><span class="pln">g milligram</span><span class="pun">-</span><span class="pln">cli</span>

Create a new app using the command milligram init, then install dependencies and run with npm start.

<span class="pln">$ milligram init new_app
$ cd new_app
$ npm start</span>

See more examples of getting started.

Typography

CSS3 introduces a few new units, including the rem unit, which stands for "root em". The rem unit is relative to the font-size of the root element html . That means that we can define a single font size on the root element, and define all rem units to be a percentage of that. The typography has font-size defined in 1.6rem (16px) and line-height in 1.6 (24px). Milligram uses the font-family Roboto, created by Christian Robertson, and provided by Google.

<span class="pln"><!-- Base font-size and line-height -->
</span><p><span class="pln">The base type is 1.6rem (16px) over 1.6 line height (24px)</span></p><span class="pln">

<!-- Other elements to text markup -->
</span><a><span class="pln">Anchor</span></a><span class="pln">
</span><em><span class="pln">Emphasis</span></em><span class="pln">
</span><small><span class="pln">Small</span></small><span class="pln">
</span><strong><span class="pln">Strong</span></strong><span class="pln">
</span><u><span class="pln">Underline</span></u><span class="pln">

<!-- Default Headings -->
</span><h1><span class="pln">Heading</span></h1><span class="pln">
</span><h2><span class="pln">Heading</span></h2><span class="pln">
</span><h3><span class="pln">Heading</span></h3><span class="pln">
</span><h4><span class="pln">Heading</span></h4><span class="pln">
</span><h5><span class="pln">Heading</span></h5><span class="pln">
</span><h6><span class="pln">Heading</span></h6><span class="pln">

<!-- The base font-size is set at 62.5% for having the convenience of sizing rems in a way that is similar to using px. So basically 1.6rem = 16px. --></span>

See more examples of typography.

Blockquotes

The Blockquote represents a section that is quoted from another source.

<blockquote><span class="pln">
  </span><p><em><span class="pln">Yeah!! Milligram is amazing.</span></em></p>
</blockquote>

See more examples of blockquotes.

Buttons

The Button, an essential part of any user experience. Buttons come in three basic styles in Milligram: The button element has flat color by default, whereas .button-outline has a simple outline around, and .button-clear is entirely clear.

<span class="pln"><!-- Default Button -->
</span><a class="button" href="#"><span class="pln">Default Button</span></a><span class="pln">

<!-- Outlined Button -->
</span><button class="button button-outline"><span class="pln">Outlined Button</span></button><span class="pln">

<!-- Clear Button -->
</span><input class="button button-clear" type="submit" value="Clear Button"><span class="pln">

<!-- Easily apply the `.button` class for button style in the anchor element. --></span>

See more examples of buttons.

Lists

The List is a very versatile and common way to display items. Milligram has three types of lists: The unordered list use ul element will be marked with a outline circles, the ordered list use ol element and your items will be marked with numbers, the description list use dl element and your items will not be marking, only spacings.

<span class="pln"><!-- Unordered list -->
</span><ul><span class="pln">
  </span><li><span class="pln">Unordered list item 1</span></li><span class="pln">
  </span><li><span class="pln">Unordered list item 2</span></li><span class="pln">
</span></ul><span class="pln">

<!-- Ordered list -->
</span><ol><span class="pln">
  </span><li><span class="pln">Ordered list item 1</span></li><span class="pln">
  </span><li><span class="pln">Ordered list item 2</span></li><span class="pln">
</span></ol><span class="pln">

<!-- Description list -->
</span><dl><span class="pln">
  </span><dt><span class="pln">Description list item 1</span></dt><span class="pln">
  </span><dd><span class="pln">Description list item 1.1</span></dd><span class="pln">
</span></dl><span class="pln">

<!-- Easily change any `dl`, `ul` or an `ol` to get clear lists, number lists or outline circles. --></span>

See more examples of lists.

Forms

The Form has never been exactly fun, and it can be downright painful on a mobile device with its on-screen keyboard. Milligram helps to make this much easier with design focused on the user experience.

<form><span class="pln">
  </span><fieldset><span class="pln">
    </span><label for="nameField"><span class="pln">Name</span></label><span class="pln">
    </span><input type="text" placeholder="CJ Patoilo" id="nameField"><span class="pln">
    </span><label for="ageRangeField"><span class="pln">Age Range</span></label><span class="pln">
    </span><select id="ageRangeField">
      <option value="0-13">0-13</option>
      <option value="14-17">14-17</option>
      <option value="18-23">18-23</option>
      <option value="24+">24+</option>
    </select><span class="pln">
    </span><label for="commentField"><span class="pln">Comment</span></label><span class="pln">
    </span><textarea placeholder="Hi CJ …" id="commentField"></textarea><span class="pln">
    </span><div class="float-right"><span class="pln">
      </span><input type="checkbox" id="confirmField"><span class="pln">
      </span><label class="label-inline" for="confirmField"><span class="pln">Send a copy to yourself</span></label><span class="pln">
    </span></div><span class="pln">
    </span><input class="button-primary" type="submit" value="Send"><span class="pln">
  </span></fieldset><span class="pln">
</span></form><span class="pln">

<!-- Always wrap checkbox and radio inputs in a label and use a `.label-inline` inside of it --></span>

See more examples of forms.

Tables

The Table element represents data in two dimensions or more. We encourage the use of proper formatting with thead and tbody to create a table. The code becomes cleaner without disturbing understanding.

<span class="pln">
  </span><span class="pln">
    </span><span class="pln">
      </span><span class="pln">
      </span><span class="pln">
      </span><span class="pln">
      </span><span class="pln">
    </span><span class="pln">
  </span><span class="pln">
  </span><span class="pln">
    </span><span class="pln">
      </span><span class="pln">
      </span><span class="pln">
      </span><span class="pln">
      </span><span class="pln">
    </span><span class="pln">
    </span><span class="pln">
      </span><span class="pln">
      </span><span class="pln">
      </span><span class="pln">
      </span><span class="pln">
    </span><span class="pln">
  </span><span class="pln">
</span><table><thead><tr><th><span class="pln">Name</span></th><th><span class="pln">Age</span></th><th><span class="pln">Height</span></th><th><span class="pln">Location</span></th></tr></thead><tbody><tr><td><span class="pln">Stephen Curry</span></td><td><span class="pln">27</span></td><td><span class="pln">1,91</span></td><td><span class="pln">Akron, OH</span></td></tr><tr><td><span class="pln">Klay Thompson</span></td><td><span class="pln">25</span></td><td><span class="pln">2,01</span></td><td><span class="pln">Los Angeles, CA</span></td></tr></tbody></table><span class="pln">

<!-- Prior to the creation of CSS, HTML `table` elements were often used as a method for page layout. This usage has been discouraged since HTML4, and the `table` element should not be used for layout purposes. --></span>

See more examples of tables.

Grids

The Grid is a fluid system with a max width of 112.0rem (1120px), that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. Milligram is different than most because of its use of the CSS Flexible Box Layout Module standard. The advantage is the simplicity, and we know that a functional code is very important for maintainability and scalability. Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There is no restriction on number of columns, but we advise you to follow a design pattern of grid system. See more tips on best practices in the tips.

<span class="pln"><!-- `.container` is main centered wrapper -->
</span><div class="container"><span class="pln">

  </span><div class="row"><span class="pln">
    </span><div class="column"><span class="pln">.column</span></div><span class="pln">
    </span><div class="column"><span class="pln">.column</span></div><span class="pln">
    </span><div class="column"><span class="pln">.column</span></div><span class="pln">
    </span><div class="column"><span class="pln">.column</span></div><span class="pln">
  </span></div><span class="pln">

  </span><div class="row"><span class="pln">
    </span><div class="column"><span class="pln">.column</span></div><span class="pln">
    </span><div class="column column-50 column-offset-25"><span class="pln">.column column-50 column-offset-25</span></div><span class="pln">
  </span></div><span class="pln">

</span></div><span class="pln">

<!-- Every `.column` added inside a `.row` will automatically receive an equal amount of the available area. --></span>

See more examples of grids.

Code

The Code element represents a fragment of computer code. Just wrap anything in a code and it will appear like this. if you need a block, by default, enter the code within the preelement.

.milligram {
  color: #9b4dca;
}

<pre><code><span class="pln">
</span><span class="pun">.</span><span class="pln">milligram </span><span class="pun">{</span><span class="pln">
  color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#9b4dca;</span><span class="pln">
</span><span class="pun">}</span></code></pre>

See more examples of code.

Utilities

Milligram has some functional classes to improve the performance and productivity everyday.

<span class="pln"><!-- Functional Classes -->

<!-- Clear any float  -->
</span><div class="clearfix"><span class="pln">

  <!-- Float either directions -->
  </span><div class="float-left"></div><span class="pln">
  </span><div class="float-right"></div><span class="pln">
</span></div>

See more examples of utilities.

Tips

Tips, techniques, and best practice on using Cascading Style Sheets.

Mobile First

The Mobile First is the design strategy that takes priority development for mobile devices like smartphones and tablets. It means all styles outside of a media queries apply to all devices, then larger screens are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. Milligram use some breakpoints like these:

<span class="com">/* Mobile First Media Queries */</span><span class="pln">

</span><span class="com">/* Base style */</span><span class="pln">
</span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span><span class="pln">

</span><span class="com">/* Larger than mobile screen */</span><span class="pln">
</span><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">40.0rem</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span><span class="pln">

</span><span class="com">/* Larger than tablet screen */</span><span class="pln">
</span><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">80.0rem</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span><span class="pln">

</span><span class="com">/* Larger than desktop screen */</span><span class="pln">
</span><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">120.0rem</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">...</span><span class="pln"> </span><span class="pun">}</span>

Embed Font

Milligram uses the font-family Roboto, created by Christian Robertson, and provided by Google. Customize your projects using Google Fonts. To embed your selected fonts into a webpage, copy this code into the of your HTML document.

<span class="pln"><!-- Embed Font -->
</span><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Slab"><span class="pln">

<!-- Use the following CSS rules to specify these families -->
</span><style><span class="pln">
body {
  font-family: 'Roboto Slab', serif;
}</span></style>

Extending The Inheritances

The style of an element can be defined in several different locations, which interact in a complex way. It is this form of interaction makes CSS powerful, but it can make it confusing and difficult to debug.

<span class="com">/* Extending The Inheritances */</span><span class="pln">

</span><span class="com">/* Custom color */</span><span class="pln">
</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">black </span><span class="pun">{</span><span class="pln">
  background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> black</span><span class="pun">;</span><span class="pln">
  border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> black</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">black</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">clear</span><span class="pun">,</span><span class="pln">
</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">black</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">outline </span><span class="pun">{</span><span class="pln">
  background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> transparent</span><span class="pun">;</span><span class="pln">
  color</span><span class="pun">:</span><span class="pln"> black</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">black</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">clear </span><span class="pun">{</span><span class="pln">
  border</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> transparent</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">/* Custom size */</span><span class="pln">
</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">small </span><span class="pun">{</span><span class="pln">
  font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="pun">.</span><span class="lit">8rem</span><span class="pun">;</span><span class="pln">
  height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2.8rem</span><span class="pun">;</span><span class="pln">
  line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2.8rem</span><span class="pun">;</span><span class="pln">
  padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">1.5rem</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="pun">.</span><span class="pln">button</span><span class="pun">-</span><span class="pln">large </span><span class="pun">{</span><span class="pln">
  font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.4rem</span><span class="pun">;</span><span class="pln">
  height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4.5rem</span><span class="pun">;</span><span class="pln">
  line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4.5rem</span><span class="pun">;</span><span class="pln">
  padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">2rem</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span>

See more examples of tips.

Browser Support

While not designed for old browsers, Milligram has support for some old versions, but we recommend using the latest versions of their browsers.

See more examples of browser support.

Examples

You can view more examples of using Milligram.

• Getting Started
• Typography
• Blockquotes
• Buttons
• Lists
• Forms
• Tables
• Grids
• Code
• Utilities
• Tips
• Browser Support
• Showcase

Contributing

Want to contribute? Follow these recommendations.