603 lines
26 KiB
HTML
603 lines
26 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>
|
|
<p>
|
|
<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>
|
|
</p>
|
|
</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>
|