<!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/8.0.1/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." /> <label for="formButtons">Form buttons</label> <input type="submit" /> <input type="reset" /> </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>Position</th> <th>Height</th> <th>Born</th> <th>Location</th> </tr> </thead> <tbody> <tr> <td>Steve Kerr</td> <td>Coach</td> <td>1,91</td> <td>September 27, 1965</td> <td>Beirut, Lebanon</td> </tr> <tr> <td>Stephen Curry</td> <td>Point Guard</td> <td>1,91</td> <td>March 14, 1988</td> <td>Akron, OH</td> </tr> <tr> <td>Klay Thompson</td> <td>Small Forward</td> <td>2,01</td> <td>February 8, 1990</td> <td>Los Angeles, CA</td> </tr> <tr> <td>Draymond Green</td> <td>Power Forward</td> <td>2,01</td> <td>March 4, 1990</td> <td>Saginaw, MI</td> </tr> <tr> <td>Andre Iguodala</td> <td>Small Forward and Shooting Guard</td> <td>1,98</td> <td>January 28, 1984</td> <td>Springfield, IL</td> </tr> <tr> <td>Shaun Livingston</td> <td>Point Guard and Shooting Guard</td> <td>2,01</td> <td>September 11, 1985</td> <td>Peoria, IL</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="code"> <h5 class="title">Code</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/code.html" title="Code">Code</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://twitter.com/cjpatoilo" 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>