Summary Files Commits Branches @commit @diff @stats
path: root / docs / elements.html
diff options
context:
space:
mode:
Commitc9e625c9dd8f1628c58b10bb165961eae068002f (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2017-08-15 16:30:05 +0800
Committer
 GitHub <noreply@github.com>
2017-08-15 16:30:05 +0800
Files9031e1df36c23e49deecad79df2a272b0d076270 /docs/elements.html
Spectre-Dark-Gruvbox-c9e625c9dd8f1628c58b10bb165961eae068002f.tar
Spectre-Dark-Gruvbox-c9e625c9dd8f1628c58b10bb165961eae068002f.tar.gz
Spectre-Dark-Gruvbox-c9e625c9dd8f1628c58b10bb165961eae068002f.zip
Parent846353cb40512404c5b8d27084a6fbe7b4a47d23 (diff)
Parentd6b5a13424cb56db116483f79d6253205e26757c (diff)
Merge pull request #249 from picturepan2/0.2.15 v0.2.15
0.2.15
1 files changed, 530 insertions, 303 deletions
-rw-r--r--docs/elements.html833
diff --git a/docs/elements.html b/docs/elements.html
index c672613..3994590 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -6,111 +6,296 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="https://github.com/picturepan2/" />
- <title>Elements - Spectre.css</title>
+ <title>Elements - Spectre.css CSS Framework</title>
<link rel="stylesheet" href="dist/spectre.css" />
<link rel="stylesheet" href="dist/spectre-icons.css" />
<link rel="stylesheet" href="css/docs.css" />
</head>
<body>
- <section class="section section-header bg-gray">
- <section class="grid-header container grid-960">
- <nav class="navbar">
- <section class="navbar-section">
- <a href="#sidebar" class="btn btn-lg btn-link btn-action show-sm"><i class="icon icon-menu"></i></a>
- <a href="index.html" class="navbar-brand mr-10">Spectre.css</a>
- <a href="index.html" class="btn btn-link">Docs</a>
- </section>
- <section class="navbar-section">
+ <div class="s-container container">
+ <div class="columns">
+ <div class="s-brand">
+ <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework">
+ <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+ <h2>Spectre.css</h2>
+ </a>
+ <div class="menu-btn">
+ <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
+ </div>
+ <div class="float-btn">
<a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
- </section>
- </nav>
- </section>
- </section>
-
- <section class="container grid-960">
- <section class="columns">
- <div id="sidebar" class="docs-sidebar column col-3 col-sm-12">
- <ul class="docs-nav nav nav-vertical">
- <li class="nav-item">
- <a href="index.html#introduction">Getting started</a>
- </li>
- <li class="nav-item active">
- <a href="elements.html">Elements</a>
- <ul class="nav">
- <li class="nav-item">
- <a href="elements.html#typography">Typography</a>
- </li>
- <li class="nav-item">
- <a href="elements.html#tables">Tables</a>
- </li>
- <li class="nav-item">
- <a href="elements.html#buttons">Buttons</a>
- </li>
- <li class="nav-item">
- <a href="elements.html#forms">Forms</a>
- </li>
- <li class="nav-item">
- <a href="elements.html#icons">Icons</a>
- </li>
- <li class="nav-item">
- <a href="elements.html#labels">Labels</a>
- </li>
- <li class="nav-item">
- <a href="elements.html#codes">Codes</a>
- </li>
- <li class="nav-item">
- <a href="elements.html#media">Media</a>
- </li>
- </ul>
- </li>
- <li class="nav-item">
- <a href="layout.html">Layout</a>
- </li>
- <li class="nav-item">
- <a href="components.html">Components</a>
- </li>
- <li class="nav-item">
- <a href="utilities.html">Utilities</a>
- </li>
- <li class="nav-item">
- <a href="experimentals.html">Experimentals</a>
- </li>
- </ul>
+ </div>
+ </div>
+ <div id="sidebar" class="s-sidebar">
+ <div class="s-nav">
+ <div class="accordion">
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden />
+ <label class="accordion-header hand" for="docs-accordion-1">
+ Getting started
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="getting-started.html#introduction">Introduction</a>
+ </li>
+ <li class="menu-item">
+ <a href="getting-started.html#installation">Installation</a>
+ </li>
+ <li class="menu-item">
+ <a href="getting-started.html#compiling">Custom version</a>
+ </li>
+ <li class="menu-item">
+ <a href="getting-started.html#browsers">Browser support</a>
+ </li>
+ <li class="menu-item">
+ <a href="getting-started.html#whatsnew">What's new</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked />
+ <label class="accordion-header hand" for="docs-accordion-2">
+ Elements
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="elements.html#typography">Typography</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#tables">Tables</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#buttons">Buttons</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#forms">Forms</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#icons">Icons</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#labels">Labels</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#codes">Codes</a>
+ </li>
+ <li class="menu-item">
+ <a href="elements.html#media">Media</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
+ <label class="accordion-header hand" for="docs-accordion-3">
+ Layout
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="layout.html#grid">Flexbox grid</a>
+ </li>
+ <li class="menu-item">
+ <a href="layout.html#responsive">Responsive</a>
+ </li>
+ <li class="menu-item">
+ <a href="layout.html#navbar">Navbar</a>
+ </li>
+ <li class="menu-item">
+ <a href="layout.html#panels">Panels</a>
+ </li>
+ <li class="menu-item">
+ <a href="layout.html#empty">Empty states</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden />
+ <label class="accordion-header hand" for="docs-accordion-4">
+ Components
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="components.html#accordions">Accordions</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#autocomplete">Autocomplete</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#avatars">Avatars</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#badges">Badges</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#bars">Bars</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#breadcrumbs">Breadcrumbs</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#cards">Cards</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#chips">Chips</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#menus">Menus</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#modals">Modals</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#navs">Navs</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#pagination">Pagination</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#popovers">Popovers</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#steps">Steps</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#tabs">Tabs</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#tiles">Tiles</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#toasts">Toasts</a>
+ </li>
+ <li class="menu-item">
+ <a href="components.html#tooltips">Tooltips</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden />
+ <label class="accordion-header hand" for="docs-accordion-5">
+ Utilities
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="utilities.html#colors">Colors</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#display">Display</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#divider">Divider</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#loading">Loading</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#position">Position</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#shapes">Shapes</a>
+ </li>
+ <li class="menu-item">
+ <a href="utilities.html#text">Text</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="accordion-item">
+ <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden />
+ <label class="accordion-header hand" for="docs-accordion-6">
+ Experimentals
+ </label>
+ <div class="accordion-body">
+ <ul class="menu menu-nav">
+ <li class="menu-item">
+ <a href="experimentals.html#calendars">Calendars</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#carousels">Carousels</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#comparison">Comparison sliders</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#filters">Filters</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#meters">Meters</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#parallax">Parallax</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#progress">Progress</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#sliders">Sliders</a>
+ </li>
+ <li class="menu-item">
+ <a href="experimentals.html#timelines">Timelines</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
<a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
- <div class="docs-content column col-9 col-sm-12">
- <section id="typography" class="container">
- <header class="text-center"><h3><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3></header>
- <section class="notes">
- <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p>
- </section>
- <header class="text-center"><h4>Headings</h4></header>
- <section class="notes">
- <h1>H1 Title <small class="label">5rem</small></h1>
- <h2>H2 Title <small class="label">4rem</small></h2>
- <h3>H3 Title <span class="label">3rem</span></h3>
- <h4>H4 Title <span class="label">2.4rem</span></h4>
- <h5>H5 Title <span class="label">2rem</span></h5>
- <h6>H6 Title <span class="label">1.6rem</span></h6>
- </section>
+ <div id="content" class="s-content">
+ <div id="typography" class="container">
+ <h3 class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3>
+ <div class="docs-note">
+ <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p>
+ </div>
+ <h4 class="s-subtitle">Headings</h4>
+ <div class="columns">
+ <div class="column col-12">
+ <h1>H1 Heading <small class="label">40px</small></h1>
+ </div>
+ <div class="column col-12">
+ <h2>H2 Heading <small class="label">32px</small></h2>
+ </div>
+ <div class="column col-12">
+ <h3>H3 Heading <small class="label">28px</small></h3>
+ </div>
+ <div class="column col-12">
+ <h4>H4 Heading <small class="label">24px</small></h4>
+ </div>
+ <div class="column col-12">
+ <h5>H5 Heading <small class="label">20px</small></h5>
+ </div>
+ <div class="column col-12">
+ <h6>H6 Heading <small class="label">16px</small></h6>
+ </div>
+ </div>
<!-- headings example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">h1</span>&gt;H1 Title&lt;<span class="tag">/h1</span>&gt;
-&lt;<span class="tag">h2</span>&gt;H2 Title &lt;<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">&quot;label&quot;</span>&gt;4rem&lt;<span class="tag">/small</span>&gt;&lt;<span class="tag">/h2</span>&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">h1</span>&gt;H1 Heading&lt;<span class="tag">/h1</span>&gt;
+&lt;<span class="tag">h1</span>&gt;H1 Heading &lt;<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">&quot;label&quot;</span>&gt;40px&lt;<span class="tag">/small</span>&gt;&lt;<span class="tag">/h1</span>&gt;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;h1&quot;</span>&gt;H1 Heading&lt;<span class="tag">/span</span>&gt;
</code></pre>
- <header class="text-center"><h4>Paragraphs</h4></header>
- <section class="notes">
+ <h4 class="s-subtitle">Paragraphs</h4>
+ <div class="docs-note">
<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>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p>
- </section>
+ </div>
<!-- paragraphs example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span>&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;dictum in vehicula sit amet&lt;<span class="tag">/a</span>&gt;, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.&lt;<span class="tag">/p</span>&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span>&gt;Lorem ipsum dolor sit amet, ...&lt;<span class="tag">/p</span>&gt;
+&lt;<span class="tag">p</span>&gt;...&lt;<span class="tag">/p</span>&gt;
</code></pre>
- <header class="text-center"><h4>Semantic text elements</h4></header>
+ <h4 class="s-subtitle">Semantic text elements</h4>
<div class="columns">
<div class="column col-4 col-xs-12">
<abbr title="Internationalization">I18N</abbr>
@@ -189,28 +374,42 @@
</div>
</div>
- <header class="text-center"><h4>Optimized for east asian fonts</h4></header>
- <section class="notes">
- <p class="text-large text-center"><span lang="zh-Hans">你好</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕하세요</span></p>
- <h5>Chinese (Simplified)</h5>
+ <h4 class="s-subtitle">Optimized for east asian fonts</h4>
+ <h5><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>, <small lang="ko">안녕하세요</small></h5>
+ <div class="docs-note">
+ <h6>Chinese (Simplified)</h6>
<p lang="zh-Hans">革命不是请客吃饭,不是做文章,不是绘画绣花,不能那样雅致,那样从容不迫,“文质彬彬”,那样“温良恭俭让”。革命就是暴动,是一个阶级推翻一个阶级的暴烈的行动。</p>
- <h5>Chinese (Tranditional)</h5>
+ <h6>Chinese (Tranditional)</h6>
<p lang="zh-Hant">山不在高,有仙則名;水不在深,有龍則靈。斯是陋室,惟吾德馨。苔痕上階綠,草色入簾青;談笑有鴻儒,往來無白丁。可以調素琴,閱金經。無絲竹之亂耳,無案牘之勞形。南陽諸葛廬,西蜀子雲亭。孔子云:「何陋之有?」</p>
- <h5>Japanese</h5>
- <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。</p>
- <h5>Korean</h5>
+ <h6>Japanese</h6>
+ <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。</p>
+ <h6>Korean</h6>
<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p>
- </section>
- <section class="notes">
- <p>Use the <code>lang</code> attribute or add the <code>cjk</code> class to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.</p>
- </section>
+ </div>
+ <div class="docs-note">
+ <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. </p>
+ </div>
<!-- east asian example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
-&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ja&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;zh-Hans&quot;</span>&gt;革命不是请客吃饭,不是做文章……&lt;<span class="tag">/p</span>&gt;
+&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ja&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり……&lt;<span class="tag">/p</span>&gt;
+&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ko&quot;</span>&gt;나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……&lt;<span class="tag">/p</span>&gt;
</code></pre>
- <header class="text-center"><h4>Blockquote</h4></header>
+ <div class="docs-note">
+ <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>
+ </div>
+ <div class="docs-note">
+ <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。</p>
+ <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。</p>
+ </div>
+
+<!-- east asian example -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;&lt;<span class="tag">u</span>&gt;祇園&lt;<span class="tag">/u</span>&gt;&lt;<span class="tag">u</span>&gt;精舎&lt;<span class="tag">/u</span>&gt;の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
+&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;&lt;<span class="tag">del</span>&gt;祇園&lt;<span class="tag">/del</span>&gt;&lt;<span class="tag">del</span>&gt;精舎&lt;<span class="tag">/del</span>&gt;の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
+</code></pre>
+
+ <h4 class="s-subtitle">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>
@@ -223,7 +422,7 @@
&lt;<span class="tag">/blockquote</span>&gt;
</code></pre>
- <header class="text-center"><h4>Lists</h4></header>
+ <h4 class="s-subtitle">Lists</h4>
<div class="columns">
<div class="column col-4 col-xs-12">
<ul class="list">
@@ -284,13 +483,13 @@
&lt;<span class="tag">/dl</span>&gt;
</code></pre>
- </section>
+ </div>
- <section id="tables" class="container">
- <header class="text-center"><h3><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3></header>
- <section class="notes">
- <p><strong>Tables</strong> include default styles for tables and data sets.</p>
- </section>
+ <div id="tables" class="container">
+ <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3>
+ <div class="docs-note">
+ <p>Tables include default styles for tables and data sets.</p>
+ </div>
<table class="table table-striped">
<thead>
<tr>
@@ -322,10 +521,10 @@
</tr>
</tbody>
</table>
- <section class="notes">
+ <div class="docs-note">
<p>Add the <code>table</code> class to any &lt;table&gt; element. The class will add padding, border and emphasized table header. Use the <code>table-striped</code> class to &lt;table&gt; to add zebra striped style. For hoverable table rows, you can add the <code>table-hover</code> class to enable hover style. </p>
<p>Use the <code>active</code> class to make &lt;tr&gt; element highlighted. </p>
- </section>
+ </div>
<!-- tables example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">&quot;table table-striped table-hover&quot;</span>&gt;
@@ -346,16 +545,16 @@
&lt;<span class="tag">/table</span>&gt;
</code></pre>
- </section>
+ </div>
- <section id="buttons" class="container">
- <header class="text-center"><h3><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3></header>
- <section class="notes">
- <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p>
- </section>
+ <div id="buttons" class="container">
+ <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3>
+ <div class="docs-note">
+ <p>Buttons include simple button styles for actions in different types and sizes. </p>
+ </div>
<div class="columns">
<div class="column col-xs-12">
- <button class="btn">default button</button>
+ <button class="btn loading-inline">default button</button>
</div>
<div class="column col-xs-12">
<button class="btn btn-primary">primary button</button>
@@ -364,6 +563,31 @@
<button class="btn btn-link">link button</button>
</div>
</div>
+
+ <div class="docs-note">
+ <p>Add the <code>btn</code> class to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. </p>
+ </div>
+
+ <div class="docs-note">
+ <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for a disabled button.</p>
+ </div>
+
+ <div class="columns">
+ <div class="column col-xs-12">
+ <button class="btn disabled" tabindex="-1">default disabled</button>
+ </div>
+ <div class="column col-xs-12">
+ <button class="btn btn-primary" disabled tabindex="-1">primary disabled</button>
+ </div>
+ <div class="column col-xs-12">
+ <button class="btn btn-link" disabled tabindex="-1">link disabled</button>
+ </div>
+ </div>
+
+ <div class="docs-note">
+ <p>A button with the <code>loading</code> class can show loading indicator.</p>
+ </div>
+
<div class="columns">
<div class="column col-xs-12">
<button class="btn loading">default button</button>
@@ -375,56 +599,34 @@
<button class="btn btn-link loading">link button</button>
</div>
</div>
- <section class="notes">
- <p>Add the <code>btn</code> class to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. A button with the <code>loading</code> class can show loading indicator. </p>
- </section>
<!-- buttons example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;default button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;primary button&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;link button&lt;<span class="tag">/button</span>&gt;
+<span class="com">&lt;!-- buttons with disabled state --&gt;</span>
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn disabled&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span> <span class="atn">disabled</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;disabled button&lt;<span class="tag">/button</span>&gt;
+
<span class="com">&lt;!-- a button with loading state --&gt;</span>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn loading&quot;</span>&gt;button&lt;<span class="tag">/button</span>&gt;
</code></pre>
- <section class="notes">
- <p>Add the <code>disabled</code> class or the <code>disabled</code> attribute for a disabled button.</p>
- </section>
- <div class="columns">
- <div class="column col-xs-12">
- <button class="btn disabled" tabindex="-1">default button</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-primary" disabled tabindex="-1">primary button</button>
- </div>
- <div class="column col-xs-12">
- <button class="btn btn-link" disabled tabindex="-1">link button</button>
- </div>
- </div>
-
- <header class="text-center"><h4>Button sizes</h4></header>
+ <h4 class="s-subtitle">Button sizes</h4>
<div class="columns">
- <div class="column col-6 col-xs-12">
- <button class="btn btn-primary btn-lg">large button</button>
+ <div class="column">
+ <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 class="btn btn-primary">normal <i class="icon icon-arrow-down"></i></button>
<button class="btn btn-primary">normal</button>
+ <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>
</div>
- <div class="column col-3 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-3 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>
- <section class="notes">
+ <div class="docs-note">
<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>
- <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>
- </section>
+ </div>
<!-- buttons example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-lg&quot;</span>&gt;large button&lt;<span class="tag">/button</span>&gt;
@@ -432,28 +634,34 @@
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-block&quot;</span>&gt;block button&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action circle&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-lg&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; large&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; normal&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-sm&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; small&lt;<span class="tag">/button</span>&gt;
</code></pre>
+ <div class="docs-note">
+ <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>
+
<div class="columns">
- <div class="column">
- <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
- <button class="btn btn-primary btn-lg">large</button>
- <button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
- <button class="btn btn-primary">normal</button>
- <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
- <button class="btn btn-primary btn-sm">small</button>
+ <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>
<!-- buttons example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-lg&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; large&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; normal&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-sm&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; small&lt;<span class="tag">/button</span>&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action circle&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-left&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
</code></pre>
- <header class="text-center"><h4>Button groups</h4></header>
+ <h4 class="s-subtitle">Button groups</h4>
<div class="columns">
<div class="column col-xs-12">
<div class="btn-group">
@@ -486,9 +694,9 @@
</div>
</div>
</div>
- <section class="notes">
+ <div class="docs-note">
<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>
- </section>
+ </div>
<!-- button groups example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;btn-group btn-group-block&quot;</span>&gt;
@@ -498,13 +706,13 @@
&lt;<span class="tag">/div</span>&gt;
</code></pre>
- </section>
+ </div>
- <section id="forms" class="container">
- <header class="text-center"><h3><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3></header>
- <section class="notes">
- <p><strong>Forms</strong> provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. </p>
- </section>
+ <div id="forms" class="container">
+ <h3 class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3>
+ <div class="docs-note">
+ <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. </p>
+ </div>
<div class="columns">
<div class="column col-9 col-xs-12">
<form action="#forms">
@@ -609,10 +817,14 @@
&lt;<span class="tag">/form</span>&gt;
</code></pre>
- <section class="notes">
+ <div class="docs-note">
<p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p>
+ </div>
+
+ <h4 class="s-subtitle">Horizontal forms</h4>
+ <div class="docs-note">
<p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the &lt;form&gt; container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p>
- </section>
+ </div>
<div class="columns">
<div class="column col-9 col-sm-12">
<form class="form-horizontal" action="#forms">
@@ -708,10 +920,10 @@
&lt;<span class="tag">/form</span>&gt;
</code></pre>
- <header class="text-center"><h4>Form sizes</h4></header>
- <section class="notes">
+ <h4 class="s-subtitle">Form sizes</h4>
+ <div class="docs-note">
<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>
- </section>
+ </div>
<div class="columns">
<div class="column col-4">
<label class="form-label label-sm">Label</label>
@@ -745,27 +957,27 @@
</div>
</div>
- <header class="text-center"><h4>Form icons</h4></header>
- <section class="notes">
+ <h4 class="s-subtitle">Form icons</h4>
+ <div class="docs-note">
<p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to &lt;input&gt; element. And add the icon with <code>form-icon</code> class next to the &lt;input&gt;.</p>
- </section>
+ </div>
<div class="columns">
<div class="column col-4">
<div class="has-icon-left">
<input class="form-input input-sm" type="text" placeholder="Name" />
- <i class="form-icon icon icon-cross"></i>
+ <i class="form-icon icon icon-arrow-right"></i>
</div>
</div>
<div class="column col-4">
<div class="has-icon-left">
<input class="form-input" type="text" placeholder="Name" />
- <i class="form-icon icon icon-cross"></i>
+ <i class="form-icon icon icon-arrow-right"></i>
</div>
</div>
<div class="column col-4">
<div class="has-icon-left">
<input class="form-input input-lg" type="text" placeholder="Name" />
- <i class="form-icon icon icon-cross"></i>
+ <i class="form-icon icon icon-arrow-right"></i>
</div>
</div>
</div>
@@ -798,9 +1010,9 @@
&lt;<span class="tag">/div</span>&gt;
</code></pre>
- <section class="notes">
+ <div class="docs-note">
<p>You can use the <code>loading</code> class for loading or posting state.</p>
- </section>
+ </div>
<div class="columns">
<div class="column col-4">
@@ -830,7 +1042,7 @@
&lt;<span class="tag">/div</span>&gt;
</code></pre>
- <header class="text-center"><h4>Input types</h4></header>
+ <h4 class="s-subtitle">Input types</h4>
<div class="columns">
<div class="column col-9 col-sm-12">
<form class="form-horizontal" action="#forms">
@@ -903,14 +1115,14 @@
<label class="form-label" for="input-example-16">File</label>
</div>
<div class="col-9">
- <input class="form-input" type="file" id="input-example-16" value="" />
+ <input class="form-input" type="file" id="input-example-16" />
</div>
</div>
</form>
</div>
</div>
- <header class="text-center"><h4>Input groups</h4></header>
+ <h4 class="s-subtitle">Input groups</h4>
<div class="columns">
<div class="column col-xs-12">
<div class="input-group">
@@ -968,9 +1180,9 @@
</div>
</div>
</div>
- <section class="notes">
+ <div class="docs-note">
<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>
- </section>
+ </div>
<!-- input groups example -->
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- normal input group --&gt;</span>
@@ -993,53 +1205,76 @@
&lt;<span class="tag">/div</span>&gt;
</code></pre>
- <header class="text-center"><h4>Form validation styles</h4></header>
- <section class="notes">
+ <h4 class="s-subtitle">Form validation styles</h4>
+ <div class="docs-note">
<p>To use form validation styles, 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. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p>
- </section>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="form-group">
- <label class="form-label" for="input-example-17">Name</label>
- <input class="form-input is-error" type="text" id="input-example-17" placeholder="Name" />
- <p class="form-input-hint">The name is invalid.</p>
- </div>
- <div class="form-group has-success">
- <label class="form-label" for="input-example-18">Email</label>
- <input class="form-input" type="email" id="input-example-18" placeholder="Email" />
- <p class="form-input-hint">The email is available.</p>
- </div>
- </div>
</div>
<div class="columns">
<div class="column col-6 col-xs-12">
- <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>
- </div>
- </div>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <div class="form-group">
- <label class="form-label" for="input-example-21">Email</label>
- <input class="form-input" type="text" id="input-example-21" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$" />
- <p class="form-input-hint">The name is invalid.</p>
- </div>
+ <fieldset>
+ <legend>form-input</legend>
+ <div class="form-group">
+ <label class="form-label" for="input-example-17">Name</label>
+ <input class="form-input is-success" type="text" id="input-example-17" 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" type="password" id="input-example-18" 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" type="text" id="input-example-21" 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>form-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>form-checkbox, radio and switch</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" />
+ <i class="form-icon"></i> Send me emails with news and tips
+ </label>
+ </div>
+ </fieldset>
</div>
</div>
@@ -1058,13 +1293,21 @@
&lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input is-success&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-1&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;...&quot;</span> /&gt;
&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;form-input-hint&quot;</span>&gt;The name is invalid.&lt;<span class="tag">/p</span>&gt;
&lt;<span class="tag">/div</span>&gt;
+
+ <span class="com">&lt;!-- form validation example for checkbox, radio and switch --&gt;</span>
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
+ &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-checkbox is-error&quot;</span>&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> /&gt;
+ &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Remember me
+ &lt;<span class="tag">/label</span>&gt;
+ &lt;<span class="tag">/div</span>&gt;
&lt;<span class="tag">/form</span>&gt;
</code></pre>
- <header class="text-center"><h4>Form disabled styles</h4></header>
- <section class="notes">
+ <h4 class="s-subtitle">Form disabled styles</h4>
+ <div class="docs-note">
<p>Add the <code>disabled</code> attribute to the element or &lt;fieldset&gt; for a disabled form components style.</p>
- </section>
+ </div>
<div class="columns">
<div class="column col-9 col-xs-12">
<form action="#forms">
@@ -1112,14 +1355,14 @@
</form>
</div>
</div>
- </section>
+ </div>
- <section id="icons" class="container">
- <header class="text-center"><h3><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3></header>
- <section class="notes">
- <p><strong>Icons</strong> are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.</p>
- </section>
- <header class="text-center"><h4>Navigation</h4></header>
+ <div id="icons" class="container">
+ <h3 class="s-title"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3>
+ <div class="docs-note">
+ <p>Icons are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.</p>
+ </div>
+ <h4 class="s-subtitle">Navigation icons</h4>
<div class="columns">
<div class="column col-3 col-md-6">
<button class="btn btn-primary btn-action btn-lg">
@@ -1200,7 +1443,7 @@
<p>icon-more-vert</p>
</div>
</div>
- <header class="text-center"><h4>Action</h4></header>
+ <h4 class="s-subtitle">Action icons</h4>
<div class="columns">
<div class="column col-3 col-md-6">
<button class="btn btn-primary btn-action btn-lg">
@@ -1305,7 +1548,7 @@
<p>icon-upload</p>
</div>
</div>
- <header class="text-center"><h4>Object</h4></header>
+ <h4 class="s-subtitle">Object icons</h4>
<div class="columns">
<div class="column col-3 col-md-6">
<button class="btn btn-primary btn-action btn-lg">
@@ -1361,13 +1604,13 @@
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-menu&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
</code></pre>
- </section>
+ </div>
- <section id="labels" class="container">
- <header class="text-center"><h3><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3></header>
- <section class="notes">
- <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p>
- </section>
+ <div id="labels" class="container">
+ <h3 class="s-title"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3>
+ <div class="docs-note">
+ <p>Labels are formatted text tags for highlighted, informative information.</p>
+ </div>
<div class="columns">
<div class="column">
<span class="label">default label</span>
@@ -1377,23 +1620,23 @@
<span class="label label-error">error label</span>
</div>
</div>
- <section class="notes">
- <p>Add the <code>label</code> class to &lt;span&gt; or &lt;small&gt; elements. You can add another class <code>label-primary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for a primary colored label.</p>
- </section>
+ <div class="docs-note">
+ <p>Add the <code>label</code> class to &lt;span&gt; or &lt;small&gt; elements. You can add another class <code>label-primary</code>, <code>label-success</code>, <code>label-warning</code> and <code>label-error</code> for colored labels.</p>
+ </div>
<!-- labels example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;label&quot;</span>&gt;default label&lt;<span class="tag">/span</span>&gt;
&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;label label-primary&quot;</span>&gt;primary label&lt;<span class="tag">/span</span>&gt;
</code></pre>
- </section>
+ </div>
- <section id="codes" class="container">
- <header class="text-center"><h3><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3></header>
- <section class="notes">
- <p><strong>Codes</strong> are inline and multiline code snippets.</p>
+ <div id="codes" class="container">
+ <h3 class="s-title"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3>
+ <div class="docs-note">
+ <p>Codes are inline and multiline code snippets.</p>
<p>For inline code, you can use the element <code>&lt;code&gt;</code>. For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p>
- </section>
+ </div>
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
@@ -1403,29 +1646,32 @@
<!-- codes example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">pre</span> <span class="atn">class</span>=<span class="atv">&quot;code&quot;</span> <span class="atn">data-lang</span>=<span class="atv">&quot;HTML&quot;</span>&gt;&lt;<span class="tag">code</span>&gt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;com&quot;</span>&gt;&amp;lt;!-- code snippets --&amp;gt;&lt;<span class="tag">/span</span>&gt;
-&amp;lt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;tag&quot;</span>&gt;button&lt;<span class="tag">/span</span>&gt; &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atn&quot;</span>&gt;class&lt;<span class="tag">/span</span>&gt;=&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atv&quot;</span>&gt;&amp;quot;btn&amp;quot;</span>&lt;<span class="tag">/span</span>&gt;&amp;gt;
+&amp;lt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;tag&quot;</span>&gt;button&lt;<span class="tag">/span</span>&gt; &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atn&quot;</span>&gt;class&lt;<span class="tag">/span</span>&gt;=&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;atv&quot;</span>&gt;&amp;quot;btn&amp;quot;&lt;<span class="tag">/span</span>&gt;&amp;gt;
Submit
&amp;lt;&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;tag&quot;</span>&gt;/button&lt;<span class="tag">/span</span>&gt;&amp;gt;
&lt;<span class="tag">/code</span>&gt;&lt;<span class="tag">/pre</span>&gt;
</code></pre>
- </section>
+ </div>
- <section id="media" class="container">
- <header class="text-center"><h3><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3></header>
- <section class="notes">
- <p><strong>Media</strong> includes responsive images, figures and video classes. </p>
+ <div id="media" class="container">
+ <h3 class="s-title"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3>
+ <div class="docs-note">
+ <p>Media includes responsive images, figures and video classes. </p>
+ </div>
+ <h4 class="s-subtitle">Images</h4>
+ <div class="docs-note">
<p>Add the <code>img-responsive</code> class to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
- </section>
+ </div>
<div class="columns">
<div class="column col-12">
<img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" />
</div>
</div>
- <section class="notes">
- <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to &lt;img&gt; or &lt;video&gt; elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">in development</a>.</p>
- </section>
+ <div class="docs-note">
+ <p>Add the <code>img-fit-contain</code> or <code>img-fit-cover</code> class to &lt;img&gt; or &lt;video&gt; elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/" target="_blank">in preview</a>.</p>
+ </div>
<div class="columns">
<div class="column col-6 col-xs-12">
<figure class="figure">
@@ -1446,9 +1692,9 @@
&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-fit-cover ...&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
</code></pre>
- <section class="notes">
+ <div class="docs-note">
<p>You can use the element &lt;figure&gt; for an image with a caption. Add the <code>figure</code> class to &lt;figure&gt; element. The images with the <code>img-responsive</code> class will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment. </p>
- </section>
+ </div>
<div class="columns">
<div class="column col-12">
<figure class="figure">
@@ -1464,13 +1710,14 @@
&lt;<span class="tag">/figure</span>&gt;
</code></pre>
- <section class="notes">
+ <h4 class="s-subtitle">Video</h4>
+ <div class="docs-note">
<p>For responsive video, add a container with the <code>video-responsive</code> class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p>
- </section>
+ </div>
<div class="columns">
<div class="column col-12">
<div class="video-responsive">
- <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" frameborder="0" allowfullscreen></iframe>
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" allowfullscreen></iframe>
</div>
</div>
</div>
@@ -1481,37 +1728,17 @@
&lt;<span class="tag">/div</span>&gt;
</code></pre>
- </section>
+ </div>
+
+ <footer class="s-footer">
+ <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
+ <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+ </footer>
- <section class="container">
- <div class="divider"></div>
- <ul class="pagination">
- <li class="page-item page-prev">
- <a href="index.html">
- <p class="page-item-subtitle">Previous</p>
- <h4 class="page-item-title">Getting started</h4>
- </a>
- </li>
- <li class="page-item page-next">
- <a href="layout.html">
- <p class="page-item-subtitle">Next</p>
- <h4 class="page-item-title">Layout</h4>
- </a>
- </li>
- </ul>
- </section>
</div>
- </section>
- </section>
+ </div>
+ </div>
- <footer class="bg-gray">
- <section id="copyright" class="grid-footer container grid-960">
- <p>
- <a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | Version <span class="version"></span>
- </p>
- <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
- </section>
- </footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),