Summary Files Commits Branches @commit @diff @stats
path: root / docs / layout.html
diff options
context:
space:
mode:
1 files changed, 129 insertions, 1108 deletions
-rw-r--r--docs/layout.html1237
diff --git a/docs/layout.html b/docs/layout.html
index b20594a..7878690 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <title>Elements - Spectre.css CSS Framework</title>
+ <title>Layout - Spectre.css CSS Framework</title>
<meta charset="utf-8">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
@@ -36,7 +36,7 @@
</div>
</div>
<div class="accordion">
- <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
<label class="accordion-header c-hand" for="accordion-elements">Elements</label>
<div class="accordion-body">
<ul class="menu menu-nav">
@@ -52,7 +52,7 @@
</div>
</div>
<div class="accordion">
- <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
<label class="accordion-header c-hand" for="accordion-layout">Layout</label>
<div class="accordion-body">
<ul class="menu menu-nav">
@@ -129,1186 +129,207 @@
</div><a class="off-canvas-overlay" href="#close"></a>
<div class="off-canvas-content">
<div class="docs-content" id="content">
- <div class="container" id="typography">
- <h3 class="s-title"><a class="anchor" href="#typography" aria-hidden="true">#</a>Typography</h3>
- <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p>
- <h4 class="s-subtitle" id="typography-headings"><a class="anchor" href="#typography-headings" aria-hidden="true">#</a>Headings</h4>
+ <div class="container" id="grid">
+ <h3 class="s-title"><a class="anchor" href="#grid" aria-hidden="true">#</a>Flexbox grid</h3>
+ <p>Layout includes flexbox based responsive grid system with 12 columns.</p>
<div class="columns">
- <div class="column col-12">
- <h1>H1 Heading <small class="label">40px</small></h1>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
- <div class="column col-12">
- <h2>H2 Heading <small class="label">32px</small></h2>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
- <div class="column col-12">
- <h3>H3 Heading <small class="label">28px</small></h3>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
- <div class="column col-12">
- <h4>H4 Heading <small class="label">24px</small></h4>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
- <div class="column col-12">
- <h5>H5 Heading <small class="label">20px</small></h5>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
- <div class="column col-12">
- <h6>H6 Heading <small class="label">16px</small></h6>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
- </div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>H1 Heading<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>H1 Heading <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>&gt;</span>40px<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"h1"</span>&gt;</span>H1 Heading<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="typography-paragraphs"><a class="anchor" href="#typography-paragraphs" aria-hidden="true">#</a>Paragraphs</h4>
- <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit</a>.
- Praesent risus leo, dictum in vehicula sit amet, 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>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Lorem ipsum dolor sit amet, ...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="typography-semantic-text"><a class="anchor" href="#typography-semantic-text" aria-hidden="true">#</a>Semantic text elements</h4>
- <div class="columns">
- <div class="column col-6 col-xs-12"><abbr title="Internationalization">I18N</abbr><code class="ml-2">abbr</code></div>
- <div class="column col-6 col-xs-12"><strong>Bold</strong><code class="ml-2">strong</code><code class="ml-2">b</code></div>
- <div class="column col-6 col-xs-12">
- <cite>Citation</cite><code class="ml-2">cite</code>
- </div>
- <div class="column col-6 col-xs-12"><code>Hello World!</code><code class="ml-2">code</code></div>
- <div class="column col-6 col-xs-12">
- <del>Deleted</del><code class="ml-2">del</code>
- </div>
- <div class="column col-6 col-xs-12"><em>Emphasis</em><code class="ml-2">em</code></div>
- <div class="column col-6 col-xs-12"><i>Italic</i><code class="ml-2">i</code></div>
- <div class="column col-6 col-xs-12"><ins>Inserted</ins><code class="ml-2">ins</code></div>
- <div class="column col-6 col-xs-12"><kbd>Ctrl + S</kbd><code class="ml-2">kbd</code></div>
- <div class="column col-6 col-xs-12">
- <mark>Highlighted</mark><code class="ml-2">mark</code>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
- <div class="column col-6 col-xs-12">
- <ruby>漢
- <rt>kan</rt>字
- <rt>ji</rt>
- </ruby><code class="ml-2">ruby</code>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
- <div class="column col-6 col-xs-12">
- <s>Strikethrough</s><code class="ml-2">s</code>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
- <div class="column col-6 col-xs-12"><samp>Sample</samp><code class="ml-2">samp</code></div>
- <div class="column col-6 col-xs-12">Text <sub>Subscripted</sub><code class="ml-2">sub</code></div>
- <div class="column col-6 col-xs-12">Text <sup>Superscripted</sup><code class="ml-2">sup</code></div>
- <div class="column col-6 col-xs-12">
- <time>20:00</time><code class="ml-2">time</code>
- </div>
- <div class="column col-6 col-xs-12">
- <u>Underline</u><code class="ml-2">u</code>
- </div>
- <div class="column col-6 col-xs-12">
- <var>x</var> =
- <var>y</var> + 2<code class="ml-2">var</code>
- </div>
- </div>
- <h4 class="s-subtitle" id="typography-east-asian"><a class="anchor" href="#typography-east-asian" aria-hidden="true">#</a>Optimized for East Asian fonts</h4>
- <p class="h5"><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>,<small lang="ko">안녕하세요</small></p>
- <p class="h6">Chinese (Simplified)</p>
- <p lang="zh-Hans">革命不是请客吃饭,不是做文章,不是绘画绣花,不能那样雅致,那样从容不迫,“文质彬彬”,那样“温良恭俭让”。革命就是暴动,是一个阶级推翻一个阶级的暴烈的行动。</p>
- <p class="h6">Chinese (Tranditional)</p>
- <p lang="zh-Hant">山不在高,有仙則名;水不在深,有龍則靈。斯是陋室,惟吾德馨。苔痕上階綠,草色入簾青;談笑有鴻儒,往來無白丁。可以調素琴,閱金經。無絲竹之亂耳,無案牘之勞形。南陽諸葛廬,西蜀子雲亭。孔子云:「何陋之有?」</p>
- <p class="h6">Japanese</p>
- <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。</p>
- <p class="h6">Korean</p>
- <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p>
- <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.</p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"zh-Hans"</span>&gt;</span>革命不是请客吃饭,不是做文章……<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ja"</span>&gt;</span>祇園精舎の鐘の声、諸行無常の響きあり……<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ko"</span>&gt;</span>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-</code></pre>
- <p>And you can use the <code>cjk</code> class or the <code>lang</code> attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.</p>
- <p lang="ja">
- <u>祇園</u>
- <u>精舎</u>の鐘の声、諸行無常の響きあり。
- </p>
- <p lang="ja">
- <del>祇園</del>
- <del>精舎</del>の鐘の声、諸行無常の響きあり。
- </p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"cjk"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">u</span>&gt;</span>祇園<span class="hljs-tag">&lt;/<span class="hljs-name">u</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">u</span>&gt;</span>精舎<span class="hljs-tag">&lt;/<span class="hljs-name">u</span>&gt;</span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"cjk"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">del</span>&gt;</span>祇園<span class="hljs-tag">&lt;/<span class="hljs-name">del</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">del</span>&gt;</span>精舎<span class="hljs-tag">&lt;/<span class="hljs-name">del</span>&gt;</span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="typography-fonts"><a class="anchor" href="#typography-fonts" aria-hidden="true">#</a>Fonts</h4>
- <p>Spectre sets the most common and best <code>font-family</code> for each OS with fallback support in old systems.
- There are also fonts targeted East Asian typography.
- </p>
- <pre class="code"><code><span class="hljs-comment">/* Western typography targeted */</span>
-<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
-<span class="hljs-comment">/* Monospace typography targeted */</span>
-<span class="hljs-attribute">font-family</span>: <span class="hljs-string">"SF Mono"</span>, <span class="hljs-string">"Segoe UI Mono"</span>, <span class="hljs-string">"Roboto Mono"</span>, Menlo, Courier, monospace;
-
-<span class="hljs-comment">/* Chinese (lang="zh-Hans" and lang="zh-Hant") targeted */</span>
-<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"PingFang SC"</span>, <span class="hljs-string">"Hiragino Sans GB"</span>, <span class="hljs-string">"Microsoft YaHei"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
-<span class="hljs-comment">/* Japanese (lang="ja") targeted */</span>
-<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Hiragino Sans"</span>, <span class="hljs-string">"Hiragino Kaku Gothic Pro"</span>, <span class="hljs-string">"Yu Gothic"</span>, YuGothic, Meiryo, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
-<span class="hljs-comment">/* Korean (lang="ko") targeted */</span>
-<span class="hljs-attribute">font-family</span>: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Malgun Gothic"</span>, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;
-</code></pre>
- <h4 class="s-subtitle" id="typography-blockquote"><a class="anchor" href="#typography-blockquote" aria-hidden="true">#</a>Blockquote</h4>
- <blockquote>
- <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.</p>
- <cite>- Bill Gates</cite>
- </blockquote>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">blockquote</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">cite</span>&gt;</span>- Bill Gates<span class="hljs-tag">&lt;/<span class="hljs-name">cite</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">blockquote</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="typography-lists"><a class="anchor" href="#typography-lists" aria-hidden="true">#</a>Lists</h4>
- <div class="columns">
- <div class="column col-4 col-xs-12">
- <ul class="list">
- <li>list item 1</li>
- <li>list item 2
- <ul>
- <li>list item 2.1</li>
- <li>list item 2.2</li>
- <li>list item 2.3</li>
- </ul>
- </li>
- <li>list item 3</li>
- </ul>
- </div>
- <div class="column col-4 col-xs-12">
- <ol class="list">
- <li>list item 1</li>
- <li>list item 2
- <ol>
- <li>list item 2.1</li>
- <li>list item 2.2</li>
- <li>list item 2.3</li>
- </ol>
- </li>
- <li>list item 3</li>
- </ol>
- </div>
- <div class="column col-4 col-xs-12">
- <dl class="list">
- <dt>description list term 1</dt>
- <dd>description list description 1</dd>
- <dt>description list term 2</dt>
- <dd>description list description 2</dd>
- <dt>description list term 3</dt>
- <dd>description list description 3</dd>
- </dl>
- </div>
- </div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- unordered list --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 2
- <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 2.1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 2.2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 2.3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>list item 3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
-
-<span class="hljs-comment">&lt;!-- description list --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">dl</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">dt</span>&gt;</span>description list term<span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>description list description<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span></code></pre>
- </div>
- <div class="container" id="tables">
- <h3 class="s-title"><a class="anchor" href="#tables" aria-hidden="true">#</a>Tables</h3>
- <p>Tables include default styles for tables and data sets.</p>
- <div class="columns">
- <div class="column col-12">
- <table class="table table-striped">
- <thead>
- <tr>
- <th>Name</th>
- <th>Genre</th>
- <th>Release date</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>The Shawshank Redemption</td>
- <td>Crime, Drama</td>
- <td>14 October 1994</td>
- </tr>
- <tr>
- <td>The Godfather</td>
- <td>Crime, Drama</td>
- <td>24 March 1972</td>
- </tr>
- <tr>
- <td>Schindler's List</td>
- <td>Biography, Drama, History</td>
- <td>4 February 1994</td>
- </tr>
- <tr>
- <td>Se7en</td>
- <td>Crime, Drama, Mystery</td>
- <td>22 September 1995</td>
- </tr>
- </tbody>
- </table>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
- </div>
- <p>Add the <code>table</code> class to any &lt;table&gt; element.
- The class will add padding, border and emphasized table header.
- Use the <code>table-striped</code> class to &lt;table&gt; to add zebra striped style.
- For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style.
- </p>
- <p>Use the <code>active</code> class to make &lt;tr&gt; element highlighted.</p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-striped table-hover"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">thead</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>name<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>genre<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>release date<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>The Shawshank Redemption<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>Crime, Drama<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>14 October 1994<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span></code></pre>
- </div>
- <div class="container" id="buttons">
- <h3 class="s-title"><a class="anchor" href="#buttons" aria-hidden="true">#</a>Buttons</h3>
- <p>Buttons include simple button styles for actions in different types and sizes.</p>
- <div class="columns">
- <div class="column col-12">
- <button class="btn">default button</button>
- <button class="btn btn-primary">primary button</button>
- <button class="btn btn-link">link button</button>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
- </div>
- <p>Add the <code>btn</code> class to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button.
- There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons.
- </p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>default button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>primary button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>link button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="buttons-colors"><a class="anchor" href="#buttons-colors" aria-hidden="true">#</a>Button colors</h4>
- <div class="columns">
- <div class="column col-12">
- <button class="btn btn-success">success button</button>
- <button class="btn btn-error">error button</button>
+ <div class="column">
+ <div class="bg-primary text-secondary docs-block"></div>
</div>
</div>
- <p>Add the <code>btn-success</code> or <code>btn-error</code> class for success (green) or error (red) button color.
- If you need more button colors, please use <a href="getting-started.html#variables-buttons">button mixins</a> to create your own button color variants.
- </p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-success"</span>&gt;</span>success button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-error"</span>&gt;</span>error button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="buttons-sizes"><a class="anchor" href="#buttons-sizes" aria-hidden="true">#</a>Button sizes</h4>
<div class="columns">
<div class="column col-12">
- <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button>
- <button class="btn btn-primary btn-lg">large button</button>
- </div>
- <div class="column col-12">
- <button class="btn btn-primary">normal <i class="icon icon-arrow-down"></i></button>
- <button class="btn btn-primary">normal button</button>
- </div>
- <div class="column col-12">
- <button class="btn btn-primary btn-sm">small <i class="icon icon-arrow-down"></i></button>
- <button class="btn btn-primary btn-sm">small button</button>
+ <div class="bg-gray docs-block">col-12 (100%)</div>
</div>
</div>
- <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size.
- Also, you can add the <code>btn-block</code> class for a full-width button.
- </p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-lg"</span>&gt;</span>large button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-sm"</span>&gt;</span>small button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-block"</span>&gt;</span>block button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-lg"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> large<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> normal<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-sm"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> small<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-</code></pre>
- <p>Please note that you could use the <code>btn-action</code> class for a square button, or add another <code>circle</code> class for a round button, which is often used as a Float Action Button (FAB).</p>
- <div class="columns">
- <div class="column col-xs-12">
- <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button>
- <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button>
- <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button>
- <button class="btn btn-action btn-primary circle"><i class="icon icon-arrow-up"></i></button>
- <button class="btn btn-action btn-primary btn-sm circle"><i class="icon icon-arrow-up"></i></button>
- </div>
- </div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action circle"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="buttons-states"><a class="anchor" href="#buttons-states" aria-hidden="true">#</a>Button states</h4>
- <p>Add the <code>active</code> class for active button state style.</p>
<div class="columns">
- <div class="column col-12">
- <button class="btn active">default active</button>
- <button class="btn btn-primary active">primary active</button>
- <button class="btn btn-link active">link active</button>
+ <div class="column col-9">
+ <div class="bg-gray docs-block">col-9 (75%)</div>
</div>
</div>
- <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for disabled button state style.</p>
<div class="columns">
- <div class="column col-12">
- <button class="btn disabled" tabindex="-1">default disabled</button>
- <button class="btn btn-primary" disabled="" tabindex="-1">primary disabled</button>
- <button class="btn btn-link" disabled="" tabindex="-1">link disabled</button>
+ <div class="column col-6">
+ <div class="bg-gray docs-block">col-6 (50%)</div>
</div>
</div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- buttons with disabled state --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn disabled"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>&gt;</span>disabled button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>&gt;</span>disabled button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-</code></pre>
- <p>A button with the <code>loading</code> class can show loading indicator.</p>
<div class="columns">
- <div class="column col-12">
- <button class="btn loading">default button</button>
- <button class="btn btn-primary loading">primary button</button>
- <button class="btn btn-link loading">link button</button>
+ <div class="column col-3">
+ <div class="bg-gray docs-block">col-3 (25%)</div>
</div>
</div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- buttons with loading state --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn loading"</span>&gt;</span>button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary loading"</span>&gt;</span>primary button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="buttons-groups"><a class="anchor" href="#buttons-groups" aria-hidden="true">#</a>Button groups</h4>
- <div class="columns">
- <div class="column col-md-12">
- <div class="btn-group">
- <button class="btn">first button</button>
- <button class="btn">second button</button>
- <button class="btn">third button</button>
- </div>
- </div>
- <div class="column col-md-12">
- <div class="btn-group btn-group-block">
- <button class="btn btn-primary">first button</button>
- <button class="btn btn-primary">second button</button>
- <button class="btn btn-primary">third button</button>
- </div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-md-12">
- <div class="btn-group">
- <button class="btn btn-sm active">first button</button>
- <button class="btn btn-sm">second button</button>
- <button class="btn btn-sm">third button</button>
- </div>
- </div>
- <div class="column col-md-12">
- <div class="btn-group btn-group-block">
- <button class="btn btn-primary btn-sm active">first button</button>
- <button class="btn btn-primary btn-sm">second button</button>
- <button class="btn btn-primary btn-sm">third button</button>
- </div>
- </div>
- </div>
- <p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container.
- You can add the <code>btn-group-block</code> class for a full-width button group.
- </p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group btn-group-block"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>first button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>second button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>third button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> </code></pre>
- </div>
- <div class="container" id="forms">
- <h3 class="s-title"><a class="anchor" href="#forms" aria-hidden="true">#</a>Forms</h3>
- <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.</p>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="form-group">
- <label class="form-label" for="input-example-1">Name</label>
- <input class="form-input" id="input-example-1" type="text" placeholder="Name">
- </div>
- <div class="form-group">
- <label class="form-label" for="input-example-2">Email</label>
- <input class="form-input" id="input-example-2" type="email" placeholder="Email">
- </div>
- </div>
- </div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form input control --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>&gt;</span>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- flexbox grid example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-3"</span>&gt;</span>col-3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-2"</span>&gt;</span>col-2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-1"</span>&gt;</span>col-1<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="form-group">
- <label class="form-label" for="input-example-3">Message</label>
- <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
- </div>
+ <p>Add the <code>columns</code> class to a container with the <code>container</code> class.
+ And add any element you want with the <code>column</code> class inside the container. These columns will take up the space equally.
+ You can specific the width of each column by adding class <code>col-<1-12></code>.
+ </p>
+ <p>And you can add the <code>col-gapless</code> class to the <code>columns</code> to have gapless columns.</p>
+ <div class="columns col-gapless">
+ <div class="column col-6">
+ <div class="bg-gray docs-block">col-6 (gapless)</div>
</div>
- </div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form textarea control --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-3"</span>&gt;</span>Message<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-3"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-</code></pre>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="form-group">
- <select class="form-select">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
- <div class="form-group">
- <select class="form-select" multiple="">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
+ <div class="column col-6">
+ <div class="bg-gray docs-block">col-6 (gapless)</div>
</div>
</div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form select control --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Choose an option<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Slack<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Skype<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Hipchat<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- gapless columns --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns col-gapless"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <form>
- <div class="form-group">
- <label class="form-label">Gender</label>
- <label class="form-radio">
- <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
- </label>
- <label class="form-radio">
- <input type="radio" name="gender"><i class="form-icon"></i> Female
- </label>
- </div>
- </form>
+ <p>By default, Spectre grid has multi-line flexbox enabled. You can add the <code>col-oneline</code> class to <code>columns</code> to make all its child columns positioned in the same single row.</p>
+ <div class="columns col-oneline">
+ <div class="column col-8">
+ <div class="bg-gray docs-block">col-8</div>
</div>
- </div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form radio control --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>&gt;</span>Gender<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">checked</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Male
- <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Female
- <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-</code></pre>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="form-group">
- <label class="form-switch">
- <input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips
- </label>
- </div>
- <div class="form-group">
- <label class="form-switch">
- <input type="checkbox" checked=""><i class="form-icon"></i> Send me emails with news and tips
- </label>
- </div>
+ <div class="column col-8">
+ <div class="bg-gray docs-block">col-8</div>
</div>
</div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form switch control --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Send me emails with news and tips
- <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- one line columns --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns col-oneline"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>&gt;</span>col-8<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>&gt;</span>col-8<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="form-group">
- <label class="form-checkbox">
- <input type="checkbox"><i class="form-icon"></i> Remember me
- </label>
- </div>
- <div class="form-group">
- <label class="form-checkbox">
- <input type="checkbox" checked=""><i class="form-icon"></i> Remember me
- </label>
- </div>
- </div>
- </div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form checkbox control --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Remember me
- <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-</code></pre>
- <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p>
- <h4 class="s-subtitle" id="forms-horizontal"><a class="anchor" href="#forms-horizontal" aria-hidden="true">#</a>Horizontal forms</h4>
- <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the &lt;form&gt; container.
- And add the <code>col-<1-12></code> and <code>col-xs/sm/lg/xl-<1-12></code> class to the child elements for responsive form row layout.
+ <h4 class="s-subtitle" id="grid-offset"><a class="anchor" href="#grid-offset" aria-hidden="true">#</a>Grid offset</h4>
+ <p>
+ The Flexbox grid provides margin auto utilities to set offset.
+ There are <code>col-mx-auto</code>, <code>col-ml-auto</code> and <code>col-mr-auto</code> to set margins between columns without using empty columns.
</p>
<div class="columns">
- <div class="column col-9 col-sm-12">
- <form class="form-horizontal" action="#forms">
- <div class="form-group">
- <div class="col-3 col-sm-12">
- <label class="form-label" for="input-example-4">Name</label>
- </div>
- <div class="col-9 col-sm-12">
- <input class="form-input" id="input-example-4" type="text" placeholder="Name">
- </div>
- </div>
- <div class="form-group">
- <div class="col-3 col-sm-12">
- <label class="form-label" for="input-example-5">Email</label>
- </div>
- <div class="col-9 col-sm-12">
- <input class="form-input" id="input-example-5" type="email" placeholder="Email">
- </div>
- </div>
- <div class="form-group">
- <div class="col-3 col-sm-12">
- <label class="form-label">Gender</label>
- </div>
- <div class="col-9 col-sm-12">
- <label class="form-radio">
- <input type="radio" name="gender"><i class="form-icon"></i> Male
- </label>
- <label class="form-radio">
- <input type="radio" name="gender" checked=""><i class="form-icon"></i> Female
- </label>
- </div>
- </div>
- <div class="form-group">
- <div class="col-3 col-sm-12">
- <label class="form-label">Source</label>
- </div>
- <div class="col-9 col-sm-12">
- <select class="form-select" multiple="">
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
- </div>
- <div class="form-group">
- <div class="col-9 col-sm-12 col-ml-auto">
- <label class="form-switch">
- <input type="checkbox"><i class="form-icon"></i> Send me emails with news and tips
- </label>
- </div>
- </div>
- <div class="form-group">
- <div class="col-3 col-sm-12">
- <label class="form-label" for="input-example-6">Message</label>
- </div>
- <div class="col-9 col-sm-12">
- <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea>
- </div>
- </div>
- <div class="form-group">
- <div class="col-9 col-sm-12 col-ml-auto">
- <label class="form-checkbox">
- <input type="checkbox"><i class="form-icon"></i> Remember me
- </label>
- </div>
- </div>
- </form>
+ <div class="column col-2">
+ <div class="bg-gray docs-block">col-2</div>
+ </div>
+ <div class="column col-4 col-mx-auto">
+ <div class="bg-gray docs-block">col-4 col-mx-auto</div>
</div>
</div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-horizontal"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-3 col-sm-12"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-9 col-sm-12"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- <span class="hljs-comment">&lt;!-- form structure --&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="forms-sizes"><a class="anchor" href="#forms-sizes" aria-hidden="true">#</a>Form sizes</h4>
- <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p>
<div class="columns">
- <div class="column col-4 col-xs-12">
- <label class="form-label label-sm">Label</label>
- </div>
- <div class="column col-4 col-xs-12">
- <input class="form-input input-sm" type="text" placeholder="Name">
+ <div class="column col-2">
+ <div class="bg-gray docs-block">col-2</div>
</div>
- <div class="column col-4 col-xs-12">
- <select class="form-select select-sm">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
+ <div class="column col-4 col-ml-auto">
+ <div class="bg-gray docs-block">col-4 col-ml-auto</div>
</div>
</div>
<div class="columns">
- <div class="column col-4 col-xs-12">
- <label class="form-label label-lg">Label</label>
+ <div class="column col-4 col-ml-auto">
+ <div class="bg-gray docs-block">col-4 col-ml-auto</div>
</div>
- <div class="column col-4 col-xs-12">
- <input class="form-input input-lg" type="text" placeholder="Name">
- </div>
- <div class="column col-4 col-xs-12">
- <select class="form-select select-lg">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
+ <div class="column col-2">
+ <div class="bg-gray docs-block">col-2</div>
</div>
</div>
- <p>You can add the <code>input-sm</code>/<code>input-lg</code> classes to the input-checkbox, input-radio and input-switch to have different sizes.</p>
- <h4 class="s-subtitle" id="forms-icons"><a class="anchor" href="#forms-icons" aria-hidden="true">#</a>Form icons</h4>
- <p>Spectre Form components has <a href="#icons">Spectre Icons</a> support.</p>
- <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to &lt;input&gt; element.
- And add the icon with <code>form-icon</code> class next to the &lt;input&gt;.
- </p>
<div class="columns">
- <div class="column col-4 col-xs-12">
- <div class="has-icon-left">
- <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
- </div>
+ <div class="column col-4 col-mx-auto">
+ <div class="bg-gray docs-block">col-4 col-mx-auto</div>
</div>
- <div class="column col-4 col-xs-12">
- <div class="has-icon-left tooltip" data-tooltip="Lorem ipsum dolor sit amet">
- <input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
- </div>
- </div>
- <div class="column col-4 col-xs-12">
- <div class="has-icon-left">
- <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-arrow-right"></i>
- </div>
+ <div class="column col-2">
+ <div class="bg-gray docs-block">col-2</div>
</div>
</div>
<div class="columns">
- <div class="column col-4 col-xs-12">
- <div class="has-icon-right">
- <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
- </div>
+ <div class="column col-4 col-mr-auto">
+ <div class="bg-gray docs-block">col-4 col-mr-auto</div>
</div>
- <div class="column col-4 col-xs-12">
- <div class="has-icon-right">
- <input class="form-input" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
- </div>
- </div>
- <div class="column col-4 col-xs-12">
- <div class="has-icon-right">
- <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon icon icon-check"></i>
- </div>
+ <div class="column col-2">
+ <div class="bg-gray docs-block">col-2</div>
</div>
</div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form input with Spectre icon --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-left"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon icon icon-check"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-</code></pre>
- <p>You can use the <code>loading</code> class for loading or posting state.</p>
<div class="columns">
- <div class="column col-4 col-xs-12">
- <div class="has-icon-right">
- <input class="form-input input-sm" type="text" placeholder="Name"><i class="form-icon loading"></i>
- </div>
- </div>
- <div class="column col-4 col-xs-12">
- <div class="has-icon-right">
- <input class="form-input" type="text" placeholder="Name"><i class="form-icon loading"></i>
- </div>
- </div>
- <div class="column col-4 col-xs-12">
- <div class="has-icon-right">
- <input class="form-input input-lg" type="text" placeholder="Name"><i class="form-icon loading"></i>
- </div>
+ <div class="column col-4 col-mx-auto">
+ <div class="bg-gray docs-block">col-4 col-mx-auto</div>
</div>
</div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- form input with loading icon --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-right"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon loading"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- grid offset example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-4 col-mr-auto"</span>&gt;</span>col-4 col-mr-auto<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-2"</span>&gt;</span>col-2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
- <h4 class="s-subtitle" id="forms-input"><a class="anchor" href="#forms-input" aria-hidden="true">#</a>Input types</h4>
+ <h4 class="s-subtitle" id="grid-nesting"><a class="anchor" href="#grid-nesting" aria-hidden="true">#</a>Grid nesting</h4>
+ <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p>
<div class="columns">
- <div class="column col-9 col-sm-12">
- <form class="form-horizontal" action="#forms">
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-8">Email</label>
- </div>
- <div class="col-9">
- <input class="form-input" id="input-example-8" type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$">
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-9">URL</label>
- </div>
- <div class="col-9">
- <input class="form-input" id="input-example-9" type="url" placeholder="URL" value="https://github.com/picturepan2/spectre">
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-10">Search</label>
- </div>
- <div class="col-9">
- <input class="form-input" id="input-example-10" type="search" placeholder="Search">
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-11">Tel</label>
- </div>
- <div class="col-9">
- <input class="form-input" id="input-example-11" type="tel" placeholder="Tel" value="1-(888)-888-8888">
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-12">Password</label>
- </div>
- <div class="col-9">
- <input class="form-input" id="input-example-12" type="password" placeholder="Password" value="123456789">
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-13">Number</label>
+ <div class="column col-6">
+ <div class="bg-gray">
+ <div class="docs-block">col-6</div>
+ <div class="columns">
+ <div class="column col-6">
+ <div class="bg-primary docs-block">col-6</div>
</div>
- <div class="col-9">
- <input class="form-input" id="input-example-13" type="number" placeholder="00" value="66">
+ <div class="column col-6">
+ <div class="bg-primary docs-block">col-6</div>
</div>
</div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-14">Date</label>
- </div>
- <div class="col-9">
- <input class="form-input" id="input-example-14" type="date" value="2016-12-31">
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-15">Color</label>
- </div>
- <div class="col-9">
- <input class="form-input" id="input-example-15" type="color" value="#5755d9">
- </div>
- </div>
- <div class="form-group">
- <div class="col-3">
- <label class="form-label" for="input-example-16">File</label>
- </div>
- <div class="col-9">
- <input class="form-input" id="input-example-16" type="file">
- </div>
- </div>
- </form>
- </div>
- </div>
- <h4 class="s-subtitle" id="forms-input-groups"><a class="anchor" href="#forms-input-groups" aria-hidden="true">#</a>Input groups</h4>
- <div class="columns">
- <div class="column col-xs-12">
- <div class="input-group">
- <input class="form-input input-sm" type="text" placeholder="username">
- <select class="form-select select-sm">
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="input-group"><span class="input-group-addon addon-sm">slack.com/</span>
- <input class="form-input input-sm" type="text" placeholder="site name">
- <button class="btn btn-primary input-group-btn btn-sm">Submit</button>
- </div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-xs-12">
- <div class="input-group">
- <input class="form-input" type="text" placeholder="username">
- <select class="form-select">
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="input-group"><span class="input-group-addon">slack.com/</span>
- <input class="form-input" type="text" placeholder="site name">
- <button class="btn btn-primary input-group-btn">Submit</button>
- </div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-xs-12">
- <div class="input-group">
- <label class="form-switch">
- <input type="checkbox"><i class="form-icon"></i>
- </label>
- <input class="form-input" type="text" placeholder="name">
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="input-group">
- <label class="form-checkbox">
- <input type="checkbox"><i class="form-icon"></i>
- </label>
- <input class="form-input" type="text" placeholder="name">
- </div>
- </div>
- </div>
- <div class="columns">
- <div class="column col-xs-12">
- <div class="input-group">
- <input class="form-input input-lg" type="text" placeholder="username">
- <select class="form-select select-lg">
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
- </div>
- <div class="column col-xs-12">
- <div class="input-group"><span class="input-group-addon addon-lg">slack.com/</span>
- <input class="form-input input-lg" type="text" placeholder="site name">
- <button class="btn btn-primary input-group-btn btn-lg">Submit</button>
</div>
</div>
- </div>
- <p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container.
- And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.
- </p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- normal input group --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-comment">&lt;!-- large input group --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon addon-lg"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input input-lg"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-comment">&lt;!-- normal input group with button --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary input-group-btn"</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="forms-validation"><a class="anchor" href="#forms-validation" aria-hidden="true">#</a>Form validation styles</h4>
- <p>To use form validation styles, you can either add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements.
- Use the <code>form-input-hint</code> class to provide form validation success and error messages.
- </p>
- <div class="columns">
- <div class="column col-9 col-sm-12">
- <fieldset>
- <legend>Input</legend>
- <div class="form-group">
- <label class="form-label" for="input-example-17">Name</label>
- <input class="form-input is-success" id="input-example-17" type="text" placeholder="Name">
- <p class="form-input-hint">The name is valid.</p>
- </div>
- <div class="form-group has-error">
- <label class="form-label" for="input-example-18">Password</label>
- <input class="form-input" id="input-example-18" type="password" placeholder="Password">
- <p class="form-input-hint">Passwords must have at least 8 characters.</p>
- </div>
- <div class="form-group">
- <label class="form-label" for="input-example-21">Email</label>
- <input class="form-input" id="input-example-21" type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$">
- <p class="form-input-hint">The Email address is unavailable.</p>
- </div>
- </fieldset>
- <fieldset>
- <legend>Select</legend>
- <div class="form-group">
- <select class="form-select is-error">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- <p class="form-input-hint">The option is invalid.</p>
- </div>
- <div class="form-group has-success">
- <select class="form-select">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- <p class="form-input-hint">The option is available.</p>
- </div>
- </fieldset>
- <fieldset>
- <legend>Checkbox, Radio and Switch (Error state only)</legend>
- <div class="form-group">
- <label class="form-checkbox is-error">
- <input type="checkbox" checked=""><i class="form-icon"></i> I'm not a robot.
- </label>
- </div>
- <div class="form-group has-error">
- <label class="form-radio">
- <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
- </label>
- <label class="form-radio">
- <input type="radio" name="gender"><i class="form-icon"></i> Female
- </label>
- </div>
- <div class="form-group">
- <label class="form-switch is-error">
- <input type="checkbox" checked=""><i class="form-icon"></i> Send me emails with news and tips
- </label>
- </div>
- </fieldset>
+ <div class="column col-6">
+ <div class="bg-gray docs-block">col-6</div>
</div>
</div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">form</span>&gt;</span>
- <span class="hljs-comment">&lt;!-- form validation class: has-success --&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group has-success"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>&gt;</span>The name is invalid.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
- <span class="hljs-comment">&lt;!-- form validation class: is-success --&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-1"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input is-success"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-1"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"..."</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>&gt;</span>The name is invalid.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
- <span class="hljs-comment">&lt;!-- form validation example for checkbox, radio and switch --&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox is-error"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Remember me
- <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="forms-disabled"><a class="anchor" href="#forms-disabled" aria-hidden="true">#</a>Form disabled styles</h4>
- <p>
- Add the <code>disabled</code> attribute to the element or &lt;fieldset&gt; for a disabled form components style.</p>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <form action="#forms">
- <fieldset disabled="">
- <div class="form-group">
- <label class="form-label" for="input-example-19">Name</label>
- <input class="form-input" id="input-example-19" type="text" placeholder="Name">
- </div>
- <div class="form-group">
- <label class="form-label">Gender</label>
- <label class="form-radio">
- <input type="radio" name="gender" disabled=""><i class="form-icon"></i> Male
- </label>
- <label class="form-radio">
- <input type="radio" name="gender" disabled=""><i class="form-icon"></i> Female
- </label>
- </div>
- <div class="form-group">
- <select class="form-select" disabled="">
- <option>Choose an option</option>
- <option>Slack</option>
- <option>Skype</option>
- <option>Hipchat</option>
- </select>
- </div>
- <div class="form-group">
- <label class="form-switch">
- <input type="checkbox" disabled=""><i class="form-icon"></i> Send me emails with news and tips
- </label>
- </div>
- <div class="form-group">
- <label class="form-label" for="input-example-20">Message</label>
- <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled=""></textarea>
- </div>
- <div class="form-group">
- <label class="form-checkbox">
- <input type="checkbox" disabled=""><i class="form-icon"></i> Remember me
- </label>
- </div>
- </fieldset>
- </form>
- </div>
- </div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"#forms"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">disabled</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-19"</span>&gt;</span>Name<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-19"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Name"</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>&gt;</span>Gender<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">disabled</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Male
- <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">disabled</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Female
- <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span> <span class="hljs-attr">disabled</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Choose an option<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Slack<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Skype<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>Hipchat<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Send me emails with news and tips
- <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- grid nesting example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"input-example-20"</span>&gt;</span>Message<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"input-example-20"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Remember me
- <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
- <span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span></code></pre>
- </div>
- <div class="container" id="icons">
- <h3 class="s-title"><a class="anchor" href="#icons" aria-hidden="true">#</a>Icons</h3>
- </div>
- <div class="container" id="labels">
- <h3 class="s-title"><a class="anchor" href="#labels" aria-hidden="true">#</a>Labels</h3>
- <p>Labels are formatted text tags for highlighted, informative information.</p>
- <div class="columns">
- <div class="column"><span class="label mr-1">default label</span><span class="label label-primary mr-1">primary label</span><span class="label label-secondary mr-1">secondary label</span><span class="label label-success mr-1">success label</span><span class="label label-warning mr-1">warning label</span><span class="label label-error">error label</span></div>
- </div>
- <p>Add the <code>label</code> class to &lt;span&gt; or &lt;small&gt; elements.
- You can add another class <code>label-primary</code>, <code>label-secondary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for colored labels.
- </p>
- <div class="columns">
- <div class="column"><span class="label label-rounded mr-1">default label</span><span class="label label-rounded label-primary">primary label</span></div>
- </div>
- <p>Add the <code>label-rounded</code> class to have rounded labels.</p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- normal labels --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>&gt;</span>default label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>&gt;</span>primary label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-
-<span class="hljs-comment">&lt;!-- rounded labels --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-rounded label-primary"</span>&gt;</span>primary label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- <div class="container" id="code">
- <h3 class="s-title"><a class="anchor" href="#code" aria-hidden="true">#</a>Code</h3>
- <p>Code is used for styling inline and multiline code snippets.</p>
- <p>For inline code, you can use the &lt;code&gt; element.
- For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it.
- The <code>data-lang</code> ibute is rendered as the language name in the top right.
- </p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- code snippets --&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>
- Submit
-<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-</code></pre>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"code"</span> <span class="hljs-attr">data-lang</span>=<span class="hljs-string">"HTML"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"com"</span>&gt;</span>&amp;lt;!-- code snippets --&amp;gt;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-&amp;lt;<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>&gt;</span>button<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"atn"</span>&gt;</span>class<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>=<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"atv"</span>&gt;</span>&amp;quot;btn&amp;quot;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>&amp;gt;
- Submit
-&amp;lt;<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tag"</span>&gt;</span>/button<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>&amp;gt;
-<span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span></code></pre>
+ <div class="container" id="responsive">
+ <h3 class="s-title"><a class="anchor" href="#responsive" aria-hidden="true">#</a>Responsive</h3>
</div>
- <div class="container" id="media">
- <h3 class="s-title"><a class="anchor" href="#media" aria-hidden="true">#</a>Media</h3>
- <p>Media includes responsive images, figures and video classes.</p>
- <h4 class="s-subtitle" id="media-images"><a class="anchor" href="#media-images" aria-hidden="true">#</a>Images</h4>
- <p>Add the <code>img-responsive</code> class to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
- <div class="columns">
- <div class="column col-12"><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS El Capitan Wallpaper"></div>
- </div>
- <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to &lt;img&gt; or &lt;video&gt; elements. The media will crop itself to fit inside the element (and you don't need another container).
- This feature can replace the classic background image trick. Microsoft Edge support <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">is shipped</a> with Build Number 16299+.
- </p>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <figure class="figure"><img class="img-fit-contain rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;">
- <figcaption class="figure-caption text-center">img-fit-contain</figcaption>
- </figure>
- </div>
- <div class="column col-6 col-xs-12">
- <figure class="figure"><img class="img-fit-cover rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper" style="background: #f8f9fa; height: 10rem; width: 100%;">
- <figcaption class="figure-caption text-center">img-fit-cover</figcaption>
- </figure>
- </div>
- </div>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-contain ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-fit-cover ..."</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
-</code></pre>
- <h4 class="s-subtitle" id="media-figure"><a class="anchor" href="#media-figure" aria-hidden="true">#</a>Figure</h4>
- <p>You can use the element &lt;figure&gt; for an image with a caption.
- Add the <code>figure</code> class to &lt;figure&gt; element.
- The images with the <code>img-responsive</code> class 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>
- <div class="columns">
- <div class="column col-12">
- <figure class="figure"><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
- <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
- </figure>
- </div>
- </div>
- <h4 class="s-subtitle" id="media-video"><a class="anchor" href="#media-video" aria-hidden="true">#</a>Video</h4>
- <p>For responsive video, add a container with the <code>video-responsive</code> class.
- Insert any YouTube, Youku or other iframe/embed video inside the container.
- The ratio is 16:9 by default.
- You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.
- </p>
- <div class="columns">
- <div class="column col-12">
- <div class="video-responsive">
- <iframe width="560" height="315" src="https://www.youtube.com/embed/7DbslbKsQSk" allowfullscreen=""></iframe>
- </div>
- </div>
- </div>
- <p>For responsive &lt;video&gt; elements, you can add the <code>video-responsive</code> class directly.</p>
- <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-responsive video-responsive-4-3"</span>&gt;</span>
- <span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"..."</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">allowfullscreen</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">video</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"video-responsive"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"..."</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">video</span>&gt;</span></code></pre>
+ <div class="container" id="navbar">
+ <h3 class="s-title"><a class="anchor" href="#navbar" aria-hidden="true">#</a>Navbar</h3>
</div>
</div>
</div>