2020-05-15 04:20:35 +00:00
<!DOCTYPE html>
2016-07-31 20:48:42 +00:00
< html lang = "en" >
2020-05-15 04:20:35 +00:00
< 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"
2020-05-18 17:40:04 +00:00
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
2020-05-15 04:20:35 +00:00
/>
< 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 >
2016-07-31 20:48:42 +00:00
2020-05-15 04:20:35 +00:00
< 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 >
2016-07-31 20:48:42 +00:00
2020-05-15 04:20:35 +00:00
< 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 >
2016-08-07 18:45:57 +00:00
2020-05-15 04:20:35 +00:00
< 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 >
2016-07-31 20:48:42 +00:00
2020-05-15 04:20:35 +00:00
< 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 >
2016-07-31 20:48:42 +00:00
2020-05-15 04:20:35 +00:00
< 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."
/>
2020-05-21 02:41:06 +00:00
< label for = "formButtons" > Form buttons< / label >
2020-05-15 04:20:35 +00:00
< input type = "submit" / >
2020-05-21 02:41:06 +00:00
< input type = "reset" / >
2020-05-15 04:20:35 +00:00
< / div >
< / div >
< / fieldset >
< / form >
< / div >
< / section >
2016-07-31 20:48:42 +00:00
2020-05-15 04:20:35 +00:00
< section class = "container" id = "tables" >
< h5 class = "title" > Tables< / h5 >
< hr / >
< div class = "example" >
< table >
< thead >
< tr >
< th > Name< / th >
2020-05-18 21:48:52 +00:00
< th > Position< / th >
2020-05-15 04:20:35 +00:00
< th > Height< / th >
2020-05-18 21:48:52 +00:00
< th > Born< / th >
2020-05-15 04:20:35 +00:00
< th > Location< / th >
< / tr >
< / thead >
< tbody >
< tr >
2020-05-18 21:48:52 +00:00
< td > Steve Kerr< / td >
< td > Coach< / td >
< td > 1,91< / td >
< td > September 27, 1965< / td >
< td > Beirut, Lebanon< / td >
2020-05-15 04:20:35 +00:00
< / tr >
< tr >
< td > Stephen Curry< / td >
2020-05-18 21:48:52 +00:00
< td > Point Guard< / td >
2020-05-15 04:20:35 +00:00
< td > 1,91< / td >
2020-05-18 21:48:52 +00:00
< td > March 14, 1988< / td >
2020-05-15 04:20:35 +00:00
< td > Akron, OH< / td >
< / tr >
< tr >
< td > Klay Thompson< / td >
2020-05-18 21:48:52 +00:00
< td > Small Forward< / td >
2020-05-15 04:20:35 +00:00
< td > 2,01< / td >
2020-05-18 21:48:52 +00:00
< td > February 8, 1990< / td >
2020-05-15 04:20:35 +00:00
< td > Los Angeles, CA< / td >
< / tr >
< tr >
< td > Draymond Green< / td >
2020-05-18 21:48:52 +00:00
< td > Power Forward< / td >
2020-05-15 04:20:35 +00:00
< td > 2,01< / td >
2020-05-18 21:48:52 +00:00
< td > March 4, 1990< / td >
2020-05-15 04:20:35 +00:00
< td > Saginaw, MI< / td >
< / tr >
< tr >
< td > Andre Iguodala< / td >
2020-05-18 21:48:52 +00:00
< td > Small Forward and Shooting Guard< / td >
2020-05-15 04:20:35 +00:00
< td > 1,98< / td >
2020-05-18 21:48:52 +00:00
< td > January 28, 1984< / td >
2020-05-15 04:20:35 +00:00
< td > Springfield, IL< / td >
< / tr >
< tr >
< td > Shaun Livingston< / td >
2020-05-18 21:48:52 +00:00
< td > Point Guard and Shooting Guard< / td >
2020-05-15 04:20:35 +00:00
< td > 2,01< / td >
2020-05-18 21:48:52 +00:00
< td > September 11, 1985< / td >
< td > Peoria, IL< / td >
2020-05-15 04:20:35 +00:00
< / tr >
< / tbody >
< / table >
< / div >
< / section >
2016-07-31 20:48:42 +00:00
2020-05-15 04:20:35 +00:00
< 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 >
2016-07-31 20:48:42 +00:00
2020-05-18 21:26:45 +00:00
< section class = "container" id = "code" >
< h5 class = "title" > Code< / h5 >
2020-05-15 04:20:35 +00:00
< hr / >
< div class = "example" >
< pre > < code > .milligram {
2020-05-21 02:41:06 +00:00
color: #9b4dca;
2016-09-09 21:18:34 +00:00
}< / code > < / pre >
2020-05-15 04:20:35 +00:00
< / div >
< / section >
2016-07-31 20:48:42 +00:00
2020-05-15 04:20:35 +00:00
< 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 >
2016-07-31 20:48:42 +00:00
2020-05-15 04:20:35 +00:00
< 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 >
2020-05-18 21:26:45 +00:00
< a href = "https://milligram.io/code.html" title = "Code" > Code< / a >
2020-05-15 04:20:35 +00:00
< / 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 >
2016-07-31 20:48:42 +00:00
2020-05-15 04:20:35 +00:00
< footer class = "footer" >
< section class = "container" >
< p >
Designed with ♥ by
2020-05-17 21:41:53 +00:00
< a
target="blank"
href="https://twitter.com/cjpatoilo"
title="CJ Patoilo"
2020-05-15 04:20:35 +00:00
>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 >
2016-07-31 20:48:42 +00:00
< / html >
