Summary Files Commits Branches @commit @diff @stats
diff options
context:
space:
mode:
Commit5e74f8637756add6bfeca4129e6869e5d470c2ea (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>		2016-04-07 19:22:44 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>		2016-04-07 19:22:44 +0800
Files3843a34b6b3467f99d0d6c4b8280aad27ec2eec5
Spectre-Dark-Gruvbox-5e74f8637756add6bfeca4129e6869e5d470c2ea.tar
Spectre-Dark-Gruvbox-5e74f8637756add6bfeca4129e6869e5d470c2ea.tar.gz
Spectre-Dark-Gruvbox-5e74f8637756add6bfeca4129e6869e5d470c2ea.zip
Parent97765451d022f527b7c0477aca69de412b56cfd8 (diff)
update doc and index
7 files changed, 513 insertions, 177 deletions
-rw-r--r--dist/spectre.css68
-rw-r--r--index.html (renamed from demo/index.html)548
-rw-r--r--src/cards.less2
-rw-r--r--src/labels.less16
-rw-r--r--src/modals.less6
-rw-r--r--src/toasts.less4
-rw-r--r--src/typography.less46
diff --git a/dist/spectre.css b/dist/spectre.css
index eae9afa..08b0d96 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -455,24 +455,6 @@ blockquote p:last-child {
blockquote small {
color: #b3b3b3;
}
-code,
-pre {
- display: block;
- margin-top: 1em;
- margin-bottom: 1em;
- border-left: 0.2rem solid #5764c6;
- line-height: 1.8rem;
- background-color: #f9f9f9;
-}
-code {
- padding: 1rem 2rem;
-}
-pre code {
- background-color: transparent;
- border-left: 0;
- margin-top: 0;
- margin-bottom: 0;
-}
ul,
ol {
margin: 0 0 1rem;
@@ -550,6 +532,31 @@ ol ol {
-ms-hyphens: auto;
hyphens: auto;
}
+pre {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 1.5rem;
+ border-left: 0.2rem solid #5764c6;
+ line-height: 1.8rem;
+ background-color: #f9f9f9;
+}
+code {
+ padding: .2rem .4rem;
+ margin: -0.2rem 0.1em 0 0.1em;
+ border-radius: .2rem;
+ background-color: #efefef;
+ font-size: .9em;
+ line-height: 1em;
+ vertical-align: baseline;
+ white-space: nowrap;
+}
+pre code {
+ margin-top: 0;
+ margin-bottom: 0;
+ border-left: 0;
+ background-color: transparent;
+ line-height: 1.8rem;
+}
.container {
width: 100%;
margin-left: auto;
@@ -1264,13 +1271,13 @@ textarea.form-input {
}
.card .card-header,
.card .card-image,
-.card .card-content,
+.card .card-body,
.card .card-footer {
padding: 1.5rem 1.5rem 0 1.5rem;
}
.card .card-header:last-child,
.card .card-image:last-child,
-.card .card-content:last-child,
+.card .card-body:last-child,
.card .card-footer:last-child {
padding-bottom: 1.5rem;
}
@@ -1426,15 +1433,15 @@ textarea.form-input {
}
.label {
display: inline-block;
- padding: .3rem .4rem;
- font-size: 90%;
+ padding: .2rem .4rem;
+ font-size: .9em;
line-height: 1em;
- color: #737373;
+ color: #666666;
background-color: #efefef;
text-align: center;
white-space: nowrap;
- vertical-align: middle;
- margin: -0.3rem 0.1em 0 0.1em;
+ vertical-align: baseline;
+ margin: -0.2rem 0.1em 0 0.1em;
border-radius: .2rem;
}
.label.label-primary {
@@ -1457,11 +1464,6 @@ textarea.form-input {
color: #fff;
background-color: #e85600;
}
-.label.label-lg {
- font-size: 100%;
- line-height: 1.2;
- padding: .3rem .5rem;
-}
.menu {
display: block;
width: auto;
@@ -1533,7 +1535,6 @@ textarea.form-input {
margin: .5rem;
}
.modal {
- width: 50vw;
text-align: left;
margin: 0;
padding: 0;
@@ -1563,6 +1564,11 @@ textarea.form-input {
padding: 1.5rem;
text-align: right;
}
+@media screen and (min-width: 640px) {
+ .modal {
+ width: 64rem;
+ }
+}
.breadcrumb {
list-style: none;
margin: .5rem 0;
diff --git a/demo/index.html b/index.html
index ca36a6d..d7ac1fc 100644
--- a/demo/index.html
+++ b/index.html
@@ -6,8 +6,8 @@
<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="font/style.css">
+ <link rel="stylesheet" href="dist/spectre.css">
+ <link rel="stylesheet" href="demo/font/style.css">
<style>
header > h4 {
margin-top: 8rem;
@@ -29,6 +29,18 @@
margin: 2rem 0;
color: #666;
}
+ .code .com {
+ color: #adadad;
+ }
+ .code .tag {
+ color: #4452c0;
+ }
+ .code .atn {
+ color: #4452c0;
+ }
+ .code .atv {
+ color: #e06870;
+ }
</style>
</head>
<body>
@@ -64,16 +76,16 @@
<section id="typography">
<header class="text-center"><h4>typography</h4></header>
<section class="notes">
- <p><strong>typography.less</strong> sets default styles for headings, paragraphs, blockquote, lists elements and some text related utilities. </p>
+ <p><strong>Typography</strong> sets default styles for headings, paragraphs, blockquote, lists elements and some text related utilities. </p>
</section>
<header class="text-center"><h5>headings</h5></header>
- <h1>H1 Title <span class="label">5rem</span></h1>
- <h2>H2 Title <span class="label">4rem</span></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>
+ <h1>H1 Title <small class="label">5rem</small></h1>
+ <h2>H2 Title <small class="label">4rem</small></h2>
+ <h3>H3 Title <small class="label">3rem</small></h3>
+ <h4>H4 Title <small class="label">2.4rem</small></h4>
+ <h5>H5 Title <small class="label">2rem</small></h5>
+ <h6>H6 Title <small class="label">1.6rem</small></h6>
<header class="text-center"><h5>paragraphs</h5></header>
<p>Lorem ipsum dolor sit amet, <span class="highlight">consectetur</span> adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
@@ -120,8 +132,8 @@
<section id="layout">
<header class="text-center"><h4>flexbox layout</h4></header>
<section class="notes">
- <p><strong>layout.less</strong> includes flexbox based grid system with 12 columns. </p>
- <p>Add the class <span class="label">columns</span> to a container. Add any element you want with classname <span class="label">column</span> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <span class="label">col-[1-12]</span>.</p>
+ <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">
@@ -162,41 +174,53 @@
</div>
</div>
<div class="columns">
- <div class="column col-8">
- <div class="bg-grey">1</div>
+ <div class="column col-6">
+ <div class="bg-grey">col-6</div>
</div>
- <div class="column col-2">
- <div class="bg-grey">2</div>
+ <div class="column col-3">
+ <div class="bg-grey">col-3</div>
</div>
- <div class="column">
- <div class="bg-grey">3</div>
+ <div class="column col-2">
+ <div class="bg-grey">col-2</div>
</div>
- <div class="column">
- <div class="bg-grey">4</div>
+ <div class="column col-1">
+ <div class="bg-grey">col-1</div>
</div>
</div>
<div class="columns">
<div class="column col-2">
- <div class="bg-grey">1</div>
+ <div class="bg-grey">col-2</div>
</div>
<div class="column col-4">
- <div class="bg-grey">2</div>
+ <div class="bg-grey">col-4</div>
</div>
<div class="column col-4">
- <div class="bg-grey">3</div>
+ <div class="bg-grey">col-4</div>
</div>
<div class="column col-2">
- <div class="bg-grey">4</div>
+ <div class="bg-grey">col-2</div>
</div>
</div>
+
+ <!-- layout example -->
+<pre class="code lang-html">
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-3&quot;</span>&gt;col-3&lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-2&quot;</span>&gt;col-2&lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-1&quot;</span>&gt;col-1&lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+</pre>
+
</section>
<section id="tables">
<header class="text-center"><h4>tables</h4></header>
<section class="notes">
- <p><strong>tables.less</strong> sets default styles for tables and data sets.</p>
- <p>Add the class <span class="label">&lt;table&gt;</span> to any table element. The class will add padding, border and emphasized table header. Adding the class <span class="label">selected</span> to a &lt;tr&gt; element will highlight the whole table row. </p>
+ <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">
<thead>
<tr>
@@ -207,7 +231,7 @@
</tr>
</thead>
<tbody>
- <tr>
+ <tr class="selected">
<td>The Shawshank Redemption</td>
<td>2h 22min</td>
<td>Crime, Drama</td>
@@ -219,7 +243,7 @@
<td>Crime, Drama</td>
<td>24 March 1972 <span class="label">USA</span></td>
</tr>
- <tr class="selected">
+ <tr>
<td>Schindler's List</td>
<td>3h 15min</td>
<td>Biography, Drama, History</td>
@@ -233,14 +257,38 @@
</tr>
</tbody>
</table>
+
+ <!-- tables example -->
+<pre class="code lang-html">
+&lt;<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">&quot;table&quot;</span>&gt;
+ &lt;<span class="tag">thead</span>&gt;
+ &lt;<span class="tag">tr</span>&gt;
+ &lt;<span class="tag">th</span>&gt;name&lt;<span class="tag">/th</span>&gt;
+ &lt;<span class="tag">th</span>&gt;duration&lt;<span class="tag">/th</span>&gt;
+ &lt;<span class="tag">th</span>&gt;genre&lt;<span class="tag">/th</span>&gt;
+ &lt;<span class="tag">th</span>&gt;release date&lt;<span class="tag">/th</span>&gt;
+ &lt;<span class="tag">/tr</span>&gt;
+ &lt;<span class="tag">/thead</span>&gt;
+ &lt;<span class="tag">tbody</span>&gt;
+ &lt;<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">&quot;selected&quot;</span>&gt;
+ &lt;<span class="tag">th</span>&gt;The Shawshank Redemption&lt;<span class="tag">/th</span>&gt;
+ &lt;<span class="tag">th</span>&gt;2h 22min&lt;<span class="tag">/th</span>&gt;
+ &lt;<span class="tag">th</span>&gt;Crime, Drama&lt;<span class="tag">/th</span>&gt;
+ &lt;<span class="tag">th</span>&gt;14 October 1994&lt;<span class="tag">/th</span>&gt;
+ &lt;<span class="tag">/tr</span>&gt;
+ &lt;<span class="tag">/tbody</span>&gt;
+&lt;<span class="tag">/table</span>&gt;
+</pre>
+
</section>
<section id="buttons">
<header class="text-center"><h4>buttons</h4></header>
<section class="notes">
- <p><strong>buttons.less</strong> includes simple button style for actions in different types and sizes. </p>
- <p>Add the class <span class="label">btn</span> to &lt;a&gt;, &lt;input&gt; or &lt;button&gt; elements for a default button. There are classes <span class="label">btn-primary</span> and <span class="label">btn-link</span> for predefined primary and link buttons. A button with the class <span class="label">loading</span> can show loading indicator. </p>
+ <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">
<div class="column">
<button class="btn">default button</button>
@@ -256,10 +304,21 @@
</div>
</div>
+ <!-- buttons example -->
+<pre class="code lang-html">
+&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;!-- 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;
+</pre>
+
<header class="text-center"><h5>button sizes</h5></header>
<section class="notes">
- <p>Add the class <span class="label">btn-sm</span> or <span class="label">btn-lg</span> for small or large size. Icons with the class <span class="label">icon</span> can be correctly rendered in each button size. Also, you can add the class <span class="label">btn-block</span> for a full-width button. </p>
+ <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">
<button class="btn btn-lg">large button</button>
@@ -269,19 +328,36 @@
<div class="column">
<button class="btn btn-block">block button</button>
</div>
-
</div>
+
+ <!-- buttons example -->
+<pre class="code lang-html">
+&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;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-sm&quot;</span>&gt;small 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-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</button>
- <button class="btn btn-primary"><span class="icon icon-markunread"></span> normal button</button>
- <button class="btn btn-primary btn-sm"><span class="icon icon-markunread"></span> small button</button>
+ <button class="btn btn-primary btn-lg"><span class="icon icon-markunread"></span> large</button>
+ <button class="btn btn-primary"><span class="icon icon-markunread"></span> normal</button>
+ <button class="btn btn-primary btn-sm"><span class="icon icon-markunread"></span> small</button>
</div>
</div>
+ <!-- buttons example -->
+<pre class="code lang-html">
+&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">span</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/span</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">span</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/span</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">span</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/span</span>&gt; small&lt;<span class="tag">/button</span>&gt;
+</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 <span class="label">btn-group</span> to the container. </p>
+ <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">
@@ -299,12 +375,22 @@
</div>
</div>
</div>
+
+ <!-- button groups example -->
+<pre class="code lang-html">
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;btn-group btn-group-block&quot;</span>&gt;
+ &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;first 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>&gt;second 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>&gt;third button&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+</pre>
+
</section>
<section id="forms">
<header class="text-center"><h4>forms</h4></header>
<section class="notes">
- <p><strong>forms.less</strong> provides the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch. </p>
+ <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>
</section>
<div class="columns">
@@ -319,6 +405,15 @@
<input class="form-input" type="email" id="input-example-2" placeholder="Email" />
</div>
<div class="form-group">
+ <label class="form-label">Gender</label>
+ <label class="form-radio">
+ <input type="radio" name="gender" /> Male
+ </label>
+ <label class="form-radio">
+ <input type="radio" name="gender" checked /> Female
+ </label>
+ </div>
+ <div class="form-group">
<select class="form-select">
<option>Choose an option</option>
<option>Slack</option>
@@ -328,7 +423,7 @@
</div>
<div class="form-group">
<label class="form-switch">
- <input type="checkbox">
+ <input type="checkbox" />
Send me emails with news and tips
</label>
</div>
@@ -337,17 +432,8 @@
<textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
</div>
<div class="form-group">
- <label class="form-label">Gender</label>
- <label class="form-radio">
- <input type="radio" name="gender"> Male
- </label>
- <label class="form-radio">
- <input type="radio" name="gender" checked> Female
- </label>
- </div>
- <div class="form-group">
<label class="form-checkbox">
- <input type="checkbox">
+ <input type="checkbox" />
Remember me
</label>
</div>
@@ -372,6 +458,17 @@
</div>
</div>
<div class="form-group">
+ <label class="form-label col-3">Gender</label>
+ <div class="col-9">
+ <label class="form-radio">
+ <input type="radio" name="gender" /> Male
+ </label>
+ <label class="form-radio">
+ <input type="radio" name="gender" checked /> Female
+ </label>
+ </div>
+ </div>
+ <div class="form-group">
<div class="col-3"></div>
<div class="col-9">
<select class="form-select">
@@ -386,7 +483,7 @@
<div class="col-3"></div>
<div class="col-9">
<label class="form-switch">
- <input type="checkbox">
+ <input type="checkbox" />
Send me emails with news and tips
</label>
</div>
@@ -398,21 +495,10 @@
</div>
</div>
<div class="form-group">
- <label class="form-label col-3">Gender</label>
- <div class="col-9">
- <label class="form-radio">
- <input type="radio" name="gender"> Male
- </label>
- <label class="form-radio">
- <input type="radio" name="gender" checked> Female
- </label>
- </div>
- </div>
- <div class="form-group">
<div class="col-3"></div>
<div class="col-9">
<label class="form-checkbox">
- <input type="checkbox">
+ <input type="checkbox" />
Remember me
</label>
</div>
@@ -428,6 +514,49 @@
</div>
</div>
+ <!-- forms example -->
+<pre class="code lang-html">
+&lt;<span class="tag">form</span>&gt;
+ &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-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-1&quot;</span>&gt;Name&lt;<span class="tag">/label</span>&gt;
+ &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&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;Name&quot;</span> /&gt;
+ &lt;<span class="tag">/div</span>&gt;
+ &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-label&quot;</span>&gt;Gender&lt;<span class="tag">/label</span>&gt;
+ &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> /&gt; Male
+ &lt;<span class="tag">/label</span>&gt;
+ &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-radio&quot;</span>&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;gender&quot;</span> <span class="atn">checked</span> /&gt; Female
+ &lt;<span class="tag">/label</span>&gt;
+ &lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-group&quot;</span>&gt;
+ &lt;<span class="tag">select</span> <span class="atn">class</span>=<span class="atv">&quot;form-select&quot;</span>&gt;
+ &lt;<span class="tag">option</span>&gt;Choose an option&lt;<span class="tag">/option</span>&gt;
+ &lt;<span class="tag">option</span>&gt;Slack&lt;<span class="tag">/option</span>&gt;
+ &lt;<span class="tag">option</span>&gt;Skype&lt;<span class="tag">/option</span>&gt;
+ &lt;<span class="tag">option</span>&gt;Hipchat&lt;<span class="tag">/option</span>&gt;
+ &lt;<span class="tag">/select</span>&gt;
+ &lt;<span class="tag">/div</span>&gt;
+ &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-switch&quot;</span>&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> /&gt;
+ Send me emails with news and tips
+ &lt;<span class="tag">/label</span>&gt;
+ &lt;<span class="tag">/div</span>&gt;
+ &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-label&quot;</span> <span class="atn">for</span>=<span class="atv">&quot;input-example-3&quot;</span>&gt;Message&lt;<span class="tag">/label</span>&gt;
+ &lt;<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;input-example-3&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;Textarea&quot;</span> <span class="atn">rows</span>=<span class="atv">&quot;3&quot;</span>&gt;&lt;<span class="tag">/textarea</span>&gt;
+ &lt;<span class="tag">/div</span>&gt;
+ &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&quot;</span>&gt;
+ &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</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;
+</pre>
+
<header class="text-center"><h5>input groups</h5></header>
<div class="columns">
<div class="column">
@@ -446,48 +575,63 @@
</div>
</section>
- <section id="media">
- <header class="text-center"><h4>media</h4></header>
+ <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">
- <img src="img/osx-el-capitan.jpg" class="img-responsive rounded" />
+ <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" />
</div>
<div class="column col-6">
- <img src="img/osx-el-capitan-2.jpg" class="img-responsive rounded hide-sm" />
+ <img src="demo/img/osx-el-capitan-2.jpg" class="img-responsive rounded hide-sm" />
</div>
</div>
+
+ <!-- images example -->
+<pre class="code lang-html">
+&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-responsive rounded&quot;</span> /&gt;
+</pre>
+
</section>
<section id="avatars">
<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">
- <img src="img/avatar-1.png" class="avatar avatar-xl" />
- <img src="img/avatar-2.png" class="avatar avatar-lg" />
- <img src="img/avatar-3.png" class="avatar" />
- <img src="img/avatar-4.png" class="avatar avatar-sm" />
- <img src="img/avatar-5.png" class="avatar avatar-xs" />
+ <img src="demo/img/avatar-1.png" class="avatar avatar-xl" />
+ <img src="demo/img/avatar-2.png" class="avatar avatar-lg" />
+ <img src="demo/img/avatar-3.png" class="avatar" />
+ <img src="demo/img/avatar-4.png" class="avatar avatar-sm" />
+ <img src="demo/img/avatar-5.png" class="avatar avatar-xs" />
</div>
<div class="column col-3">
<div class="avatar-container">
- <img src="img/avatar-1.png" class="avatar avatar-xl" />
- <img src="img/avatar-2.png" class="avatar avatar-icon" />
+ <img src="demo/img/avatar-1.png" class="avatar avatar-xl" />
+ <img src="demo/img/avatar-2.png" class="avatar avatar-icon" />
</div>
<div class="avatar-container">
- <img src="img/avatar-2.png" class="avatar avatar-lg" />
- <img src="img/avatar-3.png" class="avatar avatar-icon" />
+ <img src="demo/img/avatar-2.png" class="avatar avatar-lg" />
+ <img src="demo/img/avatar-3.png" class="avatar avatar-icon" />
</div>
<div class="avatar-container">
- <img src="img/avatar-3.png" class="avatar" />
- <img src="img/avatar-4.png" class="avatar avatar-icon" />
+ <img src="demo/img/avatar-3.png" class="avatar" />
+ <img src="demo/img/avatar-4.png" class="avatar avatar-icon" />
</div>
<div class="avatar-container">
- <img src="img/avatar-4.png" class="avatar avatar-sm" />
- <img src="img/avatar-5.png" class="avatar avatar-icon" />
+ <img src="demo/img/avatar-4.png" class="avatar avatar-sm" />
+ <img src="demo/img/avatar-5.png" class="avatar avatar-icon" />
</div>
<div class="avatar-container">
- <img src="img/avatar-5.png" class="avatar avatar-xs" />
- <img src="img/avatar-1.png" class="avatar avatar-icon" />
+ <img src="demo/img/avatar-5.png" class="avatar avatar-xs" />
+ <img src="demo/img/avatar-1.png" class="avatar avatar-icon" />
</div>
</div>
<div class="column col-3">
@@ -498,6 +642,20 @@
<div class="avatar avatar-xs" data-initial="YZ" style="background-color: #9ba2dd;"></div>
</div>
</div>
+
+ <!-- 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;
+
+
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-container&quot;</span>&gt;
+ &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;
+ &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-5.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-icon&quot;</span> /&gt;
+&lt;<span class="tag">/div</span>&gt;
+
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5764c6;&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</pre>
+
</section>
<section id="chips">
@@ -524,17 +682,17 @@
</div>
<div class="column">
<div class="chip">
- <img src="img/avatar-1.png" class="avatar avatar-xs" />
+ <img src="demo/img/avatar-1.png" class="avatar avatar-xs" />
<span class="chip-name">Yan Zhu</span>
<button class="btn btn-clear"></button>
</div>
<div class="chip">
- <img src="img/avatar-2.png" class="avatar avatar-xs" />
+ <img src="demo/img/avatar-2.png" class="avatar avatar-xs" />
<span class="chip-name">Yan Zhu</span>
<button class="btn btn-clear"></button>
</div>
<div class="chip">
- <img src="img/avatar-4.png" class="avatar avatar-xs" />
+ <img src="demo/img/avatar-4.png" class="avatar avatar-xs" />
<span class="chip-name">Yan Zhu</span>
<button class="btn btn-clear"></button>
</div>
@@ -555,21 +713,17 @@
<div class="file-icon file-icon-sm" data-type="pdf"></div>
<div class="file-icon file-icon-xs" data-type="png"></div>
</div>
- <div class="column">
-
- </div>
</div>
</section>
<section id="tooltips">
<header class="text-center"><h4>tooltips</h4></header>
<section class="notes">
- <p><strong>tooltips.less</strong> is a label-like component that appears on hover and focus.</p>
- <p>Add the class <span class="label">tooltip</span> and the attribute <span class="label">data-tooltip</span>, which contains the tooltip content, to non self closing elements. And add the class name <span class="label">tooltip-right</span>, <span class="label">tooltip-bottom</span> or <span class="label">tooltip-left</span> to define the position of a tooltip. By default, the tooltip appears above the element.</p>
- <code>&lt;button class=&quot;btn btn-primary tooltip tooltip-right&quot; data-tooltip=&quot;Lorem ipsum dolor sit amet&quot;&gt;right tooltip&lt;/button&gt;</code>
+ <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">
+ <div class="column text-center">
<button class="btn btn-primary tooltip" data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante." data-tooltip-pos="top">top tooltip</button>
</div>
<div class="column">
@@ -582,13 +736,20 @@
<button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum dolor sit amet">left tooltip</button>
</div>
</div>
+
+ <!-- tooltips example -->
+<pre class="code lang-html">
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Lorem ipsum dolor sit amet&quot;</span>&gt;top tooltip&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn tooltip tooltip-right&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Lorem ipsum dolor sit amet&quot;</span>&gt;right tooltip&lt;<span class="tag">/button</span>&gt;
+</pre>
+
</section>
<section id="labels">
<header class="text-center"><h4>labels</h4></header>
<section class="notes">
- <p><strong>labels.less</strong> .</p>
- <p>Add the class <span class="label">label</span> to span elements.</p>
+ <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">
@@ -609,20 +770,21 @@
<div class="column">
<span class="label label-danger">danger label</span>
</div>
- <div class="column">
- <span class="label label-lg">default label</span>
- </div>
- <div class="column">
- <span class="label label-primary label-lg">primary label</span>
- </div>
</div>
+
+ <!-- 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="toasts">
<header class="text-center"><h4>toasts</h4></header>
<section class="notes">
- <p><strong>toasts.less</strong> is used to show alert or information to users.</p>
- <p>Add a container element with the class <span class="label">toast</span>. You can add any text within the container, and even icons. You may also add a close button with the class <span class="label">btn-clear</span> if you need. </p>
+ <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">
@@ -638,6 +800,9 @@
</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">
@@ -664,13 +829,28 @@
</div>
</div>
</div>
+
+ <!-- toasts example -->
+<pre class="code lang-html">
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast&quot;</span>&gt;
+ &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear pull-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+&lt;<span class="tag">/div</span>&gt;
+
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast toast-primary&quot;</span>&gt;
+ &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear pull-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
+ &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-error_outline&quot;</span>&gt;&lt;<span class="tag">/span</span>&gt;
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+&lt;<span class="tag">/div</span>&gt;
+</pre>
+
</section>
<section id="menus">
<header class="text-center"><h4>menus</h4></header>
<section class="notes">
- <p><strong>menus.less</strong> is a vertical list links or buttons for actions and navigations.</p>
- <p>Add a container element with the class <span class="label">menu</span>. And add child elements with the class name <span class="label">menu-item</span>. That is a basic menu component.</p>
+ <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">
@@ -738,10 +918,44 @@
</ul>
</div>
</div>
+
+ <!-- menus example -->
+<pre class="code lang-html">
+&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
+ &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-header&quot;</span>&gt;
+ &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;menu-header-text&quot;</span>&gt;
+ Go to
+ &lt;<span class="tag">/span</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; Slack
+ &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; 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">/a</span>&gt;
+ &lt;<span class="tag">/li</span>&gt;
+&lt;<span class="tag">/ul</span>&gt;
+</pre>
+
</section>
- <section id="breadcrumbs">
- <header class="text-center"><h4>breadcrumbs</h4></header>
+ <section id="navigation">
+ <header class="text-center"><h4>navigation</h4></header>
+ <section class="notes">
+ <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">
@@ -763,10 +977,32 @@
</ul>
</div>
</div>
- </section>
- <section id="tabs">
- <header class="text-center"><h4>tabs</h4></header>
+ <!-- breadcrumbs example -->
+<pre class="code lang-html">
+&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb&quot;</span>&gt;
+ &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+ Home
+ &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;breadcrumb-item&quot;</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+ Profile
+ &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;breadcrumb-item&quot;</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+ Change avatar
+ &lt;<span class="tag">/a</span>&gt;
+ &lt;<span class="tag">/li</span>&gt;
+&lt;<span class="tag">/ul</span>&gt;
+</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">
@@ -817,13 +1053,40 @@
</ul>
</div>
</div>
+
+ <!-- tabs example -->
+<pre class="code lang-html">
+&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab tab-block&quot;</span>&gt;
+ &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+ Music
+ &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;tab-item&quot;</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+ Playlists
+ &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;tab-item&quot;</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+ Radio
+ &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;tab-item&quot;</span>&gt;
+ &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+ Connect
+ &lt;<span class="tag">/a</span>&gt;
+ &lt;<span class="tag">/li</span>&gt;
+&lt;<span class="tag">/ul</span>&gt;
+</pre>
+
</section>
<section id="badges">
<header class="text-center"><h4>badges</h4></header>
<section class="notes">
- <p><strong>badges.less</strong> is often used as unread number indicator.</p>
- <p>Add the class <span class="label">badge</span> to non self closing elements. And add the attribute <span class="label">data-badge</span> to define the content of a badge. The badge will appear in the top-right direction of the element.</p>
+ <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">
@@ -847,10 +1110,21 @@
</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">
+ <p></p>
+ </section>
<div class="columns">
<div class="column">
<div class="modal">
@@ -895,20 +1169,46 @@
</div>
</div>
</div>
+
+ <!-- modals example -->
+<pre class="code lang-html">
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal&quot;</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container&quot;</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-header&quot;</span>&gt;
+ &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear pull-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
+ &lt;<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">&quot;modal-title&quot;</span>&gt;Modal title&lt;<span class="tag">/h6</span>&gt;
+ &lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-body&quot;</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;content&quot;</span>&gt;
+ <span class="com">&lt;!-- content here --&gt;</span>
+ &lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-footer&quot;</span>&gt;
+ &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;Close&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;Share&lt;<span class="tag">/button</span>&gt;
+ &lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+</pre>
+
</section>
<section id="cards">
<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">
<div class="card">
<div class="card-image">
- <img class="img-responsive" src="img/osx-el-capitan.jpg" />
+ <img class="img-responsive" src="demo/img/osx-el-capitan.jpg" />
</div>
<div class="card-header">
<h4 class="card-title">Microsoft</h4>
<h6 class="card-meta">Software and hardware</h6>
</div>
- <div class="card-content">
+ <div class="card-body">
Empower every person and every organization on the planet to achieve more.
</div>
<div class="card-footer">
@@ -923,9 +1223,9 @@
<h6 class="card-meta">Hardware and software</h6>
</div>
<div class="card-image">
- <img class="img-responsive" src="img/osx-yosemite.jpg" />
+ <img class="img-responsive" src="demo/img/osx-yosemite.jpg" />
</div>
- <div class="card-content">
+ <div class="card-body">
To make a contribution to the world by making tools for the mind that advance humankind.
</div>
<div class="card-footer">
@@ -943,7 +1243,7 @@
<h4 class="card-title">Google</h4>
<h6 class="card-meta">Software and hardware</h6>
</div>
- <div class="card-content">
+ <div class="card-body">
Organize the world’s information and make it universally accessible and useful.
</div>
<div class="card-footer">
@@ -952,7 +1252,27 @@
</div>
</div>
</div>
+
+ <!-- cards example -->
+<pre class="code lang-html">
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card&quot;</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-image&quot;</span>&gt;
+ &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-responsive rounded&quot;</span> /&gt;
+ &lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-header&quot;</span>&gt;
+ &lt;<span class="tag">h4</span> <span class="atn">class</span>=<span class="atv">&quot;card-title&quot;</span>&gt;Microsoft&lt;<span class="tag">/h4</span>&gt;
+ &lt;<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">&quot;card-meta&quot;</span>&gt;Software and hardware&lt;<span class="tag">/h6</span>&gt;
+ &lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-body&quot;</span>&gt;
+ To make a contribution to the world by making tools for the mind that advance humankind.
+ &lt;<span class="tag">/div</span>&gt;
+ &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-footer&quot;</span>&gt;
+ &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Do&lt;<span class="tag">/button</span>&gt;
+ &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
+</pre>
+
</section>
</section>
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/src/cards.less b/src/cards.less
index 3a9abc5..3338fd6 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -11,7 +11,7 @@
.card-header,
.card-image,
- .card-content,
+ .card-body,
.card-footer {
padding: 1.5rem 1.5rem 0 1.5rem;
diff --git a/src/labels.less b/src/labels.less
index 1c16f40..aba7cf4 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,15 +1,15 @@
// Labels
.label {
display: inline-block;
- padding: .3rem .4rem;
- font-size: 90%;
+ padding: .2rem .4rem;
+ font-size: .9em;
line-height: 1em;
- color: lighten(@body-font-color, 25%);
+ color: lighten(@body-font-color, 20%);
background-color: @core-border-color;
text-align: center;
white-space: nowrap;
- vertical-align: middle;
- margin: -.3rem .1em 0 .1em;
+ vertical-align: baseline;
+ margin: -.2rem .1em 0 .1em;
border-radius: .2rem;
&.label-primary {
@@ -32,10 +32,4 @@
color: #fff;
background-color: @control-color-danger;
}
-
- &.label-lg {
- font-size: 100%;
- line-height: 1.2;
- padding: .3rem .5rem;
- }
} \ No newline at end of file
diff --git a/src/modals.less b/src/modals.less
index b51f5ca..4ef3652 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -1,7 +1,6 @@
// Modals
.modal {
display: block;
- width: 50vw;
text-align: left;
margin: 0;
padding: 0;
@@ -29,4 +28,9 @@
padding: 1.5rem;
text-align: right;
}
+}
+@media screen and (min-width: 640px) {
+ .modal {
+ width: 64rem;
+ }
} \ No newline at end of file
diff --git a/src/toasts.less b/src/toasts.less
index 9792e50..44becf1 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -34,4 +34,6 @@
background-color: @control-color-danger;
border-color: darken(@control-color-danger, 2%);
}
-} \ No newline at end of file
+}
+
+// TODO: attached toasts \ No newline at end of file
diff --git a/src/typography.less b/src/typography.less
index 0051ba0..817e973 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -50,24 +50,6 @@ blockquote {
color: lighten(@body-font-color, 50%);
}
}
-code,
-pre {
- display: block;
- margin-top: 1em;
- margin-bottom: 1em;
- border-left: .2rem solid @core-color;
- line-height: 1.8rem;
- background-color: lighten(@core-border-color, 4%);
-}
-code {
- padding: 1rem 2rem;
-}
-pre code {
- background-color: transparent;
- border-left: 0;
- margin-top: 0;
- margin-bottom: 0;
-}
ul,
ol {
margin: 0 0 1rem;
@@ -147,4 +129,32 @@ ol {
word-break: break-word;
word-wrap: break-word;
hyphens: auto;
+}
+
+// Code
+pre {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 1.5rem;
+ border-left: .2rem solid @core-color;
+ line-height: 1.8rem;
+ background-color: lighten(@core-border-color, 4%);
+}
+code {
+ padding: .2rem .4rem;
+ margin: -.2rem .1em 0 .1em;
+ border-radius: .2rem;
+ background-color: @core-border-color;
+ font-size: .9em;
+ line-height: 1em;
+ vertical-align: baseline;
+ white-space: nowrap;
+
+ pre & {
+ margin-top: 0;
+ margin-bottom: 0;
+ border-left: 0;
+ background-color: transparent;
+ line-height: 1.8rem;
+ }
} \ No newline at end of file
generated by cgit v1.3.1-23-gd82d (git 2.54.0) at 2026-11-12 14:03:18 +0000