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>

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.