diff options
Update docs text
1 files changed, 25 insertions, 25 deletions
| -rw-r--r-- | docs/components.html | 50 |
diff --git a/docs/components.html b/docs/components.html index aaa17f6..7a1b8cb 100644 --- a/docs/components.html +++ b/docs/components.html @@ -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> @@ -258,8 +258,8 @@ </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"> @@ -335,7 +335,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"> @@ -402,7 +402,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> @@ -512,7 +512,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> @@ -526,7 +526,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-body</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 --> @@ -589,7 +589,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 --> @@ -672,7 +672,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 --> @@ -789,10 +789,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 --> @@ -870,8 +870,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 --> @@ -955,7 +955,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 --> @@ -1010,7 +1010,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 --> @@ -1078,7 +1078,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 <code><a></code> with the <code>active</code> class will be highlighted.</p> </section> <!-- tabs example --> @@ -1185,7 +1185,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 --> @@ -1264,7 +1264,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 --> @@ -1366,7 +1366,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 --> @@ -1442,7 +1442,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 --> @@ -1506,7 +1506,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> @@ -1529,7 +1529,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"> @@ -1585,7 +1585,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"> @@ -1608,7 +1608,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 --> @@ -1647,7 +1647,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 --> |