diff options
update buttons, forms, labels, tables, tooltips and example docs
1 files changed, 39 insertions, 21 deletions
| -rw-r--r-- | demo/index.html | 60 |
diff --git a/demo/index.html b/demo/index.html index 426e943..54801fe 100644 --- a/demo/index.html +++ b/demo/index.html @@ -7,13 +7,18 @@ <link rel="stylesheet" href="font/style.css"> <style> header > h4 { - margin-top: 4rem; + margin-top: 6rem; + margin-bottom: 2rem; } .bg-grey { background-color: #efefef; padding: 1rem; border-radius: .3rem; } + .notes { + margin: 2rem 0; + color: #666; + } </style> </head> <body> @@ -21,7 +26,7 @@ <section id="overview"> <header class="text-center"><h3>Project Spectre</h3></header> <header class="text-center"><h4>introduction</h4></header> - <section> + <section class="notes"> <p><a href="https://github.com/picturepan2/spectre" target="_blank">Project Spectre</a> is a lightweight and clean CSS framework for faster and extendable development.</p> <ul> <li>lightweight and clean starting point for your project</li> @@ -33,7 +38,7 @@ <section id="typography"> <header class="text-center"><h4>typography</h4></header> - <section> + <section class="notes"> <p><strong>typography.less</strong> sets default styles for headings, paragraphs, blockquote, lists elements and some text related utilities. </p> </section> @@ -89,8 +94,9 @@ <section id="layout"> <header class="text-center"><h4>flexbox layout</h4></header> - <section> + <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 class <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> </section> <div class="columns"> <div class="column"> @@ -144,7 +150,11 @@ <section id="tables"> <header class="text-center"><h4>tables</h4></header> - <table> + <section class="notes"> + <p><strong>tables.less</strong> sets default styles for tables and data sets.</p> + <p>Add the class <span class="label"><table></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 <tr> element will highlight the whole table row. </p> + </section> + <table class="table"> <thead> <tr> <th>name</th> @@ -184,8 +194,9 @@ <section id="buttons"> <header class="text-center"><h4>buttons</h4></header> - <section> - <p><strong>buttons.less</strong> includes simple button style for actions in different types and sizes. Buttons can show loading indicators. </p> + <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 <a>, <input> or <button> 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> </section> <div class="columns"> <div class="column"> @@ -197,16 +208,19 @@ <button class="btn btn-link loading">link button</button> </div> </div> + <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. Also, you can add the class <span class="label">btn-block</span> for a full-width button.</p> + </section> <div class="columns"> <div class="column"> - <button class="btn btn-sm">small button</button> - <button class="btn btn-sm"><span class="icon icon-markunread"></span> small button</button> - <button class="btn">normal button</button> - <button class="btn"><span class="icon icon-markunread"></span> normal button</button> <button class="btn btn-lg">large button</button> <button class="btn btn-lg"><span class="icon icon-markunread"></span> large button</button> + <button class="btn btn-primary">normal button</button> + <button class="btn btn-primary"><span class="icon icon-markunread"></span> normal button</button> + <button class="btn btn-sm">small button</button> + <button class="btn btn-sm"><span class="icon icon-markunread"></span> small button</button> </div> - </div> <div class="columns"> <div class="column"> @@ -217,6 +231,9 @@ <section id="button-groups"> <header class="text-center"><h4>button groups</h4></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> + </section> <div class="columns"> <div class="column"> <div class="btn-group"> @@ -479,7 +496,7 @@ <section id="fileicons"> <header class="text-center"><h4>file icons</h4></header> - <section> + <section class="notes"> <p><strong>fileicons.less</strong> includes a set of file icons. This part is written entirely in CSS as well. </p> </section> <div class="columns"> @@ -498,8 +515,9 @@ <section id="tooltips"> <header class="text-center"><h4>tooltips</h4></header> - <section> - <p><strong>tooltips.less</strong> is built entirely in CSS. Add the attribute <span class="highlight">data-tooltip</span> and class <span class="highlight">tooltip</span> to non self closing elements. And add the class name <span class="highlight">tooltip-right, tooltip-bottom or tooltip-left</span> to define the position of a tooltip. By default, the tooltip appears above the element.</p> + <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><button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button></code> </section> <div class="columns"> @@ -553,13 +571,13 @@ <div class="columns"> <div class="column"> <div class="toast"> - <button class="btn-clear pull-right"></button> + <button class="btn btn-clear pull-right"></button> <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> <div class="column"> <div class="toast toast-primary"> - <button class="btn-clear pull-right"></button> + <button class="btn btn-clear pull-right"></button> <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> @@ -567,25 +585,25 @@ <div class="columns"> <div class="column"> <div class="toast toast-success"> - <button class="btn-clear pull-right"></button> + <button class="btn btn-clear pull-right"></button> Efficiently unleash cross-media information without cross-media value. </div> </div> <div class="column"> <div class="toast toast-info"> - <button class="btn-clear pull-right"></button> + <button class="btn btn-clear pull-right"></button> Efficiently unleash cross-media information without cross-media value. </div> </div> <div class="column"> <div class="toast toast-warning"> - <button class="btn-clear pull-right"></button> + <button class="btn btn-clear pull-right"></button> Efficiently unleash cross-media information without cross-media value. </div> </div> <div class="column"> <div class="toast toast-danger"> - <button class="btn-clear pull-right"></button> + <button class="btn btn-clear pull-right"></button> Efficiently unleash cross-media information without cross-media value. </div> </div> |