2016-07-31 20:48:42 +00:00
<!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 >
2016-11-11 05:30:09 +00:00
< link rel = "icon" href = "https://milligram.github.io/images/favicon.ico" >
2016-07-31 20:48:42 +00:00
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic" >
2016-12-01 03:32:09 +00:00
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css" >
2016-07-31 20:48:42 +00:00
< link rel = "stylesheet" href = "milligram.min.css" > <!-- to generate this style run `$ npm start` -->
2016-11-11 05:30:09 +00:00
< link rel = "stylesheet" href = "https://milligram.github.io/styles/main.min.css" >
2016-07-31 20:48:42 +00:00
< / head >
< body >
< main class = "wrapper" >
2016-08-07 18:45:57 +00:00
< section class = "container" id = "image" >
2016-12-01 03:32:09 +00:00
< img src = "https://milligram.github.io/images/thumbnail.png" alt = "Milligram | A minimalist CSS framework." >
2016-08-07 18:45:57 +00:00
< / section >
2016-07-31 20:48:42 +00:00
< section class = "container" id = "typography" >
< h5 class = "title" > Typography< / h5 >
2016-09-10 05:56:47 +00:00
< hr >
2016-07-31 20:48:42 +00:00
< div class = "example" >
2016-08-07 18:45:57 +00:00
< div class = "row" >
< div class = "column" >
< h1 > Heading< span class = "heading-font-size" > < code > < h1> < / code > 5.0rem (50px)< / span > < / h1 >
< h2 > Heading< span class = "heading-font-size" > < code > < h2> < / code > 4.2rem (42px)< / span > < / h2 >
< h3 > Heading< span class = "heading-font-size" > < code > < h3> < / code > 3.6rem (36px)< / span > < / h3 >
< h4 > Heading< span class = "heading-font-size" > < code > < h4> < / code > 3.0rem (30px)< / span > < / h4 >
< h5 > Heading< span class = "heading-font-size" > < code > < h5> < / code > 2.4rem (24px)< / span > < / h5 >
< h6 > Heading< span class = "heading-font-size" > < code > < h6> < / code > 1.5rem (15px)< / 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 >
2016-07-31 20:48:42 +00:00
< / div >
< / section >
< section class = "container" id = "blockquotes" >
< h5 class = "title" > Blockquotes< / h5 >
2016-09-10 05:56:47 +00:00
< hr >
2016-07-31 20:48:42 +00:00
< div class = "example" >
2016-08-07 18:45:57 +00:00
< 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 >
2016-07-31 20:48:42 +00:00
< / div >
< / section >
< section class = "container" id = "buttons" >
< h5 class = "title" > Buttons< / h5 >
2016-09-10 05:56:47 +00:00
< hr >
2016-07-31 20:48:42 +00:00
< div class = "example" >
2016-08-07 18:45:57 +00:00
< 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 >
2016-07-31 20:48:42 +00:00
< / div >
< / section >
< section class = "container" id = "lists" >
< h5 class = "title" > Lists< / h5 >
2016-09-10 05:56:47 +00:00
< hr >
2016-07-31 20:48:42 +00:00
< div class = "example" >
< div class = "row" >
< div class = "column" >
< ul >
< li > Unordered list item 1< / li >
< li > Unordered list item 2< / li >
2016-09-10 05:02:17 +00:00
< li > Unordered list item 3
2016-08-07 18:45:57 +00:00
< ul >
2016-09-10 05:02:17 +00:00
< li > Unordered list item 3.1< / li >
< li > Unordered list item 3.2< / li >
< li > Unordered list item 3.3< / li >
2016-08-07 18:45:57 +00:00
< / ul >
< / li >
< li > Unordered list item 4< / li >
2016-09-10 05:02:17 +00:00
< li > Unordered list item 5< / li >
2016-07-31 20:48:42 +00:00
< / ul >
< / div >
< div class = "column" >
< ol >
< li > Ordered list item 1< / li >
< li > Ordered list item 2< / li >
2016-09-10 05:02:17 +00:00
< li > Ordered list item 3
2016-08-07 18:45:57 +00:00
< ol >
2016-09-10 05:02:17 +00:00
< li > Ordered list item 3.1< / li >
< li > Ordered list item 3.2< / li >
< li > Ordered list item 3.3< / li >
2016-08-07 18:45:57 +00:00
< / ol >
< / li >
< li > Ordered list item 4< / li >
2016-09-10 05:02:17 +00:00
< li > Ordered list item 5< / li >
2016-07-31 20:48:42 +00:00
< / ol >
< / div >
< div class = "column" >
< dl >
< dt > Description list item 1< / dt >
2016-08-07 18:45:57 +00:00
< dt > Description list item 2< / dt >
< dt > Description list item 3< / dt >
< dd > Description list item 3.1< / dd >
2016-09-10 05:02:17 +00:00
< 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 >
2016-07-31 20:48:42 +00:00
< / dl >
< / div >
< / div >
< / div >
< / section >
< section class = "container" id = "forms" >
< h5 class = "title" > Forms< / h5 >
2016-09-10 05:56:47 +00:00
< hr >
2016-07-31 20:48:42 +00:00
< div class = "example" >
2016-08-07 18:45:57 +00:00
< form >
2016-07-31 20:48:42 +00:00
< fieldset >
2016-08-07 18:45:57 +00:00
< 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 = "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 >
< input type = "submit" >
< input type = "reset" class = "button-clear" >
< / div >
2016-07-31 20:48:42 +00:00
< / div >
< / fieldset >
< / form >
< / div >
< / section >
< section class = "container" id = "tables" >
< h5 class = "title" > Tables< / h5 >
2016-09-10 05:56:47 +00:00
< hr >
2016-07-31 20:48:42 +00:00
< div class = "example" >
< table >
< thead >
< tr >
< th > Name< / th >
< th > Age< / th >
< th > Height< / th >
< th > Location< / th >
< / tr >
< / thead >
< tbody >
2016-08-07 18:45:57 +00:00
< tr >
< td > Kevin Durant< / td >
< td > 27< / td >
< td > 2.06< / td >
< td > Washington, DC< / td >
< / tr >
2016-07-31 20:48:42 +00:00
< 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 >
2016-08-07 18:45:57 +00:00
< 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 >
2016-07-31 20:48:42 +00:00
< / tbody >
< / table >
< / div >
< / section >
< section class = "container" id = "grids" >
< h5 class = "title" > Grids< / h5 >
2016-09-10 05:56:47 +00:00
< hr >
2016-07-31 20:48:42 +00:00
< div class = "example" >
2016-08-07 18:45:57 +00:00
< 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 >
2016-07-31 20:48:42 +00:00
< / div >
< / div >
< / section >
< section class = "container" id = "codes" >
< h5 class = "title" > Codes< / h5 >
2016-09-10 05:56:47 +00:00
< hr >
2016-07-31 20:48:42 +00:00
< div class = "example" >
< pre > < code > .milligram {
2016-12-01 03:32:09 +00:00
color: #9b4dca;
2016-09-09 21:18:34 +00:00
}< / code > < / pre >
2016-07-31 20:48:42 +00:00
< / div >
< / section >
< section class = "container" id = "utilities" >
< h5 class = "title" > Utilities< / h5 >
2016-09-10 05:56:47 +00:00
< hr >
2016-07-31 20:48:42 +00:00
< div class = "example" >
< div class = "clearfix" >
2016-09-09 21:18:34 +00:00
< 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" >
2016-07-31 20:48:42 +00:00
< / div >
< / div >
< / section >
< section class = "container" id = "examples" >
< h5 class = "title" > Examples< / h5 >
2016-09-10 05:56:47 +00:00
< hr >
2016-07-31 20:48:42 +00:00
< p >
< ul >
< li > < a href = "https://milligram.github.io/getting-started.html" title = "Getting Started" > Getting Started< / a > < / li >
< li > < a href = "https://milligram.github.io/typography.html" title = "Typography" > Typography< / a > < / li >
< li > < a href = "https://milligram.github.io/blockquotes.html" title = "Blockquotes" > Blockquotes< / a > < / li >
< li > < a href = "https://milligram.github.io/buttons.html" title = "Buttons" > Buttons< / a > < / li >
< li > < a href = "https://milligram.github.io/lists.html" title = "Lists" > Lists< / a > < / li >
< li > < a href = "https://milligram.github.io/forms.html" title = "Forms" > Forms< / a > < / li >
< li > < a href = "https://milligram.github.io/tables.html" title = "Tables" > Tables< / a > < / li >
< li > < a href = "https://milligram.github.io/grids.html" title = "Grids" > Grids< / a > < / li >
< li > < a href = "https://milligram.github.io/codes.html" title = "Codes" > Codes< / a > < / li >
< li > < a href = "https://milligram.github.io/utilities.html" title = "Utilities" > Utilities< / a > < / li >
< li > < a href = "https://milligram.github.io/tips.html" title = "Tips" > Tips< / a > < / li >
< li > < a href = "https://milligram.github.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 = "http://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 >
