940 lines
35 KiB
HTML
940 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="author" content="CJ Patoilo" />
|
|
<meta
|
|
name="description"
|
|
content="Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code."
|
|
/>
|
|
<title>Milligram | A minimalist CSS framework.</title>
|
|
<link rel="icon" href="https://milligram.io/images/icon.png" />
|
|
<link rel="stylesheet" href="https://milligram.io/styles/main.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css"
|
|
/>
|
|
<link rel="stylesheet" href="milligram.min.css" />
|
|
<!-- to generate this style run `$ npm start` -->
|
|
</head>
|
|
<body>
|
|
<main class="wrapper">
|
|
<section class="container" id="image">
|
|
<img
|
|
src="https://milligram.io/images/thumbnail.png"
|
|
alt="Milligram | A minimalist CSS framework."
|
|
/>
|
|
</section>
|
|
|
|
<section class="container" id="typography">
|
|
<h5 class="title">Typography</h5>
|
|
<hr />
|
|
<div class="example">
|
|
<div class="row">
|
|
<div class="column">
|
|
<h1>
|
|
Heading<span class="heading-font-size">
|
|
<code><h1></code> 4.6rem (46px)</span
|
|
>
|
|
</h1>
|
|
<h2>
|
|
Heading<span class="heading-font-size">
|
|
<code><h2></code> 3.6rem (36px)</span
|
|
>
|
|
</h2>
|
|
<h3>
|
|
Heading<span class="heading-font-size">
|
|
<code><h3></code> 2.8rem (28px)</span
|
|
>
|
|
</h3>
|
|
<h4>
|
|
Heading<span class="heading-font-size">
|
|
<code><h4></code> 2.2rem (22px)</span
|
|
>
|
|
</h4>
|
|
<h5>
|
|
Heading<span class="heading-font-size">
|
|
<code><h5></code> 1.8rem (18px)</span
|
|
>
|
|
</h5>
|
|
<h6>
|
|
Heading<span class="heading-font-size">
|
|
<code><h6></code> 1.6rem (16px)</span
|
|
>
|
|
</h6>
|
|
</div>
|
|
<div class="column">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>.
|
|
</p>
|
|
<p>
|
|
Obcaecati <s>error</s> a, quas fugit hic,
|
|
<a href="#">accusantium</a> autem
|
|
<i>necessitatibus praesentium</i> placeat, iusto et
|
|
<b>soluta expedita</b>! Quisquam repellendus
|
|
<small>voluptatem</small>, <mark>tempora iste culpa fuga</mark>,
|
|
<time>on April 29</time>!
|
|
</p>
|
|
<p>
|
|
Quisquam nobis, ad. Iusto, <strong>repudiandae</strong>. Autem
|
|
ipsa blanditiis, quae, fugit nobis
|
|
<em>perspiciatis in beatae vitae</em> numquam illo, architecto
|
|
hic dolor <q>molestiae aliquid</q>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container" id="blockquotes">
|
|
<h5 class="title">Blockquotes</h5>
|
|
<hr />
|
|
<div class="example">
|
|
<div class="row">
|
|
<div class="column">
|
|
<p><q>Yeah!! Milligram is amazing.</q></p>
|
|
</div>
|
|
<div class="column">
|
|
<blockquote>
|
|
<p><em>Yeah!! Milligram is amazing.</em></p>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container" id="buttons">
|
|
<h5 class="title">Buttons</h5>
|
|
<hr />
|
|
<div class="example">
|
|
<div class="row">
|
|
<div class="column">
|
|
<a class="button" href="javascript: void(0)">Default Button</a>
|
|
<a class="button button-outline" href="javascript: void(0)"
|
|
>Outlined Button</a
|
|
>
|
|
<a class="button button-clear" href="javascript: void(0)"
|
|
>Clear Button</a
|
|
>
|
|
<a class="button" disabled href="javascript: void(0)"
|
|
>Default Button</a
|
|
>
|
|
<a
|
|
class="button button-outline"
|
|
disabled
|
|
href="javascript: void(0)"
|
|
>Outlined Button</a
|
|
>
|
|
<a class="button button-clear" disabled href="javascript: void(0)"
|
|
>Clear Button</a
|
|
>
|
|
</div>
|
|
<div class="column">
|
|
<button class="button">Default Button</button>
|
|
<button class="button button-outline">Outlined Button</button>
|
|
<button class="button button-clear">Clear Button</button>
|
|
<button class="button" disabled>Default Button</button>
|
|
<button class="button button-outline" disabled>
|
|
Outlined Button
|
|
</button>
|
|
<button class="button button-clear" disabled>Clear Button</button>
|
|
</div>
|
|
<div class="column">
|
|
<input class="button" type="submit" value="Default Button" />
|
|
<input
|
|
class="button button-outline"
|
|
type="submit"
|
|
value="Outlined Button"
|
|
/>
|
|
<input
|
|
class="button button-clear"
|
|
type="submit"
|
|
value="Clear Button"
|
|
/>
|
|
<input
|
|
class="button"
|
|
disabled
|
|
type="submit"
|
|
value="Default Button"
|
|
/>
|
|
<input
|
|
class="button button-outline"
|
|
disabled
|
|
type="submit"
|
|
value="Outlined Button"
|
|
/>
|
|
<input
|
|
class="button button-clear"
|
|
disabled
|
|
type="submit"
|
|
value="Clear Button"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column">
|
|
<input class="button" type="reset" value="Default Button" />
|
|
<input
|
|
class="button button-outline"
|
|
type="reset"
|
|
value="Outlined Button"
|
|
/>
|
|
<input
|
|
class="button button-clear"
|
|
type="reset"
|
|
value="Clear Button"
|
|
/>
|
|
<input
|
|
class="button"
|
|
disabled
|
|
type="reset"
|
|
value="Default Button"
|
|
/>
|
|
<input
|
|
class="button button-outline"
|
|
disabled
|
|
type="reset"
|
|
value="Outlined Button"
|
|
/>
|
|
<input
|
|
class="button button-clear"
|
|
disabled
|
|
type="reset"
|
|
value="Clear Button"
|
|
/>
|
|
</div>
|
|
<div class="column">
|
|
<input class="button" type="button" value="Default Button" />
|
|
<input
|
|
class="button button-outline"
|
|
type="button"
|
|
value="Outlined Button"
|
|
/>
|
|
<input
|
|
class="button button-clear"
|
|
type="button"
|
|
value="Clear Button"
|
|
/>
|
|
<input
|
|
class="button"
|
|
disabled
|
|
type="button"
|
|
value="Default Button"
|
|
/>
|
|
<input
|
|
class="button button-outline"
|
|
disabled
|
|
type="button"
|
|
value="Outlined Button"
|
|
/>
|
|
<input
|
|
class="button button-clear"
|
|
disabled
|
|
type="button"
|
|
value="Clear Button"
|
|
/>
|
|
</div>
|
|
<div class="column">
|
|
<div class="button">Default Button</div>
|
|
<div class="button button-outline">Outlined Button</div>
|
|
<div class="button button-clear">Clear Button</div>
|
|
<div class="button" disabled>Default Button</div>
|
|
<div class="button button-outline" disabled>Outlined Button</div>
|
|
<div class="button button-clear" disabled>Clear Button</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container" id="lists">
|
|
<h5 class="title">Lists</h5>
|
|
<hr />
|
|
<div class="example">
|
|
<div class="row">
|
|
<div class="column">
|
|
<ul>
|
|
<li>Unordered list item 1</li>
|
|
<li>Unordered list item 2</li>
|
|
<li>
|
|
Unordered list item 3
|
|
<ul>
|
|
<li>Unordered list item 3.1</li>
|
|
<li>Unordered list item 3.2</li>
|
|
<li>Unordered list item 3.3</li>
|
|
</ul>
|
|
</li>
|
|
<li>Unordered list item 4</li>
|
|
<li>Unordered list item 5</li>
|
|
</ul>
|
|
</div>
|
|
<div class="column">
|
|
<ol>
|
|
<li>Ordered list item 1</li>
|
|
<li>Ordered list item 2</li>
|
|
<li>
|
|
Ordered list item 3
|
|
<ol>
|
|
<li>Ordered list item 3.1</li>
|
|
<li>Ordered list item 3.2</li>
|
|
<li>Ordered list item 3.3</li>
|
|
</ol>
|
|
</li>
|
|
<li>Ordered list item 4</li>
|
|
<li>Ordered list item 5</li>
|
|
</ol>
|
|
</div>
|
|
<div class="column">
|
|
<dl>
|
|
<dt>Description list item 1</dt>
|
|
<dt>Description list item 2</dt>
|
|
<dt>Description list item 3</dt>
|
|
<dd>Description list item 3.1</dd>
|
|
<dd>Description list item 3.2</dd>
|
|
<dd>Description list item 3.3</dd>
|
|
<dt>Description list item 4</dt>
|
|
<dt>Description list item 5</dt>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container" id="forms">
|
|
<h5 class="title">Forms</h5>
|
|
<hr />
|
|
<div class="example">
|
|
<form>
|
|
<fieldset>
|
|
<legend>Legend</legend>
|
|
<div class="row">
|
|
<div class="column">
|
|
<label for="textField">Text field</label>
|
|
<input type="text" placeholder="Text field" id="textField" />
|
|
<label for="emailField">Email field</label>
|
|
<input
|
|
type="email"
|
|
id="emailField"
|
|
placeholder="Email field"
|
|
/>
|
|
<label for="numberField">Number field</label>
|
|
<input
|
|
type="number"
|
|
id="numberField"
|
|
placeholder="Number field"
|
|
/>
|
|
<label for="passwordField">Password field</label>
|
|
<input
|
|
type="password"
|
|
id="passwordField"
|
|
placeholder="Password field"
|
|
/>
|
|
<label for="selectField">Select field</label>
|
|
<select id="selectField">
|
|
<option value="selectField1">Select field 1</option>
|
|
<option value="selectField2">Select field 2</option>
|
|
<option value="selectField3">Select field 3</option>
|
|
<option value="selectField4">Select field 4</option>
|
|
</select>
|
|
<label for="colorField">Color field</label>
|
|
<input
|
|
type="color"
|
|
id="colorField"
|
|
placeholder="Your browser doesn't support this field."
|
|
/>
|
|
<label for="weekField">Week field</label>
|
|
<input
|
|
type="week"
|
|
id="weekField"
|
|
placeholder="Your browser doesn't support this field."
|
|
/>
|
|
<label for="datetimeField">Datetime field</label>
|
|
<input
|
|
type="datetime"
|
|
id="datetimeField"
|
|
placeholder="Your browser doesn't support this field."
|
|
/>
|
|
<label for="searchField">Search field</label>
|
|
<input
|
|
type="search"
|
|
id="searchField"
|
|
placeholder="Search field"
|
|
/>
|
|
</div>
|
|
<div class="column">
|
|
<label for="telField">Tel field</label>
|
|
<input type="tel" id="telField" placeholder="Tel field" />
|
|
<label for="urlField">URL field</label>
|
|
<input type="url" id="urlField" placeholder="URL field" />
|
|
<label for="radioField">Radio field</label>
|
|
<div class="row">
|
|
<div class="column">
|
|
<input type="radio" id="radioField1" name="radioField" />
|
|
<label class="label-inline" for="radioField1"
|
|
>Radio field 1</label
|
|
>
|
|
</div>
|
|
<div class="column">
|
|
<input type="radio" id="radioField2" name="radioField" />
|
|
<label class="label-inline" for="radioField2"
|
|
>Radio field 2</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<label for="radioField">Checkbox field</label>
|
|
<div class="row">
|
|
<div class="column">
|
|
<input type="checkbox" id="checkboxField1" />
|
|
<label class="label-inline" for="checkboxField1"
|
|
>Checkbox field 1</label
|
|
>
|
|
</div>
|
|
<div class="column">
|
|
<input type="checkbox" id="checkboxField2" />
|
|
<label class="label-inline" for="checkboxField2"
|
|
>Checkbox field 2</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<label for="textareaField">Textarea field</label>
|
|
<textarea
|
|
placeholder="Textarea field"
|
|
id="textareaField"
|
|
></textarea>
|
|
<label for="dateField">Date field</label>
|
|
<input
|
|
type="date"
|
|
id="dateField"
|
|
placeholder="Your browser doesn't support this field."
|
|
/>
|
|
<label for="monthField">Month field</label>
|
|
<input
|
|
type="month"
|
|
id="monthField"
|
|
placeholder="Your browser doesn't support this field."
|
|
/>
|
|
<label for="datetimeLocalField">Datetime-Local field</label>
|
|
<input
|
|
type="datetime-local"
|
|
id="datetimeLocalField"
|
|
placeholder="Your browser doesn't support this field."
|
|
/>
|
|
<input type="submit" />
|
|
<input type="reset" class="button-clear" />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container" id="tables">
|
|
<h5 class="title">Tables</h5>
|
|
<hr />
|
|
<div class="example">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Age</th>
|
|
<th>Height</th>
|
|
<th>Location</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Kevin Durant</td>
|
|
<td>27</td>
|
|
<td>2.06</td>
|
|
<td>Washington, DC</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Stephen Curry</td>
|
|
<td>27</td>
|
|
<td>1,91</td>
|
|
<td>Akron, OH</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Klay Thompson</td>
|
|
<td>25</td>
|
|
<td>2,01</td>
|
|
<td>Los Angeles, CA</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Draymond Green</td>
|
|
<td>26</td>
|
|
<td>2,01</td>
|
|
<td>Saginaw, MI</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Andre Iguodala</td>
|
|
<td>32</td>
|
|
<td>1,98</td>
|
|
<td>Springfield, IL</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Anderson Varejão</td>
|
|
<td>33</td>
|
|
<td>2,08</td>
|
|
<td>Colatina, ES</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Shaun Livingston</td>
|
|
<td>30</td>
|
|
<td>2,01</td>
|
|
<td>Peoria, CA</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container" id="grids">
|
|
<h5 class="title">Grids</h5>
|
|
<hr />
|
|
<div class="example">
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">100%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-10">
|
|
<span class="column-demo">10%</span>
|
|
</div>
|
|
<div class="column column-90">
|
|
<span class="column-demo">90%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-20">
|
|
<span class="column-demo">20%</span>
|
|
</div>
|
|
<div class="column column-80">
|
|
<span class="column-demo">80%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-25">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
<div class="column column-75">
|
|
<span class="column-demo">75%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-33">
|
|
<span class="column-demo">33%</span>
|
|
</div>
|
|
<div class="column column-67">
|
|
<span class="column-demo">67%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-40">
|
|
<span class="column-demo">40%</span>
|
|
</div>
|
|
<div class="column column-60">
|
|
<span class="column-demo">60%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-50">
|
|
<span class="column-demo">50%</span>
|
|
</div>
|
|
<div class="column column-50">
|
|
<span class="column-demo">50%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-60">
|
|
<span class="column-demo">60%</span>
|
|
</div>
|
|
<div class="column column-40">
|
|
<span class="column-demo">40%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-67">
|
|
<span class="column-demo">67%</span>
|
|
</div>
|
|
<div class="column column-33">
|
|
<span class="column-demo">33%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-75">
|
|
<span class="column-demo">75%</span>
|
|
</div>
|
|
<div class="column column-25">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-80">
|
|
<span class="column-demo">80%</span>
|
|
</div>
|
|
<div class="column column-20">
|
|
<span class="column-demo">20%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-90">
|
|
<span class="column-demo">90%</span>
|
|
</div>
|
|
<div class="column column-10">
|
|
<span class="column-demo">10%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">100%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-90">
|
|
<span class="column-demo">90%</span>
|
|
</div>
|
|
<div class="column"><span class="column-demo">10%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-80">
|
|
<span class="column-demo">80%</span>
|
|
</div>
|
|
<div class="column"><span class="column-demo">20%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-75">
|
|
<span class="column-demo">75%</span>
|
|
</div>
|
|
<div class="column"><span class="column-demo">25%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-67">
|
|
<span class="column-demo">67%</span>
|
|
</div>
|
|
<div class="column"><span class="column-demo">33%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-60">
|
|
<span class="column-demo">60%</span>
|
|
</div>
|
|
<div class="column"><span class="column-demo">40%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-50">
|
|
<span class="column-demo">50%</span>
|
|
</div>
|
|
<div class="column"><span class="column-demo">50%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-40">
|
|
<span class="column-demo">40%</span>
|
|
</div>
|
|
<div class="column"><span class="column-demo">60%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-33">
|
|
<span class="column-demo">33%</span>
|
|
</div>
|
|
<div class="column"><span class="column-demo">67%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-25">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
<div class="column"><span class="column-demo">75%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-20">
|
|
<span class="column-demo">20%</span>
|
|
</div>
|
|
<div class="column"><span class="column-demo">80%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-10">
|
|
<span class="column-demo">10%</span>
|
|
</div>
|
|
<div class="column"><span class="column-demo">90%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">100%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">50%</span></div>
|
|
<div class="column"><span class="column-demo">50%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">33.3%</span></div>
|
|
<div class="column"><span class="column-demo">33.3%</span></div>
|
|
<div class="column"><span class="column-demo">33.3%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">25%</span></div>
|
|
<div class="column"><span class="column-demo">25%</span></div>
|
|
<div class="column"><span class="column-demo">25%</span></div>
|
|
<div class="column"><span class="column-demo">25%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">20%</span></div>
|
|
<div class="column"><span class="column-demo">20%</span></div>
|
|
<div class="column"><span class="column-demo">20%</span></div>
|
|
<div class="column"><span class="column-demo">20%</span></div>
|
|
<div class="column"><span class="column-demo">20%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
|
<div class="column"><span class="column-demo">16.6%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
|
<div class="column"><span class="column-demo">14.28%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
|
<div class="column"><span class="column-demo">12.5%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
|
<div class="column"><span class="column-demo">11.11%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">10%</span></div>
|
|
<div class="column"><span class="column-demo">10%</span></div>
|
|
<div class="column"><span class="column-demo">10%</span></div>
|
|
<div class="column"><span class="column-demo">10%</span></div>
|
|
<div class="column"><span class="column-demo">10%</span></div>
|
|
<div class="column"><span class="column-demo">10%</span></div>
|
|
<div class="column"><span class="column-demo">10%</span></div>
|
|
<div class="column"><span class="column-demo">10%</span></div>
|
|
<div class="column"><span class="column-demo">10%</span></div>
|
|
<div class="column"><span class="column-demo">10%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
|
<div class="column"><span class="column-demo">9.09%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
<div class="column"><span class="column-demo">8.3%</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-50 column-offset-25">
|
|
<span class="column-demo">50%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-50 column-offset-50">
|
|
<span class="column-demo">50%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-25 column-offset-75">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-25 column-offset-50">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-25 column-offset-25">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-25 column-offset-25">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
<div class="column column-25 column-offset-25">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-25">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
<div class="column column-25 column-offset-50">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column"><span class="column-demo">25%</span></div>
|
|
<div class="column column-50 column-offset-25">
|
|
<span class="column-demo">50%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-50">
|
|
<span class="column-demo">50%</span>
|
|
</div>
|
|
<div class="column column-25 column-offset-25">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-25">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
<div class="column column-25 column-offset-25">
|
|
<span class="column-demo">25%</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="column column-75 column-offset-25">
|
|
<span class="column-demo">75%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container" id="codes">
|
|
<h5 class="title">Codes</h5>
|
|
<hr />
|
|
<div class="example">
|
|
<pre><code>.milligram {
|
|
color: #9b4dca;
|
|
}</code></pre>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container" id="utilities">
|
|
<h5 class="title">Utilities</h5>
|
|
<hr />
|
|
<div class="example">
|
|
<div class="clearfix">
|
|
<img
|
|
class="float-left"
|
|
src="http://placehold.it/320/d1d1d1/?text=float+to+left"
|
|
alt="float to left"
|
|
/>
|
|
<img
|
|
class="float-right"
|
|
src="http://placehold.it/320/d1d1d1/?text=float+to+right"
|
|
alt="float to right"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container" id="examples">
|
|
<h5 class="title">Examples</h5>
|
|
<hr />
|
|
<ul>
|
|
<li>
|
|
<a
|
|
href="https://milligram.io/getting-started.html"
|
|
title="Getting Started"
|
|
>Getting Started</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://milligram.io/typography.html" title="Typography"
|
|
>Typography</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://milligram.io/blockquotes.html" title="Blockquotes"
|
|
>Blockquotes</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://milligram.io/buttons.html" title="Buttons"
|
|
>Buttons</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://milligram.io/lists.html" title="Lists">Lists</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://milligram.io/forms.html" title="Forms">Forms</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://milligram.io/tables.html" title="Tables">Tables</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://milligram.io/grids.html" title="Grids">Grids</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://milligram.io/codes.html" title="Codes">Codes</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://milligram.io/utilities.html" title="Utilities"
|
|
>Utilities</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://milligram.io/tips.html" title="Tips">Tips</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://milligram.io/browser-support.html"
|
|
title="Browser Support"
|
|
>Browser Support</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<section class="container">
|
|
<p>
|
|
Designed with ♥ by
|
|
<a target="blank" href="https://cjpatoilo.com" title="CJ Patoilo"
|
|
>CJ Patoilo</a
|
|
>. Licensed under the
|
|
<a
|
|
target="blank"
|
|
href="https://github.com/milligram/milligram#license"
|
|
title="MIT License"
|
|
>MIT License</a
|
|
>.
|
|
</p>
|
|
</section>
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|