Summary Files Commits Branches @commit @diff @stats
path: root / index.html
diff options
context:
space:
mode:
Commitf0ce15d72c421a68ef3ec214de833a6d06ccd128 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2016-04-08 15:42:06 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2016-04-08 15:42:06 +0800
Files3c3b3f10d8afe8782bd7a7c32d6e262653623b89 /index.html
Spectre-Dark-Gruvbox-f0ce15d72c421a68ef3ec214de833a6d06ccd128.tar
Spectre-Dark-Gruvbox-f0ce15d72c421a68ef3ec214de833a6d06ccd128.tar.gz
Spectre-Dark-Gruvbox-f0ce15d72c421a68ef3ec214de833a6d06ccd128.zip
Parent5e74f8637756add6bfeca4129e6869e5d470c2ea (diff)
update doc and examples
1 files changed, 172 insertions, 107 deletions
-rw-r--r--index.html279
diff --git a/index.html b/index.html
index d7ac1fc..afec247 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta charset="UTF-8">
- <meta name="robots" content="index, follow">
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
- <meta name="author" content="https://github.com/picturepan2/spectre">
- <title>Spectre, a lightweight and clean CSS framework for faster and extendable development.</title>
- <link rel="stylesheet" href="dist/spectre.css">
- <link rel="stylesheet" href="demo/font/style.css">
+ <meta charset="UTF-8" />
+ <meta name="robots" content="index, follow" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta name="author" content="https://github.com/picturepan2/spectre" />
+ <title>Spectre, a lightweight and modern CSS framework for faster and extensible development.</title>
+ <link rel="stylesheet" href="dist/spectre.css" />
+ <link rel="stylesheet" href="demo/font/style.css" />
<style>
header > h4 {
- margin-top: 8rem;
+ padding-top: 4rem;
+ margin-top: 4rem;
margin-bottom: 2rem;
}
.bg-grey {
@@ -29,6 +30,9 @@
margin: 2rem 0;
color: #666;
}
+ .code {
+ color: #666;
+ }
.code .com {
color: #adadad;
}
@@ -36,7 +40,7 @@
color: #4452c0;
}
.code .atn {
- color: #4452c0;
+ color: #666;
}
.code .atv {
color: #e06870;
@@ -48,10 +52,10 @@
<section id="overview" class="grid-hero grid-960">
<header class="text-center"><h3>Project Spectre</h3></header>
<section>
- <p><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p>
+ <p><strong>Project Spectre</strong> is a lightweight and modern CSS framework for faster and extensible development.</p>
<ul>
<li>lightweight and clean starting point for your project</li>
- <li>flexbox and responsive layout friendly</li>
+ <li>flexbox, responsive and mobile-friendly layout</li>
<li>built in useful components and utilities</li>
</ul>
</section>
@@ -65,12 +69,45 @@
</section>
<section class="container grid-960">
<section id="get-started">
- <!--<header class="text-center"><h4>get started</h4></header>
+ <header class="text-center"><h4>get started</h4></header>
<section class="notes">
- <p>You can either manually install Spectre CSS framework to your website or app.</p>
- <h5>Bower</h5>
- <h5>NPM</h5>
- </section>-->
+ <p>There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower (comming soon).</p>
+ <p>Download the compiled and minified Spectre CSS file (less than 25KB), and include it in your website or Web app <code class="label">&lt;head&gt;</code>:</p>
+
+ <!-- get started example -->
+<pre class="code lang-html">
+&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;dist/spectre.css&quot;</span> /&gt;
+</pre>
+ <p>You could even customize Spectre CSS with your own code and removing unneeded components. It requires a LESS compiler and Autoprefixer.</p>
+
+ <!--<p>Install with NPM</p>
+ <p>Install with Bower</p>-->
+
+ </section>
+ <section class="notes text-center">
+ <h4>core elements</h4>
+ <div class="btn-group">
+ <a href="#typography" class="btn btn-default">typography</a>
+ <a href="#layout" class="btn btn-default">layout</a>
+ <a href="#tables" class="btn btn-default">tables</a>
+ <a href="#buttons" class="btn btn-default">buttons</a>
+ <a href="#forms" class="btn btn-default">forms</a>
+ <a href="#images" class="btn btn-default">images</a>
+ </div>
+ <h4>components</h4>
+ <div class="btn-group">
+ <a href="#avatars" class="btn btn-default">avatars</a>
+ <a href="#chips" class="btn btn-default">chips</a>
+ <a href="#tooltips" class="btn btn-default">tooltips</a>
+ <a href="#labels" class="btn btn-default">labels</a>
+ <a href="#badges" class="btn btn-default">badges</a>
+ <a href="#toasts" class="btn btn-default">toasts</a>
+ <a href="#menus" class="btn btn-default">menus</a>
+ <a href="#navigation" class="btn btn-default">navigation</a>
+ <a href="#modals" class="btn btn-default">modals</a>
+ <a href="#cards" class="btn btn-default">cards</a>
+ </div>
+ </section>
</section>
<section id="typography">
@@ -133,44 +170,43 @@
<header class="text-center"><h4>flexbox layout</h4></header>
<section class="notes">
<p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p>
- <p>Add the class <code class="label">columns</code> to a container. And add any element you want with classname <code class="label">column</code> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code class="label">col-[1-12]</code>.</p>
</section>
<div class="columns">
<div class="column">
- <div class="bg-grey">1</div>
+ <div class="bg-grey"></div>
</div>
<div class="column">
- <div class="bg-grey">2</div>
+ <div class="bg-grey"></div>
</div>
<div class="column">
- <div class="bg-grey">3</div>
+ <div class="bg-grey"></div>
</div>
<div class="column">
- <div class="bg-grey">4</div>
+ <div class="bg-grey"></div>
</div>
<div class="column">
- <div class="bg-grey">5</div>
+ <div class="bg-grey"></div>
</div>
<div class="column">
- <div class="bg-grey">6</div>
+ <div class="bg-grey"></div>
</div>
<div class="column">
- <div class="bg-grey">7</div>
+ <div class="bg-grey"></div>
</div>
<div class="column">
- <div class="bg-grey">8</div>
+ <div class="bg-grey"></div>
</div>
<div class="column">
- <div class="bg-grey">9</div>
+ <div class="bg-grey"></div>
</div>
<div class="column">
- <div class="bg-grey">10</div>
+ <div class="bg-grey"></div>
</div>
<div class="column">
- <div class="bg-grey">11</div>
+ <div class="bg-grey"></div>
</div>
<div class="column">
- <div class="bg-grey">12</div>
+ <div class="bg-grey"></div>
</div>
</div>
<div class="columns">
@@ -201,6 +237,9 @@
<div class="bg-grey">col-2</div>
</div>
</div>
+ <section class="notes">
+ <p>Add the class <code class="label">columns</code> to a container. And add any element you want with classname <code class="label">column</code> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code class="label">col-[1-12]</code>.</p>
+ </section>
<!-- layout example -->
<pre class="code lang-html">
@@ -218,7 +257,6 @@
<header class="text-center"><h4>tables</h4></header>
<section class="notes">
<p><strong>Tables</strong> include default styles for tables and data sets.</p>
- <p>Add the class <code class="label">table</code> to any &lt;table&gt; element. The class will add padding, border and emphasized table header. Use the class <code class="label">selected</code> to make &lt;tr&gt; element highlighted. </p>
</section>
<table class="table">
@@ -257,6 +295,9 @@
</tr>
</tbody>
</table>
+ <section class="notes">
+ <p>Add the class <code class="label">table</code> to any &lt;table&gt; element. The class will add padding, border and emphasized table header. Use the class <code class="label">selected</code> to make &lt;tr&gt; element highlighted. </p>
+ </section>
<!-- tables example -->
<pre class="code lang-html">
@@ -286,7 +327,6 @@
<header class="text-center"><h4>buttons</h4></header>
<section class="notes">
<p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p>
- <p>Add the class <code class="label">btn</code> to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. There are classes <code class="label">btn-primary</code> and <code class="label">btn-link</code> for predefined primary and link buttons. A button with the class <code class="label">loading</code> can show loading indicator. </p>
</section>
<div class="columns">
@@ -303,6 +343,9 @@
<button class="btn btn-link loading">link button</button>
</div>
</div>
+ <section class="notes">
+ <p>Add the class <code class="label">btn</code> to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. There are classes <code class="label">btn-primary</code> and <code class="label">btn-link</code> for predefined primary and link buttons. A button with the class <code class="label">loading</code> can show loading indicator. </p>
+ </section>
<!-- buttons example -->
<pre class="code lang-html">
@@ -315,9 +358,6 @@
</pre>
<header class="text-center"><h5>button sizes</h5></header>
- <section class="notes">
- <p>Add the class <code class="label">btn-sm</code> or <code class="label">btn-lg</code> for small or large button size. Also, you can add the class <code class="label">btn-block</code> for a full-width button. </p>
- </section>
<div class="columns">
<div class="column">
@@ -329,6 +369,9 @@
<button class="btn btn-block">block button</button>
</div>
</div>
+ <section class="notes">
+ <p>Add the class <code class="label">btn-sm</code> or <code class="label">btn-lg</code> for small or large button size. Also, you can add the class <code class="label">btn-block</code> for a full-width button. </p>
+ </section>
<!-- buttons example -->
<pre class="code lang-html">
@@ -337,9 +380,6 @@
&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;
</pre>
- <section class="notes">
- <p>Icons with the class <code class="label">icon</code> can be correctly rendered in each button size. </p>
- </section>
<div class="columns">
<div class="column">
<button class="btn btn-primary btn-lg"><span class="icon icon-markunread"></span> large</button>
@@ -347,6 +387,9 @@
<button class="btn btn-primary btn-sm"><span class="icon icon-markunread"></span> small</button>
</div>
</div>
+ <section class="notes">
+ <p>Icons with the class <code class="label">icon</code> can be correctly rendered in each button size. </p>
+ </section>
<!-- buttons example -->
<pre class="code lang-html">
@@ -356,9 +399,6 @@
</pre>
<header class="text-center"><h5>button groups</h5></header>
- <section class="notes">
- <p>If you want to use buttons as a group, add the class <code class="label">btn-group</code> to the container. You can add the class <code class="label">btn-group-block</code> for a full-width button group.</p>
- </section>
<div class="columns">
<div class="column">
<div class="btn-group">
@@ -375,6 +415,9 @@
</div>
</div>
</div>
+ <section class="notes">
+ <p>If you want to use buttons as a group, add the class <code class="label">btn-group</code> to the container. You can add the class <code class="label">btn-group-block</code> for a full-width button group.</p>
+ </section>
<!-- button groups example -->
<pre class="code lang-html">
@@ -391,7 +434,7 @@
<header class="text-center"><h4>forms</h4></header>
<section class="notes">
<p><strong>Forms</strong> provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch. </p>
- <p> </p>
+ <p></p>
</section>
<div class="columns">
<div class="column col-6">
@@ -573,13 +616,22 @@
</div>
</div>
</div>
+
+ <!-- input groups example -->
+<pre class="code lang-html">
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group&quot;</span>&gt;
+ &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;input-group-addon&quot;</span>&gt;slack.com/&lt;<span class="tag">/span</span>&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;site name&quot;</span> /&gt;
+ &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary input-group-btn&quot;</span>&gt;Submit&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+</pre>
+
</section>
<section id="images">
<header class="text-center"><h4>images</h4></header>
<section class="notes">
<p><strong>Images</strong> include responsive image class. </p>
- <p>Add the class <code class="label">img-responsive</code> to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
</section>
<div class="columns">
<div class="column col-6">
@@ -589,6 +641,9 @@
<img src="demo/img/osx-el-capitan-2.jpg" class="img-responsive rounded hide-sm" />
</div>
</div>
+ <section class="notes">
+ <p>Add the class <code class="label">img-responsive</code> to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
+ </section>
<!-- images example -->
<pre class="code lang-html">
@@ -601,8 +656,6 @@
<header class="text-center"><h4>avatars</h4></header>
<section class="notes">
<p><strong>Avatars</strong> are user profile pictures. </p>
- <p>Add the class <code class="label">avatar</code> to &lt;img&gt; element. Avatars come in 5 sizes, including <code class="label">avatar-xl</code> (64px), <code class="label">avatar-lg</code> (48px), <code class="label">avatar-sm</code> (24px), and <code class="label">avatar-xs</code> (16px). By default, the avatar size is 32px.</p>
- <p>For users who don't have profile pictures, you may use their initials for avatars. Add the class <code class="label">avatar</code> and avatar size class to &lt;div&gt; element. The attribute <code class="label">data-initial</code> is the name appear inside the avatar.</p>
</section>
<div class="columns">
<div class="column col-3">
@@ -643,6 +696,11 @@
</div>
</div>
+ <section class="notes">
+ <p>Add the class <code class="label">avatar</code> to &lt;img&gt; element. There are 4 additional sizes available, including <code class="label">avatar-xl</code> (64px), <code class="label">avatar-lg</code> (48px), <code class="label">avatar-sm</code> (24px), and <code class="label">avatar-xs</code> (16px). By default, the avatar size is 32px.</p>
+ <p>For users who don't have profile pictures, you may use their initials for avatars. Add the class <code class="label">avatar</code> and avatar size class to &lt;div&gt; element. The attribute <code class="label">data-initial</code> is the name appear inside the avatar.</p>
+ </section>
+
<!-- avatars example -->
<pre class="code lang-html">
&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> /&gt;
@@ -720,7 +778,6 @@
<header class="text-center"><h4>tooltips</h4></header>
<section class="notes">
<p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p>
- <p>Add the class <code class="label">tooltip</code> and the attribute <code class="label">data-tooltip</code>, which contains the tooltip content, to non self closing elements. And add the class name <code class="label">tooltip-right</code>, <code class="label">tooltip-bottom</code> or <code class="label">tooltip-left</code> to define the position of a tooltip. By default, the tooltip appears above the element.</p>
</section>
<div class="columns">
<div class="column text-center">
@@ -736,6 +793,9 @@
<button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum dolor sit amet">left tooltip</button>
</div>
</div>
+ <section class="notes">
+ <p>Add the class <code class="label">tooltip</code> and the attribute <code class="label">data-tooltip</code>, which contains the tooltip content, to non self closing elements. And add the class name <code class="label">tooltip-right</code>, <code class="label">tooltip-bottom</code> or <code class="label">tooltip-left</code> to define the position of a tooltip. By default, the tooltip appears above the element.</p>
+ </section>
<!-- tooltips example -->
<pre class="code lang-html">
@@ -749,33 +809,70 @@
<header class="text-center"><h4>labels</h4></header>
<section class="notes">
<p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p>
- <p>Add the class <code class="label">label</code> to &lt;span&gt; or &lt;small&gt; elements. You can add another class <code class="label">label-primary</code>, <code class="label">label-success</code>, <code class="label">label-info</code>, <code class="label">label-warning</code>, <code class="label">label-danger</code> for more colored labels.</p>
</section>
<div class="columns">
<div class="column">
<span class="label">default label</span>
- </div>
- <div class="column">
+
<span class="label label-primary">primary label</span>
+
+ <span class="label label-success">success label</span>
+
+ <span class="label label-info">info label</span>
+
+ <span class="label label-warning">warning label</span>
+
+ <span class="label label-danger">danger label</span>
</div>
+ </div>
+ <section class="notes">
+ <p>Add the class <code class="label">label</code> to &lt;span&gt; or &lt;small&gt; elements. You can add another class <code class="label">label-primary</code>, <code class="label">label-success</code>, <code class="label">label-info</code>, <code class="label">label-warning</code>, <code class="label">label-danger</code> for more colored labels.</p>
+ </section>
+
+ <!-- labels example -->
+<pre class="code lang-html">
+&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;
+</pre>
+
+ </section>
+
+ <section id="badges">
+ <header class="text-center"><h4>badges</h4></header>
+ <section class="notes">
+ <p><strong>Badges</strong> are often used as unread number indicators.</p>
+ </section>
+ <div class="columns">
<div class="column">
- <span class="label label-success">success label</span>
+ <span class="badge" data-badge="1">
+ Notifications
+ </span>
</div>
<div class="column">
- <span class="label label-info">info label</span>
+ <span class="badge" data-badge="99">
+ Notifications
+ </span>
</div>
<div class="column">
- <span class="label label-warning">warning label</span>
+ <span class="badge" data-badge="999">
+ Notifications
+ </span>
</div>
<div class="column">
- <span class="label label-danger">danger label</span>
+ <span class="badge" data-badge="♀">
+ Notifications
+ </span>
</div>
</div>
+ <section class="notes">
+ <p>Add the class <code class="label">badge</code> to non self closing elements. And add the attribute <code class="label">data-badge</code> to define the content of a badge. The badge will appear in the top-right direction of the element.</p>
+ </section>
- <!-- labels example -->
+ <!-- badges example -->
<pre class="code lang-html">
-&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;
+&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;99&quot;</span>&gt;
+ Notifications
+&lt;<span class="tag">/span</span>&gt;
</pre>
</section>
@@ -784,7 +881,6 @@
<header class="text-center"><h4>toasts</h4></header>
<section class="notes">
<p><strong>Toasts</strong> are used to show alert or information to users.</p>
- <p>Add a container element with the class <code class="label">toast</code>. You can add any text within the container, and even icons. You may also add a close button with the class <code class="label">btn-clear</code> if you need. </p>
</section>
<div class="columns">
<div class="column">
@@ -800,9 +896,6 @@
</div>
</div>
</div>
- <section class="notes">
- <p>You can add the class <code class="label">toast-primary</code>, <code class="label">toast-success</code>, <code class="label">toast-info</code>, <code class="label">toast-warning</code>, <code class="label">toast-danger</code> for more colors.</p>
- </section>
<div class="columns">
<div class="column">
<div class="toast toast-success">
@@ -816,6 +909,8 @@
Efficiently unleash cross-media information without cross-media value.
</div>
</div>
+ </div>
+ <div class="columns">
<div class="column">
<div class="toast toast-warning">
<button class="btn btn-clear pull-right"></button>
@@ -829,6 +924,10 @@
</div>
</div>
</div>
+ <section class="notes">
+ <p>Add a container element with the class <code class="label">toast</code>. You can add any text within the container, and even icons. You may also add a close button with the class <code class="label">btn-clear</code> if you need. </p>
+ <p>You can add the class <code class="label">toast-primary</code>, <code class="label">toast-success</code>, <code class="label">toast-info</code>, <code class="label">toast-warning</code>, <code class="label">toast-danger</code> for more colors.</p>
+ </section>
<!-- toasts example -->
<pre class="code lang-html">
@@ -850,7 +949,6 @@
<header class="text-center"><h4>menus</h4></header>
<section class="notes">
<p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p>
- <p>Add a container element with the class <code class="label">menu</code>. And add child elements with the classname <code class="label">menu-item</code>. That is a basic menu component.</p>
</section>
<div class="columns">
<div class="column col-3">
@@ -918,6 +1016,9 @@
</ul>
</div>
</div>
+ <section class="notes">
+ <p>Add a container element with the class <code class="label">menu</code>. And add child elements with the classname <code class="label">menu-item</code>. That is a basic menu component.</p>
+ </section>
<!-- menus example -->
<pre class="code lang-html">
@@ -934,12 +1035,12 @@
&lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
&lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/span</span>&gt; HIpchat
+ &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/span</span>&gt; Hipchat
&lt;<span class="tag">/a</span>&gt;
&lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
&lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/span</span>&gt; skype
+ &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/span</span>&gt; Skype
&lt;<span class="tag">/a</span>&gt;
&lt;<span class="tag">/li</span>&gt;
&lt;<span class="tag">/ul</span>&gt;
@@ -953,9 +1054,6 @@
<p><strong>Navigation</strong> includes several components, including breadcrumbs and tabs.</p>
</section>
<header class="text-center"><h5>breadcrumbs</h5></header>
- <section class="notes">
- <p>Add a container element with the class <code class="label">breadcrumb</code>. And add child elements with the classname <code class="label">breadcrumb-item</code>.</p>
- </section>
<div class="columns">
<div class="column">
<ul class="breadcrumb">
@@ -977,6 +1075,9 @@
</ul>
</div>
</div>
+ <section class="notes">
+ <p>Add a container element with the class <code class="label">breadcrumb</code>. And add child elements with the classname <code class="label">breadcrumb-item</code>.</p>
+ </section>
<!-- breadcrumbs example -->
<pre class="code lang-html">
@@ -1000,9 +1101,6 @@
</pre>
<header class="text-center"><h5>tabs</h5></header>
- <section class="notes">
- <p>Add a container element with the class <code class="label">tab</code>. And add child elements with the classname <code class="label">tab-item</code>. You can add the class <code class="label">tab-block</code> for a full-width tab.</p>
- </section>
<div class="columns">
<div class="column">
<ul class="tab">
@@ -1053,6 +1151,9 @@
</ul>
</div>
</div>
+ <section class="notes">
+ <p>Add a container element with the class <code class="label">tab</code>. And add child elements with the classname <code class="label">tab-item</code>. You can add the class <code class="label">tab-block</code> for a full-width tab.</p>
+ </section>
<!-- tabs example -->
<pre class="code lang-html">
@@ -1082,44 +1183,6 @@
</section>
- <section id="badges">
- <header class="text-center"><h4>badges</h4></header>
- <section class="notes">
- <p><strong>Badges</strong> are often used as unread number indicators.</p>
- <p>Add the class <code class="label">badge</code> to non self closing elements. And add the attribute <code class="label">data-badge</code> to define the content of a badge. The badge will appear in the top-right direction of the element.</p>
- </section>
- <div class="columns">
- <div class="column">
- <span class="badge" data-badge="1">
- Notifications
- </span>
- </div>
- <div class="column">
- <span class="badge" data-badge="99">
- Notifications
- </span>
- </div>
- <div class="column">
- <span class="badge" data-badge="999">
- Notifications
- </span>
- </div>
- <div class="column">
- <span class="badge" data-badge="♀">
- Notifications
- </span>
- </div>
- </div>
-
- <!-- badges example -->
-<pre class="code lang-html">
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;99&quot;</span>&gt;
- Notifications
-&lt;<span class="tag">/span</span>&gt;
-</pre>
-
- </section>
-
<section id="modals">
<header class="text-center"><h4>modals</h4></header>
<section class="notes">
@@ -1196,7 +1259,6 @@
<header class="text-center"><h4>cards</h4></header>
<section class="notes">
<p><strong>Cards</strong> are flexible content containers.</p>
- <p>Add a container element with the class <code class="label">card</code>. And add child elements with the class name <code class="label">card-image</code>, <code class="label">card-header</code>, <code class="label">card-content</code> and/or <code class="label">card-footer</code> in any order. </p>
</section>
<div class="columns">
<div class="column col-4">
@@ -1252,6 +1314,9 @@
</div>
</div>
</div>
+ <section class="notes">
+ <p>Add a container element with the class <code class="label">card</code>. And add child elements with the class name <code class="label">card-image</code>, <code class="label">card-header</code>, <code class="label">card-content</code> and/or <code class="label">card-footer</code> in any order. </p>
+ </section>
<!-- cards example -->
<pre class="code lang-html">