diff options
update doc and code cleanup
1 files changed, 128 insertions, 12 deletions
| -rw-r--r-- | index.html | 140 |
@@ -30,7 +30,7 @@ margin: 4rem 0; } .notes { - margin: 2rem 0; + margin: 4rem 0; color: #666; } .code { @@ -144,14 +144,25 @@ <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> @@ -581,10 +592,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 +607,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 +616,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> /> @@ -795,11 +812,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 +831,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 +850,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 +894,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 +909,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> @@ -1094,17 +1133,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>. </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 +1161,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> @@ -1271,7 +1319,7 @@ <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> + <div class="modal-title">Modal title</div> </div> <div class="modal-body"> <div class="content"> @@ -1310,7 +1358,7 @@ </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 another container <code class="label">modal-container</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> </section> <!-- modals example --> @@ -1319,7 +1367,7 @@ <<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">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 +1382,74 @@ <<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-container" role="document"> + <div class="modal-header"> + <button type="button" class="btn btn-clear pull-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-container" role="document"> + <div class="modal-header"> + <button type="button" class="btn btn-clear pull-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-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"> |