diff options
Update buttons and forms docs to Pug templates
6 files changed, 1721 insertions, 102 deletions
| -rw-r--r-- | docs/elements.html | 941 | ||||
| -rw-r--r-- | docs/getting-started.html | 36 | ||||
| -rw-r--r-- | docs/src/contents/buttons.pug | 179 | ||||
| -rw-r--r-- | docs/src/contents/forms.pug | 626 | ||||
| -rw-r--r-- | docs/src/contents/tables.pug | 19 | ||||
| -rw-r--r-- | docs/src/contents/typography.pug | 22 |
diff --git a/docs/elements.html b/docs/elements.html index cf1c334..f971860 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -153,15 +153,17 @@ <h6>H6 Heading <small class="label">16px</small></h6> </div> </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-title">h1</span>></span>H1 Heading<span class="hljs-tag"></<span class="hljs-title">h1</span>></span> -<span class="hljs-tag"><<span class="hljs-title">h1</span>></span>H1 Heading <span class="hljs-tag"><<span class="hljs-title">small</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"label"</span>></span>40px<span class="hljs-tag"></<span class="hljs-title">small</span>></span><span class="hljs-tag"></<span class="hljs-title">h1</span>></span> -<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"h1"</span>></span>H1 Heading<span class="hljs-tag"></<span class="hljs-title">span</span>></span> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>H1 Heading<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> +<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>H1 Heading <span class="hljs-tag"><<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>></span>40px<span class="hljs-tag"></<span class="hljs-name">small</span>></span><span class="hljs-tag"></<span class="hljs-name">h1</span>></span> +<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"h1"</span>></span>H1 Heading<span class="hljs-tag"></<span class="hljs-name">span</span>></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. Praesent risus leo, dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> + <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"><<span class="hljs-title">p</span>></span>Lorem ipsum dolor sit amet, ...<span class="hljs-tag"></<span class="hljs-title">p</span>></span> -<span class="hljs-tag"><<span class="hljs-title">p</span>></span>...<span class="hljs-tag"></<span class="hljs-title">p</span>></span> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet, ...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> +<span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></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"> @@ -205,7 +207,7 @@ </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="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> @@ -215,9 +217,9 @@ <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"><<span class="hljs-title">p</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"zh-Hans"</span>></span>革命不是请客吃饭，不是做文章……<span class="hljs-tag"></<span class="hljs-title">p</span>></span> -<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"ja"</span>></span>祇園精舎の鐘の声、諸行無常の響きあり……<span class="hljs-tag"></<span class="hljs-title">p</span>></span> -<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"ko"</span>></span>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<span class="hljs-tag"></<span class="hljs-title">p</span>></span> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"zh-Hans"</span>></span>革命不是请客吃饭，不是做文章……<span class="hljs-tag"></<span class="hljs-name">p</span>></span> +<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ja"</span>></span>祇園精舎の鐘の声、諸行無常の響きあり……<span class="hljs-tag"></<span class="hljs-name">p</span>></span> +<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ko"</span>></span>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<span class="hljs-tag"></<span class="hljs-name">p</span>></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"> @@ -228,32 +230,34 @@ <del>祇園</del> <del>精舎</del>の鐘の声、諸行無常の響きあり。 </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"cjk"</span>></span><span class="hljs-tag"><<span class="hljs-title">u</span>></span>祇園<span class="hljs-tag"></<span class="hljs-title">u</span>></span><span class="hljs-tag"><<span class="hljs-title">u</span>></span>精舎<span class="hljs-tag"></<span class="hljs-title">u</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-title">p</span>></span> -<span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"cjk"</span>></span><span class="hljs-tag"><<span class="hljs-title">del</span>></span>祇園<span class="hljs-tag"></<span class="hljs-title">del</span>></span><span class="hljs-tag"><<span class="hljs-title">del</span>></span>精舎<span class="hljs-tag"></<span class="hljs-title">del</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-title">p</span>></span> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"cjk"</span>></span><span class="hljs-tag"><<span class="hljs-name">u</span>></span>祇園<span class="hljs-tag"></<span class="hljs-name">u</span>></span><span class="hljs-tag"><<span class="hljs-name">u</span>></span>精舎<span class="hljs-tag"></<span class="hljs-name">u</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-name">p</span>></span> +<span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"cjk"</span>></span><span class="hljs-tag"><<span class="hljs-name">del</span>></span>祇園<span class="hljs-tag"></<span class="hljs-name">del</span>></span><span class="hljs-tag"><<span class="hljs-name">del</span>></span>精舎<span class="hljs-tag"></<span class="hljs-name">del</span>></span>の鐘の声、諸行無常の響きあり。……<span class="hljs-tag"></<span class="hljs-name">p</span>></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> + <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><span class="hljs-value">: -apple-system, system-ui, BlinkMacSystemFont, <span class="hljs-string">"Segoe UI"</span>, Roboto, <span class="hljs-string">"Helvetica Neue"</span>, sans-serif;</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-value">: <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> +<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><span class="hljs-value">: -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> +<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><span class="hljs-value">: -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> +<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><span class="hljs-value">: -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;</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"><<span class="hljs-title">blockquote</span>></span> - <span class="hljs-tag"><<span class="hljs-title">p</span>></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"></<span class="hljs-title">p</span>></span> - <span class="hljs-tag"><<span class="hljs-title">cite</span>></span>- Bill Gates<span class="hljs-tag"></<span class="hljs-title">cite</span>></span> -<span class="hljs-tag"></<span class="hljs-title">blockquote</span>></span> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span> + <span class="hljs-tag"><<span class="hljs-name">p</span>></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"></<span class="hljs-name">p</span>></span> + <span class="hljs-tag"><<span class="hljs-name">cite</span>></span>- Bill Gates<span class="hljs-tag"></<span class="hljs-name">cite</span>></span> +<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></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"> @@ -295,23 +299,23 @@ </div> </div> <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- unordered list --></span> -<span class="hljs-tag"><<span class="hljs-title">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 1<span class="hljs-tag"></<span class="hljs-title">li</span>></span> - <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 2 - <span class="hljs-tag"><<span class="hljs-title">ul</span>></span> - <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 2.1<span class="hljs-tag"></<span class="hljs-title">li</span>></span> - <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 2.2<span class="hljs-tag"></<span class="hljs-title">li</span>></span> - <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 2.3<span class="hljs-tag"></<span class="hljs-title">li</span>></span> - <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-title">li</span>></span> - <span class="hljs-tag"><<span class="hljs-title">li</span>></span>list item 3<span class="hljs-tag"></<span class="hljs-title">li</span>></span> -<span class="hljs-tag"></<span class="hljs-title">ul</span>></span> +<span class="hljs-tag"><<span class="hljs-name">ul</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2 + <span class="hljs-tag"><<span class="hljs-name">ul</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2.1<span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2.2<span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 2.3<span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> + <span class="hljs-tag"></<span class="hljs-name">li</span>></span> + <span class="hljs-tag"><<span class="hljs-name">li</span>></span>list item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span> +<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> <span class="hljs-comment"><!-- description list --></span> -<span class="hljs-tag"><<span class="hljs-title">dl</span>></span> - <span class="hljs-tag"><<span class="hljs-title">dt</span>></span>description list term<span class="hljs-tag"></<span class="hljs-title">dt</span>></span> - <span class="hljs-tag"><<span class="hljs-title">dd</span>></span>description list description<span class="hljs-tag"></<span class="hljs-title">dd</span>></span> -<span class="hljs-tag"></<span class="hljs-title">dl</span>></span></code></pre> +<span class="hljs-tag"><<span class="hljs-name">dl</span>></span> + <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>description list term<span class="hljs-tag"></<span class="hljs-name">dt</span>></span> + <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>description list description<span class="hljs-tag"></<span class="hljs-name">dd</span>></span> +<span class="hljs-tag"></<span class="hljs-name">dl</span>></span></code></pre> </div> <div class="container"> <h3 class="s-title" id="tables"><a class="anchor" href="#tables" aria-hidden="true">#</a>Tables</h3> @@ -351,31 +355,858 @@ </table> </div> </div> - <p>Add the <code>table</code> class to any <table> element. The class will add padding, border and emphasized table header. Use the <code>table-striped</code> class to <table> to add zebra striped style. For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style. + <p>Add the <code>table</code> class to any <table> element. + The class will add padding, border and emphasized table header. + Use the <code>table-striped</code> class to <table> 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 <tr> element highlighted.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-title">table</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"table table-striped table-hover"</span>></span> - <span class="hljs-tag"><<span class="hljs-title">thead</span>></span> - <span class="hljs-tag"><<span class="hljs-title">tr</span>></span> - <span class="hljs-tag"><<span class="hljs-title">th</span>></span>name<span class="hljs-tag"></<span class="hljs-title">th</span>></span> - <span class="hljs-tag"><<span class="hljs-title">th</span>></span>genre<span class="hljs-tag"></<span class="hljs-title">th</span>></span> - <span class="hljs-tag"><<span class="hljs-title">th</span>></span>release date<span class="hljs-tag"></<span class="hljs-title">th</span>></span> - <span class="hljs-tag"></<span class="hljs-title">tr</span>></span> - <span class="hljs-tag"></<span class="hljs-title">thead</span>></span> - <span class="hljs-tag"><<span class="hljs-title">tbody</span>></span> - <span class="hljs-tag"><<span class="hljs-title">tr</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"active"</span>></span> - <span class="hljs-tag"><<span class="hljs-title">td</span>></span>The Shawshank Redemption<span class="hljs-tag"></<span class="hljs-title">td</span>></span> - <span class="hljs-tag"><<span class="hljs-title">td</span>></span>Crime, Drama<span class="hljs-tag"></<span class="hljs-title">td</span>></span> - <span class="hljs-tag"><<span class="hljs-title">td</span>></span>14 October 1994<span class="hljs-tag"></<span class="hljs-title">td</span>></span> - <span class="hljs-tag"></<span class="hljs-title">tr</span>></span> - <span class="hljs-tag"></<span class="hljs-title">tbody</span>></span> -<span class="hljs-tag"></<span class="hljs-title">table</span>></span></code></pre> + <p>Use the <code>active</code> class to make <tr> element highlighted.</p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"table table-striped table-hover"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">thead</span>></span> + <span class="hljs-tag"><<span class="hljs-name">tr</span>></span> + <span class="hljs-tag"><<span class="hljs-name">th</span>></span>name<span class="hljs-tag"></<span class="hljs-name">th</span>></span> + <span class="hljs-tag"><<span class="hljs-name">th</span>></span>genre<span class="hljs-tag"></<span class="hljs-name">th</span>></span> + <span class="hljs-tag"><<span class="hljs-name">th</span>></span>release date<span class="hljs-tag"></<span class="hljs-name">th</span>></span> + <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> + <span class="hljs-tag"></<span class="hljs-name">thead</span>></span> + <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span> + <span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">td</span>></span>The Shawshank Redemption<span class="hljs-tag"></<span class="hljs-name">td</span>></span> + <span class="hljs-tag"><<span class="hljs-name">td</span>></span>Crime, Drama<span class="hljs-tag"></<span class="hljs-name">td</span>></span> + <span class="hljs-tag"><<span class="hljs-name">td</span>></span>14 October 1994<span class="hljs-tag"></<span class="hljs-name">td</span>></span> + <span class="hljs-tag"></<span class="hljs-name">tr</span>></span> + <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span> +<span class="hljs-tag"></<span class="hljs-name">table</span>></span></code></pre> </div> <div class="container"> <h3 class="s-title" id="buttons"><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> + </div> + <p>Add the <code>btn</code> class to <a>, <input> or <button> elements for a default button. + There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. + </p> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>default button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>primary button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span>link button<span class="hljs-tag"></<span class="hljs-name">button</span>></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> + </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"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-success"</span>></span>success button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-error"</span>></span>error button<span class="hljs-tag"></<span class="hljs-name">button</span>></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> + </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"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-lg"</span>></span>large button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-sm"</span>></span>small button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-block"</span>></span>block button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-lg"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> large<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> normal<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-sm"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> small<span class="hljs-tag"></<span class="hljs-name">button</span>></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"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-action circle"</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-left"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></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> + </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> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- buttons with disabled state --></span> +<span class="hljs-tag"><<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>></span>disabled button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<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>></span>disabled button<span class="hljs-tag"></<span class="hljs-name">button</span>></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> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- buttons with loading state --></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn loading"</span>></span>button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary loading"</span>></span>primary button<span class="hljs-tag"></<span class="hljs-name">button</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group btn-group-block"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>first button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>second button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span>third button<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> </code></pre> </div> <div class="container"> <h3 class="s-title" id="forms"><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"><!-- form input control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<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>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<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>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form textarea control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<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>></span>Message<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form select control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-select"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Choose an option<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Slack<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Skype<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Hipchat<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"></<span class="hljs-name">select</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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> + </div> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form radio control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>></span>Gender<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Male + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span> + <span class="hljs-tag"><<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> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Female + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form switch control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Send me emails with news and tips + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><!-- form checkbox control --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Remember me + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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 <form> 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. + </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> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-horizontal"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-3 col-sm-12"</span>></span> + <span class="hljs-tag"><<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>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-9 col-sm-12"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-comment"><!-- form structure --></span> +<span class="hljs-tag"></<span class="hljs-name">form</span>></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> + <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> + </div> + <div class="columns"> + <div class="column col-4 col-xs-12"> + <label class="form-label label-lg">Label</label> + </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> + </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 <input> element. + And add the icon with <code>form-icon</code> class next to the <input>. + </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> + <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> + </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> + <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> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form input with Spectre icon --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-left"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon icon icon-check"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- form input with loading icon --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"has-icon-right"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon loading"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> +</code></pre> + <h4 class="s-subtitle" id="forms-input"><a class="anchor" href="#forms-input" aria-hidden="true">#</a>Input types</h4> + <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> + <div class="col-9"> + <input class="form-input" id="input-example-13" type="number" placeholder="00" value="66"> + </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"><!-- normal input group --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span> + <span class="hljs-tag"><<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>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + +<span class="hljs-comment"><!-- large input group --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon addon-lg"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span> + <span class="hljs-tag"><<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>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></span> + +<span class="hljs-comment"><!-- normal input group with button --></span> +<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group-addon"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary input-group-btn"</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">button</span>></span> +<span class="hljs-tag"></<span class="hljs-name">div</span>></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> + </div> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">form</span>></span> + <span class="hljs-comment"><!-- form validation class: has-success --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group has-success"</span>></span> + <span class="hljs-tag"><<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>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>></span>The name is invalid.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + + <span class="hljs-comment"><!-- form validation class: is-success --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<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>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input-hint"</span>></span>The name is invalid.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + + <span class="hljs-comment"><!-- form validation example for checkbox, radio and switch --></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox is-error"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Remember me + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> +<span class="hljs-tag"></<span class="hljs-name">form</span>></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 <fieldset> 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"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"#forms"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">disabled</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<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>></span>Name<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label"</span>></span>Gender<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Male + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-radio"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Female + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<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>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Choose an option<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Slack<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Skype<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"><<span class="hljs-name">option</span>></span>Hipchat<span class="hljs-tag"></<span class="hljs-name">option</span>></span> + <span class="hljs-tag"></<span class="hljs-name">select</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-switch"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Send me emails with news and tips + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<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>></span>Message<span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"><<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>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-group"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>></span> + <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">disabled</span>></span> + <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Remember me + <span class="hljs-tag"></<span class="hljs-name">label</span>></span> + <span class="hljs-tag"></<span class="hljs-name">div</span>></span> + <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span></code></pre> </div> <div class="container"> <h3 class="s-title" id="icons"><a class="anchor" href="#icons" aria-hidden="true">#</a>Icons</h3> diff --git a/docs/getting-started.html b/docs/getting-started.html index 0f3f1ff..4d9f7ee 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -142,15 +142,15 @@ <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p> <p><a class="btn btn-primary" href="https://github.com/picturepan2/spectre/releases" target="_blank">Download Spectre.css</a></p> <p>Include <code>spectre.css</code> located in <strong>/dist</strong> in your website or Web app <head>. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"spectre.min.css"</span>></span> -<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"spectre-exp.min.css"</span>></span> -<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"spectre-icons.min.css"</span>></span> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"spectre.min.css"</span>></span> +<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"spectre-exp.min.css"</span>></span> +<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"spectre-icons.min.css"</span>></span> </code></pre> <h4 class="s-subtitle" id="install-cdn"><a class="anchor" href="#install-cdn" aria-hidden="true">#</a>Install from CDN</h4> <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> or <a href="https://cdnjs.com/libraries/spectre.css" target="_blank">cdnjs</a> CDN to load compiled Spectre.css.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://unpkg.com/spectre.css/dist/spectre.min.css"</span>></span> -<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"</span>></span> -<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"</span>></span> + <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/spectre.css/dist/spectre.min.css"</span>></span> +<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"</span>></span> +<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"</span>></span> </code></pre> <h4 class="s-subtitle" id="install-npm"><a class="anchor" href="#install-npm" aria-hidden="true">#</a>Install with NPM</h4> <pre class="code" data-lang="Bash"><code>npm install spectre.css --save @@ -191,19 +191,19 @@ </ul> <pre class="code" data-lang="Sass"><code><span class="hljs-comment">// Example of project-name.scss</span> <span class="hljs-comment">// Define variables to override default ones</span> -<span class="hljs-variable">$primary-color</span><span class="hljs-value">: <span class="hljs-hexcolor">#2e5bec</span>;</span> -<span class="hljs-variable">$dark-color</span><span class="hljs-value">: <span class="hljs-hexcolor">#3e396b</span>;</span> +<span class="hljs-variable">$primary-color</span>: <span class="hljs-number">#2e5bec</span>; +<span class="hljs-variable">$dark-color</span>: <span class="hljs-number">#3e396b</span>; <span class="hljs-comment">// Import full Spectre source code</span> -<span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/spectre"</span>;</span> +@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/spectre"</span>; </code></pre> <p>Alternatively, you can create custom <code>_variables.scss</code> and import it to <code>project-name.scss</code>.</p> <pre class="code" data-lang="Sass"><code><span class="hljs-comment">// Example of project-name.scss</span> -<span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"variables"</span>;</span> +@<span class="hljs-keyword">import</span> <span class="hljs-string">"variables"</span>; <span class="hljs-comment">// Import only the needed components</span> -<span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/buttons"</span>;</span> -<span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/forms"</span>;</span> +@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/buttons"</span>; +@<span class="hljs-keyword">import</span> <span class="hljs-string">"node_modules/spectre.css/src/forms"</span>; </code></pre> <h4 class="s-subtitle" id="folders"><a class="anchor" href="#folders" aria-hidden="true">#</a>Folder structure</h4> <pre class="code"><code>spectre/ @@ -335,14 +335,14 @@ <li>@mixin button-variant(<code>$color</code>: $primary-color);</li> <li>@mixin button-outline-variant(<code>$color</code>: $primary-color);</li> </ul> - <pre class="code" data-lang="Sass"><code><!-- filled <span class="hljs-tag">button</span> with the success <span class="hljs-attribute">color</span> --> -<span class="hljs-class">.btn-success</span> { - <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> button-variant</span>(<span class="hljs-variable">$success-color</span>);</span> + <pre class="code" data-lang="Sass"><code><!-- filled <span class="hljs-selector-tag">button</span> with the success <span class="hljs-attribute">color</span> --> +<span class="hljs-selector-class">.btn-success</span> { + @<span class="hljs-keyword">include</span> button-variant(<span class="hljs-variable">$success-color</span>); } -<!-- outlined <span class="hljs-tag">button</span> with the success <span class="hljs-attribute">color</span> --> -<span class="hljs-class">.btn-outline-success</span> { - <span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> button-outline-variant</span>(<span class="hljs-variable">$success-color</span>);</span> +<!-- outlined <span class="hljs-selector-tag">button</span> with the success <span class="hljs-attribute">color</span> --> +<span class="hljs-selector-class">.btn-outline-success</span> { + @<span class="hljs-keyword">include</span> button-outline-variant(<span class="hljs-variable">$success-color</span>); } </code></pre> <h4 class="s-subtitle" id="variables-sizes"><a class="anchor" href="#variables-sizes" aria-hidden="true">#</a>Variables - Sizes</h4> diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug index e69de29..8f8dbb1 100644 --- a/docs/src/contents/buttons.pug +++ b/docs/src/contents/buttons.pug @@ -0,0 +1,179 @@ +p Buttons include simple button styles for actions in different types and sizes. + +.columns + .column.col-12 + button.btn default button + button.btn.btn-primary primary button + button.btn.btn-link link button + +p + | Add the #[code btn] class to #{'<a>'}, #{'<input>'} or #{'<button>'} elements for a default button. + | There are classes #[code btn-primary] and #[code btn-link] for predefined primary and link buttons. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <button class="btn">default button</button> + <button class="btn btn-primary">primary button</button> + <button class="btn btn-link">link button</button> + ++docs-subheading('buttons-colors', 'Button colors') + +.columns + .column.col-12 + button.btn.btn-success success button + button.btn.btn-error error button + +p + | Add the #[code btn-success] or #[code btn-error] 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 + | to create your own button color variants. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <button class="btn btn-success">success button</button> + <button class="btn btn-error">error button</button> + ++docs-subheading('buttons-sizes', 'Button sizes') + +.columns + .column.col-12 + button.btn.btn-primary.btn-lg + | large + i.icon.icon-arrow-down + button.btn.btn-primary.btn-lg large button + .column.col-12 + button.btn.btn-primary + | normal + i.icon.icon-arrow-down + button.btn.btn-primary normal button + .column.col-12 + button.btn.btn-primary.btn-sm + | small + i.icon.icon-arrow-down + button.btn.btn-primary.btn-sm small button + + +p + | Add the #[code btn-sm] or #[code btn-lg] class for small or large button size. + | Also, you can add the #[code btn-block] class for a full-width button. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <button class="btn btn-lg">large button</button> + <button class="btn btn-sm">small button</button> + + <button class="btn btn-block">block button</button> + + <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button> + <button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button> + <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button> + +p + | Please note that you could use the #[code btn-action] class for a square button, or add another #[code circle] class for a round button, which is often used as a Float Action Button (FAB). + +.columns + .column.col-xs-12 + button.btn.btn-action.btn-primary.btn-lg + i.icon.icon-menu + button.btn.btn-action.btn-primary + i.icon.icon-menu + button.btn.btn-action.btn-primary.btn-sm + i.icon.icon-menu + .column.col-xs-12 + button.btn.btn-action.btn-primary.btn-lg.circle + i.icon.icon-arrow-up + button.btn.btn-action.btn-primary.circle + i.icon.icon-arrow-up + button.btn.btn-action.btn-primary.btn-sm.circle + i.icon.icon-arrow-up + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button> + <button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button> + ++docs-subheading('buttons-states', 'Button states') + +p + | Add the #[code active] class for active button state style. + +.columns + .column.col-12 + button.btn.active default active + button.btn.btn-primary.active primary active + button.btn.btn-link.active link active + +p + | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style. + +.columns + .column.col-12 + button.btn.disabled(tabindex="-1") default disabled + button.btn.btn-primary(disabled="" tabindex="-1") primary disabled + button.btn.btn-link(disabled="" tabindex="-1") link disabled + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- buttons with disabled state --> + <button class="btn disabled" tabindex="-1">disabled button</button> + <button class="btn" disabled tabindex="-1">disabled button</button> + +p + | A button with the #[code loading] class can show loading indicator. + +.columns + .column.col-12 + button.btn.loading default button + button.btn.btn-primary.loading primary button + button.btn.btn-link.loading link button + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- buttons with loading state --> + <button class="btn loading">button</button> + <button class="btn btn-primary loading">primary button</button> + ++docs-subheading('buttons-groups', 'Button groups') + +.columns + .column.col-md-12 + .btn-group + button.btn first button + button.btn second button + button.btn third button + .column.col-md-12 + .btn-group.btn-group-block + button.btn.btn-primary first button + button.btn.btn-primary second button + button.btn.btn-primary third button +.columns + .column.col-md-12 + .btn-group + button.btn.btn-sm.active first button + button.btn.btn-sm second button + button.btn.btn-sm third button + .column.col-md-12 + .btn-group.btn-group-block + button.btn.btn-primary.btn-sm.active first button + button.btn.btn-primary.btn-sm second button + button.btn.btn-primary.btn-sm third button + +p + | If you want to use buttons as a group, add the #[code btn-group] class to the container. + | You can add the #[code btn-group-block] class for a full-width button group. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="btn-group btn-group-block"> + <button class="btn">first button</button> + <button class="btn">second button</button> + <button class="btn">third button</button> + </div>
\ No newline at end of file diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug index e69de29..bcfde1a 100644 --- a/docs/src/contents/forms.pug +++ b/docs/src/contents/forms.pug @@ -0,0 +1,626 @@ +p + | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. + +.columns + .column.col-6.col-xs-12 + .form-group + label.form-label(for="input-example-1") Name + input#input-example-1.form-input(type="text" placeholder="Name") + .form-group + label.form-label(for="input-example-2") Email + input#input-example-2.form-input(type="email" placeholder="Email") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form input control --> + <div class="form-group"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input" type="text" id="input-example-1" placeholder="Name"> + </div> + +.columns + .column.col-6.col-xs-12 + .form-group + label.form-label(for="input-example-3") Message + textarea#input-example-3.form-input(placeholder="Textarea" rows="3") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form textarea control --> + <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> + +.columns + .column.col-6.col-xs-12 + .form-group + select.form-select + option Choose an option + option Slack + option Skype + option Hipchat + .form-group + select.form-select(multiple="") + option Choose an option + option Slack + option Skype + option Hipchat + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form select control --> + <div class="form-group"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + +.columns + .column.col-6.col-xs-12 + form + .form-group + label.form-label Gender + label.form-radio + input(type="radio" name="gender" checked="") + i.form-icon + | Male + label.form-radio + input(type="radio" name="gender") + i.form-icon + | Female + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form radio control --> + <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> + +.columns + .column.col-6.col-xs-12 + .form-group + label.form-switch + input(type="checkbox") + i.form-icon + | Send me emails with news and tips + .form-group + label.form-switch + input(type="checkbox" checked="") + i.form-icon + | Send me emails with news and tips + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form switch control --> + <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> + +.columns + .column.col-6.col-xs-12 + .form-group + label.form-checkbox + input(type="checkbox") + i.form-icon + | Remember me + .form-group + label.form-checkbox + input(type="checkbox" checked="") + i.form-icon + | Remember me + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form checkbox control --> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox"> + <i class="form-icon"></i> Remember me + </label> + </div> + +p + | You can use #[code :indeterminate] pseudo class for indeterminate state of checkboxes. + ++docs-subheading('forms-horizontal', 'Horizontal forms') + +p + | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'<form>'} container. + | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout. + +.columns + .column.col-9.col-sm-12 + form.form-horizontal(action="#forms") + .form-group + .col-3.col-sm-12 + label.form-label(for="input-example-4") Name + .col-9.col-sm-12 + input#input-example-4.form-input(type="text" placeholder="Name") + .form-group + .col-3.col-sm-12 + label.form-label(for="input-example-5") Email + .col-9.col-sm-12 + input#input-example-5.form-input(type="email" placeholder="Email") + .form-group + .col-3.col-sm-12 + label.form-label Gender + .col-9.col-sm-12 + label.form-radio + input(type="radio" name="gender") + i.form-icon + | Male + label.form-radio + input(type="radio" name="gender" checked="") + i.form-icon + | Female + .form-group + .col-3.col-sm-12 + label.form-label Source + .col-9.col-sm-12 + select.form-select(multiple="") + option Slack + option Skype + option Hipchat + .form-group + .col-9.col-sm-12.col-ml-auto + label.form-switch + input(type="checkbox") + i.form-icon + | Send me emails with news and tips + .form-group + .col-3.col-sm-12 + label.form-label(for="input-example-6") Message + .col-9.col-sm-12 + textarea#input-example-6.form-input(placeholder="Textarea" rows="3") + .form-group + .col-9.col-sm-12.col-ml-auto + label.form-checkbox + input(type="checkbox") + i.form-icon + | Remember me + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <form class="form-horizontal"> + <div class="form-group"> + <div class="col-3 col-sm-12"> + <label class="form-label" for="input-example-1">Name</label> + </div> + <div class="col-9 col-sm-12"> + <input class="form-input" type="text" id="input-example-1" placeholder="Name"> + </div> + </div> + <!-- form structure --> + </form> + ++docs-subheading('forms-sizes', 'Form sizes') + +p + | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements. + +.columns + .column.col-4.col-xs-12 + label.form-label.label-sm Label + .column.col-4.col-xs-12 + input.form-input.input-sm(type="text" placeholder="Name") + .column.col-4.col-xs-12 + select.form-select.select-sm + option Choose an option + option Slack + option Skype + option Hipchat +.columns + .column.col-4.col-xs-12 + label.form-label.label-lg Label + .column.col-4.col-xs-12 + input.form-input.input-lg(type="text" placeholder="Name") + .column.col-4.col-xs-12 + select.form-select.select-lg + option Choose an option + option Slack + option Skype + option Hipchat + +p + | You can add the #[code input-sm]/#[code input-lg] classes to the input-checkbox, input-radio and input-switch to have different sizes. + ++docs-subheading('forms-icons', 'Form icons') + +p + | Spectre Form components has + a(href="#icons") Spectre Icons + | support. +p + | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element. + | And add the icon with #[code form-icon] class next to the #{'<input>'}. + +.columns + .column.col-4.col-xs-12 + .has-icon-left + input.form-input.input-sm(type="text" placeholder="Name") + i.form-icon.icon.icon-arrow-right + .column.col-4.col-xs-12 + .has-icon-left.tooltip(data-tooltip="Lorem ipsum dolor sit amet") + input.form-input(type="text" placeholder="Name") + i.form-icon.icon.icon-arrow-right + .column.col-4.col-xs-12 + .has-icon-left + input.form-input.input-lg(type="text" placeholder="Name") + i.form-icon.icon.icon-arrow-right +.columns + .column.col-4.col-xs-12 + .has-icon-right + input.form-input.input-sm(type="text" placeholder="Name") + i.form-icon.icon.icon-check + .column.col-4.col-xs-12 + .has-icon-right + input.form-input(type="text" placeholder="Name") + i.form-icon.icon.icon-check + .column.col-4.col-xs-12 + .has-icon-right + input.form-input.input-lg(type="text" placeholder="Name") + i.form-icon.icon.icon-check + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form input with Spectre icon --> + <div class="has-icon-left"> + <input type="text" class="form-input" placeholder="..."> + <i class="form-icon icon icon-check"></i> + </div> + +p + | You can use the #[code loading] class for loading or posting state. + +.columns + .column.col-4.col-xs-12 + .has-icon-right + input.form-input.input-sm(type="text" placeholder="Name") + i.form-icon.loading + .column.col-4.col-xs-12 + .has-icon-right + input.form-input(type="text" placeholder="Name") + i.form-icon.loading + .column.col-4.col-xs-12 + .has-icon-right + input.form-input.input-lg(type="text" placeholder="Name") + i.form-icon.loading + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form input with loading icon --> + <div class="has-icon-right"> + <input type="text" class="form-input" placeholder="..."> + <i class="form-icon loading"></i> + </div> + ++docs-subheading('forms-input', 'Input types') + +.columns + .column.col-9.col-sm-12 + form.form-horizontal(action="#forms") + .form-group + .col-3 + label.form-label(for="input-example-8") Email + .col-9 + input#input-example-8.form-input(type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$") + .form-group + .col-3 + label.form-label(for="input-example-9") URL + .col-9 + input#input-example-9.form-input(type="url" placeholder="URL" value="https://github.com/picturepan2/spectre") + .form-group + .col-3 + label.form-label(for="input-example-10") Search + .col-9 + input#input-example-10.form-input(type="search" placeholder="Search") + .form-group + .col-3 + label.form-label(for="input-example-11") Tel + .col-9 + input#input-example-11.form-input(type="tel" placeholder="Tel" value="1-(888)-888-8888") + .form-group + .col-3 + label.form-label(for="input-example-12") Password + .col-9 + input#input-example-12.form-input(type="password" placeholder="Password" value="123456789") + .form-group + .col-3 + label.form-label(for="input-example-13") Number + .col-9 + input#input-example-13.form-input(type="number" placeholder="00" value="66") + .form-group + .col-3 + label.form-label(for="input-example-14") Date + .col-9 + input#input-example-14.form-input(type="date" value="2016-12-31") + .form-group + .col-3 + label.form-label(for="input-example-15") Color + .col-9 + input#input-example-15.form-input(type="color" value="#5755d9") + .form-group + .col-3 + label.form-label(for="input-example-16") File + .col-9 + input#input-example-16.form-input(type="file") + ++docs-subheading('forms-input-groups', 'Input groups') + +.columns + .column.col-xs-12 + .input-group + input.form-input.input-sm(type="text" placeholder="username") + select.form-select.select-sm + option Slack + option Skype + option Hipchat + .column.col-xs-12 + .input-group + span.input-group-addon.addon-sm slack.com/ + input.form-input.input-sm(type="text" placeholder="site name") + button.btn.btn-primary.input-group-btn.btn-sm Submit +.columns + .column.col-xs-12 + .input-group + input.form-input(type="text" placeholder="username") + select.form-select + option Slack + option Skype + option Hipchat + .column.col-xs-12 + .input-group + span.input-group-addon slack.com/ + input.form-input(type="text" placeholder="site name") + button.btn.btn-primary.input-group-btn Submit +.columns + .column.col-xs-12 + .input-group + label.form-switch + input(type="checkbox") + i.form-icon + input.form-input(type="text" placeholder="name") + .column.col-xs-12 + .input-group + label.form-checkbox + input(type="checkbox") + i.form-icon + input.form-input(type="text" placeholder="name") +.columns + .column.col-xs-12 + .input-group + input.form-input.input-lg(type="text" placeholder="username") + select.form-select.select-lg + option Slack + option Skype + option Hipchat + .column.col-xs-12 + .input-group + span.input-group-addon.addon-lg slack.com/ + input.form-input.input-lg(type="text" placeholder="site name") + button.btn.btn-primary.input-group-btn.btn-lg Submit + +p + | If you want to attach text and button along with an input, add the #[code input-group] class to the input container. + | And add the #[code input-group-addon] class to the text element and #[code input-group-btn] to the button element. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- normal input group --> + <div class="input-group"> + <span class="input-group-addon">...</span> + <input type="text" class="form-input" placeholder="..."> + </div> + + <!-- large input group --> + <div class="input-group"> + <span class="input-group-addon addon-lg">...</span> + <input type="text" class="form-input input-lg" placeholder="..."> + </div> + + <!-- normal input group with button --> + <div class="input-group"> + <span class="input-group-addon">...</span> + <input type="text" class="form-input" placeholder="..."> + <button class="btn btn-primary input-group-btn">Submit</button> + </div> + ++docs-subheading('forms-validation', 'Form validation styles') + +p + | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements. + | Use the #[code form-input-hint] class to provide form validation success and error messages. + +.columns + .column.col-9.col-sm-12 + fieldset + legend Input + .form-group + label.form-label(for="input-example-17") Name + input#input-example-17.form-input.is-success(type="text" placeholder="Name") + p.form-input-hint The name is valid. + .form-group.has-error + label.form-label(for="input-example-18") Password + input#input-example-18.form-input(type="password" placeholder="Password") + p.form-input-hint Passwords must have at least 8 characters. + .form-group + label.form-label(for="input-example-21") Email + input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$") + p.form-input-hint The Email address is unavailable. + fieldset + legend Select + .form-group + select.form-select.is-error + option Choose an option + option Slack + option Skype + option Hipchat + p.form-input-hint The option is invalid. + .form-group.has-success + select.form-select + option Choose an option + option Slack + option Skype + option Hipchat + p.form-input-hint The option is available. + fieldset + legend Checkbox, Radio and Switch (Error state only) + .form-group + label.form-checkbox.is-error + input(type="checkbox" checked="") + i.form-icon + | I'm not a robot. + .form-group.has-error + label.form-radio + input(type="radio" name="gender" checked="") + i.form-icon + | Male + label.form-radio + input(type="radio" name="gender") + i.form-icon + | Female + .form-group + label.form-switch.is-error + input(type="checkbox" checked="") + i.form-icon + | Send me emails with news and tips + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <form> + <!-- form validation class: has-success --> + <div class="form-group has-success"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input" type="text" id="input-example-1" placeholder="..."> + <p class="form-input-hint">The name is invalid.</p> + </div> + + <!-- form validation class: is-success --> + <div class="form-group"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input is-success" type="text" id="input-example-1" placeholder="..."> + <p class="form-input-hint">The name is invalid.</p> + </div> + + <!-- form validation example for checkbox, radio and switch --> + <div class="form-group"> + <label class="form-checkbox is-error"> + <input type="checkbox"> + <i class="form-icon"></i> Remember me + </label> + </div> + </form> + ++docs-subheading('forms-disabled', 'Form disabled styles') + +p + | Add the #[code disabled] attribute to the element or #{'<fieldset>'} for a disabled form components style. + +.columns + .column.col-6.col-xs-12 + form(action="#forms") + fieldset(disabled="") + .form-group + label.form-label(for="input-example-19") Name + input#input-example-19.form-input(type="text" placeholder="Name") + .form-group + label.form-label Gender + label.form-radio + input(type="radio" name="gender" disabled="") + i.form-icon + | Male + label.form-radio + input(type="radio" name="gender" disabled="") + i.form-icon + | Female + .form-group + select.form-select(disabled="") + option Choose an option + option Slack + option Skype + option Hipchat + .form-group + label.form-switch + input(type="checkbox" disabled="") + i.form-icon + | Send me emails with news and tips + .form-group + label.form-label(for="input-example-20") Message + textarea#input-example-20.form-input(placeholder="Textarea" rows="3" disabled="") + .form-group + label.form-checkbox + input(type="checkbox" disabled="") + i.form-icon + | Remember me + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <form action="#forms"> + <fieldset disabled> + <div class="form-group"> + <label class="form-label" for="input-example-19">Name</label> + <input class="form-input" type="text" id="input-example-19" 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>
\ No newline at end of file diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug index a66aa34..64e4ffd 100644 --- a/docs/src/contents/tables.pug +++ b/docs/src/contents/tables.pug @@ -27,21 +27,12 @@ p Tables include default styles for tables and data sets. td 22 September 1995 p - | Add the - code table - | class to any - = '<table>' - | element. The class will add padding, border and emphasized table header. Use the - code table-striped - | class to - = '<table>' - | to add zebra striped style. For hoverable table rows, you can add the - code table-hover - | class to enable hover style. + | Add the #[code table] class to any #{'<table>'} element. + | The class will add padding, border and emphasized table header. + | Use the #[code table-striped] class to #{'<table>'} to add zebra striped style. + | For hoverable table rows, you can add the #[code table-hover] class to enable hover style. p - | Use the - code active - | class to make <tr> element highlighted. + | Use the #[code active] class to make #{'<tr>'} element highlighted. pre.code(data-lang='HTML') code diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug index 47b980a..28ffc17 100644 --- a/docs/src/contents/typography.pug +++ b/docs/src/contents/typography.pug @@ -40,9 +40,8 @@ pre.code(data-lang='HTML') +docs-subheading('typography-paragraphs', 'Paragraphs') p - | Lorem ipsum dolor sit amet, consectetur - a(href='#typography') adipiscing elit. Praesent risus leo, dictum in vehicula sit amet - | , feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. + | Lorem ipsum dolor sit amet, consectetur #[a(href='#typography') adipiscing elit]. + | Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. 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. @@ -127,7 +126,7 @@ p.h5 small(lang='zh-Hans') 你好 | , small(lang='ja') こんにちは - | , + | , small(lang='ko') 안녕하세요 p.h6 Chinese (Simplified) @@ -142,9 +141,7 @@ p.h6 Korean p(lang='ko') | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다. p - | Use the - code lang - | attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. + | Use the #[code lang] attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. pre.code(data-lang='HTML') code @@ -154,11 +151,7 @@ pre.code(data-lang='HTML') <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p> p - | And you can use the - code cjk - | class or the - code lang - | attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability. + | And you can use the #[code cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability. p(lang='ja') u 祇園 @@ -178,9 +171,8 @@ pre.code(data-lang='HTML') +docs-subheading('typography-fonts', 'Fonts') p - | Spectre sets the most common and best - code font-family - | for each OS with fallback support in old systems. There are also fonts targeted East Asian typography. + | Spectre sets the most common and best #[code font-family] for each OS with fallback support in old systems. + | There are also fonts targeted East Asian typography. pre.code code |