diff options
ADD: Experimentals doc page
1 files changed, 25 insertions, 88 deletions
| -rw-r--r-- | docs/elements.html | 113 |
diff --git a/docs/elements.html b/docs/elements.html index f2104a7..e8d3adf 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -53,10 +53,10 @@ <a href="elements.html#labels">Labels</a> </li> <li class="nav-item"> - <a href="elements.html#progress">Progress</a> + <a href="elements.html#media">Media</a> </li> <li class="nav-item"> - <a href="elements.html#media">Media</a> + <a href="experimentals.html">Experimentals</a> </li> </ul> </li> @@ -79,15 +79,15 @@ <section class="notes"> <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote, lists and code elements. </p> </section> - <header class="text-center"><h4>Headings</h4></header> - <h1>H1 Title <small class="label">5rem</small></h1> - <h2>H2 Title <small class="label">4rem</small></h2> - <h3>H3 Title <span class="label">3rem</span></h3> - <h4>H4 Title <span class="label">2.4rem</span></h4> - <h5>H5 Title <span class="label">2rem</span></h5> - <h6>H6 Title <span class="label">1.6rem</span></h6> - + <section class="notes"> + <h1>H1 Title <small class="label">5rem</small></h1> + <h2>H2 Title <small class="label">4rem</small></h2> + <h3>H3 Title <span class="label">3rem</span></h3> + <h4>H4 Title <span class="label">2.4rem</span></h4> + <h5>H5 Title <span class="label">2rem</span></h5> + <h6>H6 Title <span class="label">1.6rem</span></h6> + </section> <!-- headings example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">h1</span>>H1 Title<<span class="tag">/h1</span>> @@ -95,9 +95,10 @@ </pre> <header class="text-center"><h4>Paragraphs</h4></header> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#typography">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - + <section class="notes"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#typography">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> + </section> <!-- paragraphs example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">p</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>dictum in vehicula sit amet<<span class="tag">/a</span>>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.<<span class="tag">/p</span>></code> @@ -181,22 +182,21 @@ <code class="ml-10"><var></code> </div> </div> - <header class="text-center"><h4>Optimized for east asian fonts</h4></header> - <p class="text-large text-center"><span lang="zh-Hans">你好</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕하세요</span></p> - <h5>Chinese (Simplified)</h5> - <p lang="zh-Hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p> - <h5>Chinese (Tranditional)</h5> - <p lang="zh-Hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p> - <h5>Japanese</h5> - <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> - <h5>Korean</h5> - <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> - + <section class="notes"> + <p class="text-large text-center"><span lang="zh-Hans">你好</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕하세요</span></p> + <h5>Chinese (Simplified)</h5> + <p lang="zh-Hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p> + <h5>Chinese (Tranditional)</h5> + <p lang="zh-Hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p> + <h5>Japanese</h5> + <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> + <h5>Korean</h5> + <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> + </section> <section class="notes"> <p>Use the attribute <code>lang</code> or add the class <code>cjk</code> to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.</p> </section> - <!-- east asian example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>>祇園精舎の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> @@ -208,7 +208,6 @@ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <cite>- Source</cite> </blockquote> - <!-- blockquote example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">blockquote</span>> @@ -216,7 +215,6 @@ <<span class="tag">cite</span>>- Source<<span class="tag">/cite</span>> <<span class="tag">/blockquote</span>></code> </pre> - <header class="text-center"><h4>Lists</h4></header> <div class="columns"> <div class="column col-4 col-xs-12"> @@ -256,7 +254,6 @@ </dl> </div> </div> - <!-- lists example --> <pre> <code class="code lang-html" data-lang="HTML"><span class="com"><!-- unordered list --></span> @@ -278,7 +275,6 @@ <<span class="tag">dd</span>>description list description<<span class="tag">/dd</span>> <<span class="tag">/dl</span>></code> </pre> - </section> <section id="tables" class="container"> @@ -286,7 +282,6 @@ <section class="notes"> <p><strong>Tables</strong> include default styles for tables and data sets.</p> </section> - <table class="table table-striped"> <thead> <tr> @@ -322,7 +317,6 @@ <p>Add the class <code>table</code> to any <table> element. The class will add padding, border and emphasized table header. Use <code>table-striped</code> to <table> to add zebra striped style. For hoverable table rows, you can add the class <code>table-hover</code> to enable hover style. </p> <p>Use the class <code>active</code> to make <tr> element highlighted. </p> </section> - <!-- tables example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table table-striped table-hover"</span>> @@ -342,7 +336,6 @@ <<span class="tag">/tbody</span>> <<span class="tag">/table</span>></code> </pre> - </section> <section id="buttons" class="container"> @@ -350,7 +343,6 @@ <section class="notes"> <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p> </section> - <div class="columns"> <div class="column col-xs-12"> <button class="btn">default button</button> @@ -376,7 +368,6 @@ <section class="notes"> <p>Add the class <code>btn</code> to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. A button with the class <code>loading</code> can show loading indicator. </p> </section> - <!-- buttons example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>default button<<span class="tag">/button</span>> @@ -386,11 +377,9 @@ <span class="com"><!-- a button with loading state --></span> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>></code> </pre> - <section class="notes"> <p>Add the class <code>disabled</code> or the attribute <code>disabled</code> for a disabled button.</p> </section> - <div class="columns"> <div class="column col-xs-12"> <button class="btn disabled" tabindex="-1">default button</button> @@ -404,7 +393,6 @@ </div> <header class="text-center"><h4>Button sizes</h4></header> - <div class="columns"> <div class="column col-6 col-xs-12"> <button class="btn btn-primary btn-lg">large</button> @@ -426,7 +414,6 @@ <p>Add the class <code>btn-sm</code> or <code>btn-lg</code> for small or large button size. Also, you can add the class <code>btn-block</code> for a full-width button. </p> <p>Please note that you could use the class <code>btn-action</code> for a square button, or add another class <code>circle</code> for a round button, which is often used as a Float Action Button (FAB).</p> </section> - <!-- buttons example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> @@ -437,26 +424,22 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>></code> </pre> - <div class="columns"> <div class="column"> <button class="btn btn-primary btn-lg"><i class="icon icon-markunread"></i> large</button> <button class="btn btn-primary"><i class="icon icon-markunread"></i> normal</button> <button class="btn btn-primary btn-sm"><i class="icon icon-markunread"></i> small</button> </div> - </div> <section class="notes"> <p>Icons with the class <code>icon</code> can be correctly rendered in each button size. </p> </section> - <!-- buttons example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-lg"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> large<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> normal<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> small<<span class="tag">/button</span>></code> </pre> - <header class="text-center"><h4>Button groups</h4></header> <div class="columns"> <div class="column col-xs-12"> @@ -493,7 +476,6 @@ <section class="notes"> <p>If you want to use buttons as a group, add the class <code>btn-group</code> to the container. You can add the class <code>btn-group-block</code> for a full-width button group.</p> </section> - <!-- button groups example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group btn-group-block"</span>> @@ -502,7 +484,6 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>third button<<span class="tag">/button</span>> <<span class="tag">/div</span>></code> </pre> - </section> <section id="forms" class="container"> @@ -563,7 +544,6 @@ </form> </div> </div> - <!-- forms example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">form</span>> @@ -614,12 +594,10 @@ <<span class="tag">/div</span>> <<span class="tag">/form</span>></code> </pre> - <section class="notes"> <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> <p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the <form> container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. </p> </section> - <div class="columns"> <div class="column col-9 col-sm-12"> <form class="form-horizontal" action="#forms"> @@ -700,7 +678,6 @@ </form> </div> </div> - <!-- forms example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">"form-horizontal"</span>> @@ -715,7 +692,6 @@ <span class="com"><!-- form structure --></span> <<span class="tag">/form</span>></code> </pre> - <div class="columns"> <div class="column col-9 col-sm-12"> <form class="form-horizontal" action="#forms"> @@ -802,11 +778,9 @@ </form> </div> </div> - <section class="notes"> <p>To use form validation styles, add <code>is-success</code> and <code>is-danger</code> to the controls or add <code>has-success</code> and <code>has-danger</code> to parent elements. You can use the class <code>form-input-hint</code> to provide form validation success and error messages.</p> </section> - <div class="columns"> <div class="column col-6 col-xs-12"> <div class="form-group"> @@ -843,7 +817,6 @@ </div> </div> </div> - <!-- forms example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">form</span>> @@ -862,11 +835,9 @@ <<span class="tag">/div</span>> <<span class="tag">/form</span>></code> </pre> - <section class="notes"> <p>For smaller or larger input and select controls, you could add <code>input-sm</code>/<code>input-lg</code> and <code>select-sm</code>/<code>select-lg</code> to the elements.</p> </section> - <div class="columns"> <div class="column col-4"> <input class="form-input input-sm" type="text" placeholder="Name" /> @@ -893,7 +864,6 @@ </select> </div> </div> - <header class="text-center"><h4>Input groups</h4></header> <div class="columns"> <div class="column col-xs-12"> @@ -943,7 +913,6 @@ <section class="notes"> <p>If you want to attach text and button along with an input, add the class <code>input-group</code> to the input container. And add the class <code>input-group-addon</code> to the text element and <code>input-group-btn</code> to the button element.</p> </section> - <!-- input groups example --> <pre> <code class="code lang-html" data-lang="HTML"><span class="com"><!-- normal input group --></span> @@ -965,7 +934,6 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Submit<<span class="tag">/button</span>> <<span class="tag">/div</span>></code> </pre> - </section> <section id="labels" class="container"> @@ -984,7 +952,6 @@ <section class="notes"> <p>Add the class <code>label</code> to <span> or <small> elements. You can add another class <code>label-primary</code>, <code>label-success</code> and <code>label-danger</code> for a primary colored label.</p> </section> - <!-- labels example --> <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label"</span>>default label<<span class="tag">/span</span>> @@ -992,35 +959,6 @@ </pre> </section> - <section id="progress" class="container"> - <header class="text-center"><h3>Progress <small class="label">experimental</small></h3></header> - <section class="notes"> - <p>The <strong>Progress</strong> indicates the progress completion of a task.</p> - </section> - <div class="columns text-center"> - <div class="column col-3 col-xs-12"> - <progress class="progress" value="75" max="100"></progress> - </div> - <div class="column col-3 col-xs-12"> - <progress class="progress" value="50" max="100"></progress> - </div> - <div class="column col-3 col-xs-12"> - <progress class="progress" value="25" max="100"></progress> - </div> - <div class="column col-3 col-xs-12"> - <progress class="progress" value="0" max="100"></progress> - </div> - </div> - <section class="notes"> - <p></p> - </section> - -<!-- progress example --> -<pre> -<code class="code lang-html" data-lang="HTML"><<span class="tag">progress</span> <span class="atn">class</span>=<span class="atv">"progress"</span> <span class="atn">value</span>=<span class="atv">"25"</span> <span class="atn">max</span>=<span class="atv">"100"</span>><<span class="tag">/progress</span>></code> -</pre> - </section> - <section id="media" class="container"> <header class="text-center"><h3>Media</h3></header> <section class="notes"> @@ -1035,7 +973,6 @@ <pre> <code class="code lang-html" data-lang="HTML"><<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> <span class="atn">alt</span>=<span class="atv">"macOS El Capitan Wallpaper"</span> /></code> </pre> - <section class="notes"> <p>You can use the element <code><figure></code> for an image with a caption. Add the class <code>figure</code> to <figure> element. The images with the class <code>img-responsive</code> will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment. </p> </section> |