diff options
Merge branch 'master' into gh-pages
1 files changed, 314 insertions, 36 deletions
| -rw-r--r-- | index.html | 350 |
@@ -29,8 +29,16 @@ .grid-hero .notes { margin: 4rem 0; } + .grid-footer { + color: #888; + margin-top: 4rem; + margin-bottom: 4rem; + } + .grid-footer a { + color: #666; + } .notes { - margin: 2rem 0; + margin: 4rem 0; color: #666; } .code { @@ -144,17 +152,36 @@ <h5>H5 Title <small class="label">2rem</small></h5> <h6>H6 Title <small class="label">1.6rem</small></h6> + <!-- headings example --> +<pre class="code lang-html"> +<<span class="tag">h1</span>>H1 Title<<span class="tag">/h1</span>> +<<span class="tag">h2</span>>H2 Title <<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">"label"</span>>4rem<<span class="tag">/small</span>><<span class="tag">/h2</span>> +</pre> + <header class="text-center"><h5>paragraphs</h5></header> <p>Lorem ipsum dolor sit amet, <span class="highlight">consectetur</span> adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <!-- headings example --> +<pre class="code lang-html"> +<<span class="tag">p</span>>Lorem ipsum dolor sit amet, <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"highlight"</span>>consectetur<<span class="tag">/span</span>> adipiscing elit. <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Integer<<span class="tag">/a</span>> posuere erat a ante.<<span class="tag">/p</span>> +<<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"lead"</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<<span class="tag">/p</span>> +</pre> + <header class="text-center"><h5>blockquote</h5></header> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>- Source</small> </blockquote> + <!-- blockquote example --> +<pre class="code lang-html"> +<<span class="tag">blockquote</span>> + <<span class="tag">p</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<<span class="tag">/p</span>> + <<span class="tag">small</span>>- Source<<span class="tag">/small</span>> +<<span class="tag">/blockquote</span>> +</pre> + <header class="text-center"><h5>lists</h5></header> <div class="columns"> <div class="column col-6"> @@ -184,6 +211,22 @@ </ol> </div> </div> + + <!-- lists example --> +<pre class="code lang-html"> +<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"list"</span>> + <<span class="tag">li</span>>list item 1<<span class="tag">/li</span>> + <<span class="tag">li</span>>list item 2 + <<span class="tag">ul</span>> + <<span class="tag">li</span>>list item 2.1<<span class="tag">/li</span>> + <<span class="tag">li</span>>list item 2.2<<span class="tag">/li</span>> + <<span class="tag">li</span>>list item 2.3<<span class="tag">/li</span>> + <<span class="tag">/ul</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span>>list item 3<<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</pre> + </section> <section id="layout" class="grid-960"> @@ -462,9 +505,9 @@ <form> <div class="form-group"> <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> + <input class="form-input is-danger" type="text" id="input-example-1" placeholder="Name" /> </div> - <div class="form-group"> + <div class="form-group has-success"> <label class="form-label" for="input-example-2">Email</label> <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> </div> @@ -581,10 +624,12 @@ <!-- forms example --> <pre class="code lang-html"> <<span class="tag">form</span>> + <span class="com"><!-- form input control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> <<span class="tag">/div</span>> + <span class="com"><!-- form radio control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span>>Gender<<span class="tag">/label</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> @@ -594,6 +639,7 @@ <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> <span class="atn">checked</span> /> Female <<span class="tag">/label</span>> <<span class="tag">/div</span>> + <span class="com"><!-- form select control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">select</span> <span class="atn">class</span>=<span class="atv">"form-select"</span>> <<span class="tag">option</span>>Choose an option<<span class="tag">/option</span>> @@ -602,16 +648,19 @@ <<span class="tag">option</span>>Hipchat<<span class="tag">/option</span>> <<span class="tag">/select</span>> <<span class="tag">/div</span>> + <span class="com"><!-- form switch control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-switch"</span>> <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> Send me emails with news and tips <<span class="tag">/label</span>> <<span class="tag">/div</span>> + <span class="com"><!-- form textarea control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-3"</span>>Message<<span class="tag">/label</span>> <<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">id</span>=<span class="atv">"input-example-3"</span> <span class="atn">placeholder</span>=<span class="atv">"Textarea"</span> <span class="atn">rows</span>=<span class="atv">"3"</span>><<span class="tag">/textarea</span>> <<span class="tag">/div</span>> + <span class="com"><!-- form checkbox control --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-checkbox"</span>> <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> @@ -621,6 +670,38 @@ <<span class="tag">/form</span>> </pre> + <section class="notes"> + <p>If you want to have a horizontal form, add the class <code class="label">form-horizontal</code> to the <form> container. And add the class <code class="label">col-[1-12]</code> to the child elements for form row layout. Please note <code class="label">form-horizontal</code> only works in viewports that are at least 840px wide.</p> + </section> + + <!-- forms example --> +<pre class="code lang-html"> +<<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">"form-horizontal"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label col-3"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"col-9"</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <span class="com"><!-- form structure --></span> +<<span class="tag">/form</span>> +</pre> + + <section class="notes"> + <p>To use form validation styles, add <code class="label">is-success</code> and <code class="label">is-danger</code> to the controls or add <code class="label">has-success</code> and <code class="label">has-danger</code> to parent elements.</p> + </section> + + <!-- forms example --> +<pre class="code lang-html"> +<<span class="tag">form</span>> + <span class="com"><!-- form validation styles --></span> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group has-success"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> + <<span class="tag">/div</span>> +<<span class="tag">/form</span>> +</pre> + <header class="text-center"><h5>input groups</h5></header> <div class="columns"> <div class="column"> @@ -795,11 +876,11 @@ <div class="columns"> <div class="column"> <div class="chip"> - <span class="icon icon-favorite_border"></span> <span class="chip-name">Crime</span> <button class="btn btn-clear"></button> </div> <div class="chip"> + <span class="icon icon-favorite_border"></span> <span class="chip-name">Drama</span> <button class="btn btn-clear"></button> </div> @@ -814,17 +895,17 @@ </div> <div class="column"> <div class="chip"> - <img src="demo/img/avatar-1.png" class="avatar avatar-xs" /> + <img src="demo/img/avatar-1.png" class="avatar" /> <span class="chip-name">Yan Zhu</span> <button class="btn btn-clear"></button> </div> <div class="chip"> - <img src="demo/img/avatar-2.png" class="avatar avatar-xs" /> + <img src="demo/img/avatar-2.png" class="avatar" /> <span class="chip-name">Yan Zhu</span> <button class="btn btn-clear"></button> </div> <div class="chip"> - <img src="demo/img/avatar-4.png" class="avatar avatar-xs" /> + <img src="demo/img/avatar-4.png" class="avatar" /> <span class="chip-name">Yan Zhu</span> <button class="btn btn-clear"></button> </div> @@ -833,6 +914,27 @@ <section class="notes"> <p>Add a container element with the class <code class="label">chip</code>. And add child text elements with <code class="label">chip-name</code> or icons with <code class="label">icon</code>.</p> </section> + + <!-- chips example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip-name"</span>>Crime<<span class="tag">/span</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> +<<span class="tag">/div</span>> + +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-favorite_border"</span>><<span class="tag">/span</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip-name"</span>>Drama<<span class="tag">/span</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> +<<span class="tag">/div</span>> + +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip-name"</span>>Yan Zhu<<span class="tag">/span</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> +<<span class="tag">/div</span>> +</pre> + </section> <section id="fileicons" class="grid-960"> @@ -856,8 +958,8 @@ <section class="notes"> <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p> </section> - <div class="columns"> - <div class="column text-center"> + <div class="columns text-center"> + <div class="column"> <button class="btn btn-primary tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." data-tooltip-pos="top">top tooltip</button> </div> <div class="column"> @@ -871,6 +973,7 @@ </div> </div> <section class="notes"> + <p>Tooltip component is built entirely in CSS.</p> <p>Add the class <code class="label">tooltip</code> and the attribute <code class="label">data-tooltip</code>, which contains the tooltip content, to non self closing elements. And add the class name <code class="label">tooltip-right</code>, <code class="label">tooltip-bottom</code> or <code class="label">tooltip-left</code> to define the position of a tooltip. By default, the tooltip appears above the element.</p> </section> @@ -962,13 +1065,13 @@ <div class="columns"> <div class="column"> <div class="toast"> - <button class="btn btn-clear pull-right"></button> + <button class="btn btn-clear float-right"></button> <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> <div class="column"> <div class="toast toast-primary"> - <button class="btn btn-clear pull-right"></button> + <button class="btn btn-clear float-right"></button> <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> @@ -976,13 +1079,13 @@ <div class="columns"> <div class="column"> <div class="toast toast-success"> - <button class="btn btn-clear pull-right"></button> + <button class="btn btn-clear float-right"></button> Efficiently unleash cross-media information without cross-media value. </div> </div> <div class="column"> <div class="toast toast-info"> - <button class="btn btn-clear pull-right"></button> + <button class="btn btn-clear float-right"></button> Efficiently unleash cross-media information without cross-media value. </div> </div> @@ -990,13 +1093,13 @@ <div class="columns"> <div class="column"> <div class="toast toast-warning"> - <button class="btn btn-clear pull-right"></button> + <button class="btn btn-clear float-right"></button> Efficiently unleash cross-media information without cross-media value. </div> </div> <div class="column"> <div class="toast toast-danger"> - <button class="btn btn-clear pull-right"></button> + <button class="btn btn-clear float-right"></button> Efficiently unleash cross-media information without cross-media value. </div> </div> @@ -1009,12 +1112,12 @@ <!-- toasts example --> <pre class="code lang-html"> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear pull-right"</span>><<span class="tag">/button</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear float-right"</span>><<span class="tag">/button</span>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast toast-primary"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear pull-right"</span>><<span class="tag">/button</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear float-right"</span>><<span class="tag">/button</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-error_outline"</span>><<span class="tag">/span</span>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <<span class="tag">/div</span>> @@ -1028,7 +1131,7 @@ <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p> </section> <div class="columns"> - <div class="column col-3"> + <div class="column"> <menu class="menu"> <menuitem class="menu-item"> <a href="#" class="active"> @@ -1048,7 +1151,7 @@ </menuitem> </menu> </div> - <div class="column col-3"> + <div class="column"> <ul class="menu"> <li class="menu-header"> <span class="menu-header-text"> @@ -1070,7 +1173,7 @@ </li> </ul> </div> - <div class="column col-3"> + <div class="column"> <ul class="menu"> <li class="menu-header"> <span class="menu-header-text"> @@ -1094,17 +1197,19 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code class="label">menu</code>. And add child elements with the classname <code class="label">menu-item</code>.</p> + <p>Add a container element with the class <code class="label">menu</code>. And add child elements with the classname <code class="label">menu-item</code>. You can separate menu items with a <code class="label">divider</code> or <code class="label">menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> </section> <!-- menus example --> <pre class="code lang-html"> <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> + <span class="com"><!-- menu header --></span> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-header"</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"menu-header-text"</span>> Go to <<span class="tag">/span</span>> <<span class="tag">/li</span>> + <span class="com"><!-- menu item --></span> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/span</span>> Slack @@ -1120,6 +1225,13 @@ <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/span</span>> Skype <<span class="tag">/a</span>> <<span class="tag">/li</span>> + <span class="com"><!-- menu divider --></span> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/span</span>> Settings + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> <<span class="tag">/ul</span>> </pre> @@ -1268,10 +1380,11 @@ <div class="columns"> <div class="column"> <div class="modal"> + <div class="modal-overlay"></div> <div class="modal-container" role="document"> <div class="modal-header"> - <button type="button" class="btn btn-clear pull-right" aria-label="Close"></button> - <h6 class="modal-title">Modal title</h6> + <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> + <div class="modal-title">Modal title</div> </div> <div class="modal-body"> <div class="content"> @@ -1310,16 +1423,18 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code class="label">modal</code> and add another container <code class="label">modal-container</code> inside it. And add child elements with the class name <code class="label">modal-header</code>, <code class="label">modal-content</code> and/or <code class="label">modal-footer</code>. </p> + <p>Add a container element with the class <code class="label">modal</code>. And add a real container <code class="label">modal-container</code> and overlay <code class="label">modal-overlay</code> inside it. You can add child elements with the class name <code class="label">modal-header</code>, <code class="label">modal-content</code> and <code class="label">modal-footer</code> - any or all of them. </p> + <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class <code class="label">active</code> to the <code class="label">modal</code> container</p> </section> <!-- modals example --> <pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal"</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal active"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span>><<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-header"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear pull-right"</span>><<span class="tag">/button</span>> - <<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">"modal-title"</span>>Modal title<<span class="tag">/h6</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear float-right"</span>><<span class="tag">/button</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-title"</span>>Modal title<<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-body"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"content"</span>> @@ -1334,6 +1449,77 @@ <<span class="tag">/div</span>> </pre> + <header class="text-center"><h5>modal sizes</h5></header> + <div class="columns"> + <div class="column"> + <div class="modal modal-sm"> + <div class="modal-overlay"></div> + <div class="modal-container" role="document"> + <div class="modal-header"> + <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> + <div class="modal-title">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-link">Close</button> + <button class="btn btn-primary">Share</button> + </div> + </div> + </div> + </div> + <div class="column"> + <div class="modal modal-sm"> + <div class="modal-overlay"></div> + <div class="modal-container" role="document"> + <div class="modal-header"> + <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> + <div class="modal-title">Modal title</div> + </div> + <div class="modal-body"> + <div class="content"> + <form> + <div class="form-group"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> + </div> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender" /> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" checked /> Female + </label> + </div> + </form> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-link">Close</button> + <button class="btn btn-primary">Submit</button> + </div> + </div> + </div> + </div> + </div> + <section class="notes"> + <p>Add the class <code class="label">modal-sm</code> for a smaller modal dialog. </p> + </section> + + <!-- modals example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal modal-sm"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span>><<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> + <span class="com"><!-- modal structure here --></span> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</pre> + </section> <section id="cards" class="grid-960"> @@ -1445,32 +1631,124 @@ <a href="#position" class="btn btn-primary">position</a> <a href="#display" class="btn btn-primary">display</a> <a href="#text" class="btn btn-primary">text</a> - <a href="#shadow" class="btn btn-primary">shadow</a> <a href="#shapes" class="btn btn-primary">shapes</a> </div> </section> </section> <section id="position" class="grid-960"> - <header class="text-center"><h4>position</h4></header> <section class="notes"> - <p><strong>Position utilities</strong> are used for useful layout and position things.</p> + <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> </section> - <div class="columns"> - <div class="column"> - </div> - </div> + <!-- position utilities example --> +<pre class="code lang-html"> +<span class="com"><!-- clear float --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"clearfix"</span>><<span class="tag">/div</span>> +<span class="com"><!-- float: left and right--></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-left"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-right"</span>><<span class="tag">/div</span>> +<span class="com"><!-- position: relative, absolute and fixed--></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rel"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"abs"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"fixed"</span>><<span class="tag">/div</span>> +<span class="com"><!-- centered block --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"centered"</span>><<span class="tag">/div</span>> +<span class="com"><!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-10"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-5"</span>><<span class="tag">/div</span>> +<span class="com"><!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-10"</span>><<span class="tag">/div</span>> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-5"</span>><<span class="tag">/div</span>> +</pre> + + </section> + + <section id="display" class="grid-960"> <section class="notes"> + <p><strong>Display utilities</strong> are used for display and hidden things.</p> + </section> + + <!-- display utilities example --> +<pre class="code lang-html"> +<span class="com"><!-- display: block; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"block"</span>><<span class="tag">/div</span>> +<span class="com"><!-- display: inline; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline"</span>><<span class="tag">/div</span>> +<span class="com"><!-- display: inline-block; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline-block"</span>><<span class="tag">/div</span>> +<span class="com"><!-- display: flex; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"flex"</span>><<span class="tag">/div</span>> +<span class="com"><!-- display: inline-flex; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline-flex"</span>><<span class="tag">/div</span>> +<span class="com"><!-- display: none; --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"hide"</span>><<span class="tag">/div</span>> +</pre> + </section> + + <section id="text" class="grid-960"> + <section class="notes"> + <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p> </section> - <!-- position utilities example --> + <!-- text utilities example --> <pre class="code lang-html"> +<span class="com"><!-- left-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-left"</span>><<span class="tag">/div</span>> +<span class="com"><!-- center-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-center"</span>><<span class="tag">/div</span>> +<span class="com"><!-- right-aligned text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-right"</span>><<span class="tag">/div</span>> +<span class="com"><!-- justified text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-justify"</span>><<span class="tag">/div</span>> + +<span class="com"><!-- Lowercased text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-lowercase"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Uppercased text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-uppercase"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Capitalized text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-capitalize"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Noral weight text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-normal"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Bold text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-bold"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Italicized text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-italic"</span>><<span class="tag">/div</span>> + +<span class="com"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-ellipsis"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Overflow behavior: truncate the text --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-clip"</span>><<span class="tag">/div</span>> +<span class="com"><!-- Text may be broken at arbitrary points --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-break"</span>><<span class="tag">/div</span>> +</pre> + + </section> + + <section id="shadow" class="grid-960"> + <section class="notes"> + <p><strong>Shape utilities</strong> are used for change element shapes.</p> + </section> + + <!-- shape utilities example --> +<pre class="code lang-html"> +<span class="com"><!-- rounded element --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rounded"</span>><<span class="tag">/div</span>> +<span class="com"><!-- circle element --></span> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"circle"</span>><<span class="tag">/div</span>> </pre> </section> </section> + <footer class="bg-grey"> + <section id="copyright" class="grid-footer grid-960"> + <p> + <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> + </p> + <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </section> + </footer> </body> </html> |