diff options
Merge pull request #165 from picturepan2/feature/0.2.9 v0.2.9
Feature/0.2.9
1 files changed, 34 insertions, 60 deletions
| -rw-r--r-- | docs/components.html | 94 |
diff --git a/docs/components.html b/docs/components.html index 21573b6..6cd802c 100644 --- a/docs/components.html +++ b/docs/components.html @@ -17,7 +17,7 @@ <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">Spectre.css</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"> @@ -173,7 +173,7 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the class <code>is-focused</code> to <code>form-autocomplete-input</code> to make it appear as focus state.</p> + <p>Add a container element with the <code>form-autocomplete</code> class. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state.</p> <p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p> </section> @@ -208,18 +208,6 @@ <<span class="tag">/div</span>> <<span class="tag">/a</span>> <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Yan Zhu"</span> /> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> - Yan Zhu - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> <<span class="tag">/ul</span>> <<span class="tag">/div</span>> </code></pre> @@ -251,14 +239,15 @@ </div> <div class="column col-6 col-xs-12"> <figure class="avatar avatar-xl" data-initial="YZ"></figure> - <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"></figure> - <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"></figure> - <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"></figure> + <figure class="avatar avatar-lg" data-initial="YZ"></figure> + <figure class="avatar" data-initial="YZ"></figure> + <figure class="avatar avatar-sm" data-initial="YZ"></figure> + <figure class="avatar avatar-xs" data-initial="YZ"></figure> </div> </div> <section class="notes"> - <p>Add the class <code>avatar</code> to <img> element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>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>avatar</code> and avatar size class to <div> element. The attribute <code>data-initial</code> is the name appear inside the avatar.</p> + <p>Add the <code>avatar</code> class to <img> element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>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 <code>avatar</code> class and avatar size class to <div> element. The <code>data-initial</code> attribute is the name appear inside the avatar.</p> </section> <div class="columns"> <div class="column col-6 col-xs-12"> @@ -334,7 +323,7 @@ </div> </div> <section class="notes"> - <p>Add the class <code>badge</code> to non self closing elements. And add the attribute <code>data-badge</code> to define the content of a badge. The badge will appear in the top-right direction of the element. </p> + <p>Add the <code>badge</code> class to non self closing elements. And add the <code>data-badge</code> attribute to define the content of a badge. The badge will appear in the top-right direction of the element. </p> <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p> </section> <div class="columns"> @@ -356,7 +345,7 @@ </section> <!-- badges example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">""</span>> +<pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span>> Notifications <<span class="tag">/span</span>> @@ -401,7 +390,7 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>bar</code>. And add child elements with the class <code>bar-item</code>. The width percentage value is needed for every <code>bar-item</code>.</p> + <p>Add a container element with the <code>bar</code> class. And add child elements with the <code>bar-item</code> class. The width percentage value is needed for every <code>bar-item</code>.</p> <p>There is a class <code>bar-sm</code> for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.</p> </section> @@ -511,7 +500,7 @@ <div class="column col-6 col-xs-12"> <div class="card"> <div class="card-image"> - <img class="img-responsive" src="img/osx-yosemite.jpg" /> + <img class="img-responsive" src="img/osx-el-capitan-2.jpg" /> </div> <div class="card-header"> <button class="btn btn-primary float-right"><i class="icon icon-playlist_add"></i></button> @@ -525,7 +514,7 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>card</code>. And add child elements with the class name <code>card-image</code>, <code>card-header</code>, <code>card-content</code> and/or <code>card-footer</code>. The <code>card-image</code> can be placed in any position. </p> + <p>Add a container element with the <code>card</code> class. And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes. The <code>card-image</code> can be placed in any position. </p> </section> <!-- cards example --> @@ -588,7 +577,7 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>chip</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p> + <p>Add a container element with the <code>chip</code> class. And add child text element, buttons or avatars with the <code>avatar</code> class.</p> </section> <!-- chips example --> @@ -671,7 +660,7 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>menu</code>. And add child elements with the classname <code>menu-item</code>. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> + <p>Add a container element with the <code>menu</code> class. And add child elements with the <code>menu-item</code> class. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> </section> <!-- menus example --> @@ -688,18 +677,9 @@ <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Slack <<span class="tag">/a</span>> <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Hipchat - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Skype - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> <span class="com"><!-- menu divider --></span> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/li</span>> + <span class="com"><!-- menu item with badge --></span> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"menu-badge"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>2<<span class="tag">/label</span>> @@ -788,10 +768,10 @@ </div> <section class="notes"> <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p> - <p>Add a container element with the class <code>dropdown</code>. And add a focusable element with the classname <code>dropdown-toggle</code> for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable. If the dropdown is close to the right edge of the browser, you can add the class <code>dropdown-right</code> to the container to prevent it appearing off screen.</p> + <p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable. If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p> </section> <section class="notes"> - <p>Also, you can implement your JS to interact with the dropdown menus by adding the class <code>active</code> to the <code>dropdown</code>.</p> + <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code>.</p> </section> <!-- dropdowns example --> @@ -802,12 +782,7 @@ <<span class="tag">/a</span>> <span class="com"><!-- menu component --></span> <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Slack<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Hipchat<<span class="tag">/a</span>> - <<span class="tag">/li</span>> + ... <<span class="tag">/ul</span>> <<span class="tag">/div</span>> @@ -869,8 +844,8 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>modal</code>. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the class name <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p> - <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class <code>active</code> to the <code>modal</code> container.</p> + <p>Add a container element with the <code>modal</code> class. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p> + <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the <code>active</code> class to the <code>modal</code> container.</p> </section> <!-- modals example --> @@ -887,8 +862,7 @@ <<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-footer"</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>Close<<span class="tag">/button</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Share<<span class="tag">/button</span>> + ... <<span class="tag">/div</span>> <<span class="tag">/div</span>> <<span class="tag">/div</span>> @@ -954,7 +928,7 @@ </div> </div> <section class="notes"> - <p>Add the class <code>modal-sm</code> for a smaller modal dialog. </p> + <p>Add the <code>modal-sm</code> class for a smaller modal dialog. </p> </section> <!-- modals example --> @@ -1009,7 +983,7 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>breadcrumb</code>. And add child elements with the classname <code>breadcrumb-item</code>.</p> + <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p> </section> <!-- breadcrumbs example --> @@ -1077,7 +1051,7 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>tab</code>. And add child elements with the classname <code>tab-item</code>. You can add the class <code>tab-block</code> for a full-width tab. The <code>tab-item</code> or its child <code><a></code> with the class <code>active</code> will be highlighted.</p> + <p>Add a container element with the <code>tab</code> class. And add child elements with the <code>tab-item</code> class. You can add the <code>tab-block</code> class for a full-width tab. The <code>tab-item</code> or its child <a> with the <code>active</code> class will be highlighted.</p> </section> <!-- tabs example --> @@ -1184,7 +1158,7 @@ </div> </div> <section class="notes"> - <p>You could add a search box or buttons inside a tab. Add the class <code>tab-action</code> to the <code>tab-item</code>. </p> + <p>You could add a search box or buttons inside a tab. Add the <code>tab-action</code> class to the <code>tab-item</code>. </p> </section> <!-- tabs with badges example --> @@ -1263,7 +1237,7 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>pagination</code>. And add child elements with the classname <code>page-item</code>. The <code>page-item</code> with the class <code>active</code> will be highlighted.</p> + <p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted.</p> </section> <!-- pagination example --> @@ -1365,7 +1339,7 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>nav</code>. And add child elements with the classname <code>nav-item</code>. The <code>nav-item</code> with the class <code>active</code> will be highlighted.</p> + <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p> </section> <!-- navs example --> @@ -1441,7 +1415,7 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>step</code>. And add child elements with the classname <code>step-item</code>. The <code>step-item</code> with the class <code>active</code> will be highlighted and indicate the current state of progress.</p> + <p>Add a container element with the <code>step</code> class. And add child elements with the <code>step-item</code> class. The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.</p> </section> <!-- steps example --> @@ -1505,7 +1479,7 @@ </div> </div> <section class="notes"> - <p>Add a container with the class <code>tile</code>. And add child elements with the class name <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code>. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p> + <p>Add a container with the <code>tile</code> class. And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p> <p>There are <code>tile-title</code> and <code>tile-meta</code> classes for title and meta text styles.</p> </section> @@ -1528,7 +1502,7 @@ <section class="notes"> <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> - <p>Add the class <code>tile-centered</code> to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p> + <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p> </section> <div class="columns"> <div class="column col-6 col-md-9 col-xs-12"> @@ -1584,7 +1558,7 @@ </div> </div> <section class="notes"> - <p>Add a container element with the class <code>toast</code>. You can add any text within the container, and even icons. You may also add a close button with the class <code>btn-clear</code> if you need. </p> + <p>Add a container element with the <code>toast</code> class. You can add any text within the container, and even icons. You may also add a close button with the <code>btn-clear</code> class if you need. </p> </section> <div class="columns"> <div class="column col-sm-12"> @@ -1607,7 +1581,7 @@ </div> </div> <section class="notes"> - <p>And you can add the class <code>toast-primary</code>, <code>toast-success</code> or <code>toast-danger</code> for additional toast colors.</p> + <p>And you can add the <code>toast-primary</code>, <code>toast-success</code> or <code>toast-danger</code> class for additional toast colors.</p> </section> <!-- toasts example --> @@ -1646,7 +1620,7 @@ </div> <section class="notes"> <p>Tooltips component is built entirely in CSS.</p> - <p>Add the class <code>tooltip</code> and the attribute <code>data-tooltip</code>, which contains the tooltip content, to non self closing elements. And add the class name <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> to define the position of a tooltip. By default, the tooltip appears above the element.</p> + <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements. And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip. By default, the tooltip appears above the element.</p> </section> <!-- tooltips example --> |