diff options
Merge branch 'master' into gh-pages
# Conflicts:
8 files changed, 1190 insertions, 1812 deletions
| -rw-r--r-- | demo/index.html | 958 | ||||
| -rw-r--r-- | dist/spectre.css | 68 | ||||
| -rw-r--r-- | index.html | 1902 | ||||
| -rw-r--r-- | src/cards.less | 2 | ||||
| -rw-r--r-- | src/labels.less | 16 | ||||
| -rw-r--r-- | src/modals.less | 6 | ||||
| -rw-r--r-- | src/toasts.less | 4 | ||||
| -rw-r--r-- | src/typography.less | 46 |
diff --git a/demo/index.html b/demo/index.html deleted file mode 100644 index ca36a6d..0000000 --- a/demo/index.html +++ /dev/null @@ -1,958 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="robots" content="index, follow"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"/> - <meta name="author" content="https://github.com/picturepan2/spectre"> - <title>Spectre, a lightweight and clean CSS framework for faster and extendable development.</title> - <link rel="stylesheet" href="../dist/spectre.css"> - <link rel="stylesheet" href="font/style.css"> - <style> - header > h4 { - margin-top: 8rem; - margin-bottom: 2rem; - } - .bg-grey { - background-color: #efefef; - padding: 1rem; - border-radius: .3rem; - } - .grid-hero { - margin-top: 10rem; - margin-bottom: 10rem; - } - .grid-hero h3 { - margin-bottom: 5rem; - } - .notes { - margin: 2rem 0; - color: #666; - } - </style> -</head> -<body> - <section class="container bg-grey"> - <section id="overview" class="grid-hero grid-960"> - <header class="text-center"><h3>Project Spectre</h3></header> - <section> - <p><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p> - <ul> - <li>lightweight and clean starting point for your project</li> - <li>flexbox and responsive layout friendly</li> - <li>built in useful components and utilities</li> - </ul> - </section> - <section class="notes text-center"> - <div class="btn-group"> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> - <a href="#get-started" class="btn btn-primary">Documentation</a> - </div> - </section> - </section> - </section> - <section class="container grid-960"> - <section id="get-started"> - <!--<header class="text-center"><h4>get started</h4></header> - <section class="notes"> - <p>You can either manually install Spectre CSS framework to your website or app.</p> - <h5>Bower</h5> - <h5>NPM</h5> - </section>--> - </section> - - <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> - </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> - - <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> - <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - - <header class="text-center"><h5>blockquote</h5></header> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <small>- Source</small> - </blockquote> - - <header class="text-center"><h5>lists</h5></header> - <div class="columns"> - <div class="column col-6"> - <ul class="list"> - <li>list item 1</li> - <li>list item 2 - <ul> - <li>list item 2.1</li> - <li>list item 2.2</li> - <li>list item 2.3</li> - </ul> - </li> - <li>list item 3</li> - </ul> - </div> - <div class="column col-6"> - <ol class="list"> - <li>list item 1</li> - <li>list item 2 - <ol> - <li>list item 2.1</li> - <li>list item 2.2</li> - <li>list item 2.3</li> - </ol> - </li> - <li>list item 3</li> - </ol> - </div> - </div> - </section> - - <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> - </section> - <div class="columns"> - <div class="column"> - <div class="bg-grey">1</div> - </div> - <div class="column"> - <div class="bg-grey">2</div> - </div> - <div class="column"> - <div class="bg-grey">3</div> - </div> - <div class="column"> - <div class="bg-grey">4</div> - </div> - <div class="column"> - <div class="bg-grey">5</div> - </div> - <div class="column"> - <div class="bg-grey">6</div> - </div> - <div class="column"> - <div class="bg-grey">7</div> - </div> - <div class="column"> - <div class="bg-grey">8</div> - </div> - <div class="column"> - <div class="bg-grey">9</div> - </div> - <div class="column"> - <div class="bg-grey">10</div> - </div> - <div class="column"> - <div class="bg-grey">11</div> - </div> - <div class="column"> - <div class="bg-grey">12</div> - </div> - </div> - <div class="columns"> - <div class="column col-8"> - <div class="bg-grey">1</div> - </div> - <div class="column col-2"> - <div class="bg-grey">2</div> - </div> - <div class="column"> - <div class="bg-grey">3</div> - </div> - <div class="column"> - <div class="bg-grey">4</div> - </div> - </div> - <div class="columns"> - <div class="column col-2"> - <div class="bg-grey">1</div> - </div> - <div class="column col-4"> - <div class="bg-grey">2</div> - </div> - <div class="column col-4"> - <div class="bg-grey">3</div> - </div> - <div class="column col-2"> - <div class="bg-grey">4</div> - </div> - </div> - </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"><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> - <th>duration</th> - <th>genre</th> - <th>release date</th> - </tr> - </thead> - <tbody> - <tr> - <td>The Shawshank Redemption</td> - <td>2h 22min</td> - <td>Crime, Drama</td> - <td>14 October 1994 <span class="label">USA</span></td> - </tr> - <tr> - <td>The Godfather</td> - <td>2h 55min</td> - <td>Crime, Drama</td> - <td>24 March 1972 <span class="label">USA</span></td> - </tr> - <tr class="selected"> - <td>Schindler's List</td> - <td>3h 15min</td> - <td>Biography, Drama, History</td> - <td>4 February 1994 <span class="label">USA</span></td> - </tr> - <tr> - <td>Se7en</td> - <td>2h 7min</td> - <td>Crime, Drama, Mystery</td> - <td>24 March 1972 <span class="label">USA</span></td> - </tr> - </tbody> - </table> - </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 <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"> - <button class="btn">default button</button> - <button class="btn loading">default button</button> - </div> - <div class="column"> - <button class="btn btn-primary">primary button</button> - <button class="btn btn-primary loading">primary button</button> - </div> - <div class="column"> - <button class="btn btn-link">link button</button> - <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. 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> - </section> - <div class="columns"> - <div class="column"> - <button class="btn btn-lg">large button</button> - <button class="btn">normal button</button> - <button class="btn btn-sm">small button</button> - </div> - <div class="column"> - <button class="btn btn-block">block button</button> - </div> - - </div> - <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> - </div> - </div> - - <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> - </section> - <div class="columns"> - <div class="column"> - <div class="btn-group"> - <button class="btn">first button</button> - <button class="btn">second button</button> - <button class="btn">third button</button> - </div> - </div> - <div class="column"> - <div class="btn-group btn-group-block"> - <button class="btn btn-primary">first button</button> - <button class="btn btn-primary">second button</button> - <button class="btn btn-primary">third button</button> - </div> - </div> - </div> - </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> </p> - </section> - <div class="columns"> - <div class="column col-6"> - <form> - <div class="form-group"> - <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-2">Email</label> - <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> - </div> - <div class="form-group"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - <div class="form-group"> - <label class="form-switch"> - <input type="checkbox"> - Send me emails with news and tips - </label> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-3">Message</label> - <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"> - Remember me - </label> - </div> - <div class="form-group"> - <button class="btn btn-primary">Submit</button> - <button class="btn btn-link">Cancel</button> - </div> - </form> - </div> - <div class="column col-6"> - <form class="form-horizontal"> - <div class="form-group"> - <label class="form-label col-3" for="input-example-4">Name</label> - <div class="col-9"> - <input class="form-input" type="text" id="input-example-4" placeholder="Name" /> - </div> - </div> - <div class="form-group"> - <label class="form-label col-3" for="input-example-5">Email</label> - <div class="col-9"> - <input class="form-input" type="email" id="input-example-5" placeholder="Email" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <label class="form-switch"> - <input type="checkbox"> - Send me emails with news and tips - </label> - </div> - </div> - <div class="form-group"> - <label class="form-label col-3" for="input-example-6">Message</label> - <div class="col-9"> - <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea> - </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"> - Remember me - </label> - </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <button class="btn btn-primary">Submit</button> - <button class="btn btn-link">Cancel</button> - </div> - </div> - </form> - </div> - </div> - - <header class="text-center"><h5>input groups</h5></header> - <div class="columns"> - <div class="column"> - <div class="input-group"> - <span class="input-group-addon">slack.com/</span> - <input type="text" class="form-input" placeholder="site name" /> - </div> - </div> - <div class="column"> - <div class="input-group"> - <span class="input-group-addon">slack.com/</span> - <input type="text" class="form-input" placeholder="site name" /> - <button class="btn btn-primary input-group-btn">Submit</button> - </div> - </div> - </div> - </section> - - <section id="media"> - <header class="text-center"><h4>media</h4></header> - <div class="columns"> - <div class="column col-6"> - <img src="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" /> - </div> - </div> - </section> - - <section id="avatars"> - <header class="text-center"><h4>avatars</h4></header> - <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" /> - </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" /> - </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" /> - </div> - <div class="avatar-container"> - <img src="img/avatar-3.png" class="avatar" /> - <img src="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" /> - </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" /> - </div> - </div> - <div class="column col-3"> - <div class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></div> - <div class="avatar avatar-lg" data-initial="YZ" style="background-color: #6874cc;"></div> - <div class="avatar" data-initial="YZ" style="background-color: #7983d2;"></div> - <div class="avatar avatar-sm" data-initial="YZ" style="background-color: #8a93d7;"></div> - <div class="avatar avatar-xs" data-initial="YZ" style="background-color: #9ba2dd;"></div> - </div> - </div> - </section> - - <section id="chips"> - <header class="text-center"><h4>chips</h4></header> - <div class="columns"> - <div class="column"> - <div class="chip"> - <span class="icon icon-favorite_border"></span> - <span class="chip-name">Crime</span> - <button class="btn btn-clear"></button> - </div> - <div class="chip"> - <span class="chip-name">Drama</span> - <button class="btn btn-clear"></button> - </div> - <div class="chip"> - <span class="chip-name">Biography</span> - <button class="btn btn-clear"></button> - </div> - <div class="chip"> - <span class="chip-name">Mystery</span> - <button class="btn btn-clear"></button> - </div> - </div> - <div class="column"> - <div class="chip"> - <img src="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" /> - <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" /> - <span class="chip-name">Yan Zhu</span> - <button class="btn btn-clear"></button> - </div> - </div> - </div> - </section> - - <section id="fileicons"> - <header class="text-center"><h4>file icons</h4></header> - <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"> - <div class="column"> - <div class="file-icon file-icon-xl" data-type="docx"></div> - <div class="file-icon file-icon-lg" data-type="pptx"></div> - <div class="file-icon" data-type="xlsx"></div> - <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><button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button></code> - </section> - <div class="columns"> - <div class="column"> - <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"> - <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button> - </div> - <div class="column"> - <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum dolor sit amet">bottom tooltip</button> - </div> - <div class="column"> - <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum dolor sit amet">left tooltip</button> - </div> - </div> - </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> - </section> - <div class="columns"> - <div class="column"> - <span class="label">default label</span> - </div> - <div class="column"> - <span class="label label-primary">primary label</span> - </div> - <div class="column"> - <span class="label label-success">success label</span> - </div> - <div class="column"> - <span class="label label-info">info label</span> - </div> - <div class="column"> - <span class="label label-warning">warning label</span> - </div> - <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> - </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> - </section> - <div class="columns"> - <div class="column"> - <div class="toast"> - <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 btn-clear pull-right"></button> - <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - </div> - <div class="columns"> - <div class="column"> - <div class="toast toast-success"> - <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 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 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 btn-clear pull-right"></button> - Efficiently unleash cross-media information without cross-media value. - </div> - </div> - </div> - </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> - </section> - <div class="columns"> - <div class="column col-3"> - <menu class="menu"> - <menuitem class="menu-item"> - <a href="#" class="active"> - My profile - </a> - </menuitem> - <menuitem class="divider"></menuitem> - <menuitem class="menu-item"> - <a href="#"> - Settings - </a> - </menuitem> - <menuitem class="menu-item"> - <a href="#"> - Logout - </a> - </menuitem> - </menu> - </div> - <div class="column col-3"> - <ul class="menu"> - <li class="menu-header"> - <span class="menu-header-text"> - Go to - </span> - </li> - <li class="menu-item"> - <a href="#"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#"> - Hipchat - </a> - </li> - <li class="menu-item"> - Skype - </li> - </ul> - </div> - <div class="column col-3"> - <ul class="menu"> - <li class="menu-header"> - <span class="menu-header-text"> - Go to - </span> - </li> - <li class="menu-item"> - <a href="#"> - <span class="icon icon-link"></span> Slack - </a> - </li> - <li class="menu-item"> - <a href="#"> - <span class="icon icon-link"></span> Hipchat - </a> - </li> - <li class="menu-item"> - <span class="icon icon-link"></span> Skype - </li> - </ul> - </div> - </div> - </section> - - <section id="breadcrumbs"> - <header class="text-center"><h4>breadcrumbs</h4></header> - <div class="columns"> - <div class="column"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"> - <a href="#"> - Home - </a> - </li> - <li class="breadcrumb-item"> - <a href="#"> - Profile - </a> - </li> - <li class="breadcrumb-item"> - <a href="#"> - Change avatar - </a> - </li> - </ul> - </div> - </div> - </section> - - <section id="tabs"> - <header class="text-center"><h4>tabs</h4></header> - <div class="columns"> - <div class="column"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#"> - Connect - </a> - </li> - </ul> - </div> - <div class="column"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#"> - Connect - </a> - </li> - </ul> - </div> - </div> - </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> - </section> - <div class="columns"> - <div class="column"> - <span class="badge" data-badge="1"> - Notifications - </span> - </div> - <div class="column"> - <span class="badge" data-badge="99"> - Notifications - </span> - </div> - <div class="column"> - <span class="badge" data-badge="999"> - Notifications - </span> - </div> - <div class="column"> - <span class="badge" data-badge="♀"> - Notifications - </span> - </div> - </div> - </section> - - <section id="modals"> - <header class="text-center"><h4>modals</h4></header> - <div class="columns"> - <div class="column"> - <div class="modal"> - <div class="modal-container" role="document"> - <div class="modal-header"> - <button type="button" class="btn btn-clear pull-right" aria-label="Close"></button> - <h6 class="modal-title">Modal title</h6> - </div> - <div class="modal-body"> - <div class="content"> - <p> - This is the content inside the modal. - </p> - <h4>Lorem ipsum</h4> - <p> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. - </p> - <p> - Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs. - </p> - <h4>Cupcake ipsum</h4> - <p> - Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels. - </p> - <p> - De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve. - </p> - <h4>Candy ipsum</h4> - <p> - Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar. - </p> - <p> - Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow. - </p> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-link">Close</button> - <button class="btn btn-primary">Share</button> - </div> - </div> - </div> - </div> - </div> - </section> - <section id="cards"> - <header class="text-center"><h4>cards</h4></header> - <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" /> - </div> - <div class="card-header"> - <h4 class="card-title">Microsoft</h4> - <h6 class="card-meta">Software and hardware</h6> - </div> - <div class="card-content"> - Empower every person and every organization on the planet to achieve more. - </div> - <div class="card-footer"> - <a href="#" class="btn btn-primary">Do</a> - </div> - </div> - </div> - <div class="column col-4"> - <div class="card"> - <div class="card-header"> - <h4 class="card-title">Apple</h4> - <h6 class="card-meta">Hardware and software</h6> - </div> - <div class="card-image"> - <img class="img-responsive" src="img/osx-yosemite.jpg" /> - </div> - <div class="card-content"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <div class="btn-group btn-group-block"> - <button class="btn">Buy</button> - <button class="btn">Buy</button> - <button class="btn">Buy</button> - </div> - </div> - </div> - </div> - <div class="column col-4"> - <div class="card"> - <div class="card-header"> - <h4 class="card-title">Google</h4> - <h6 class="card-meta">Software and hardware</h6> - </div> - <div class="card-content"> - Organize the world’s information and make it universally accessible and useful. - </div> - <div class="card-footer"> - <a href="#" class="btn btn-primary">Ad</a> - </div> - </div> - </div> - </div> - </section> - </section> -</body> -</html>
\ No newline at end of file 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; @@ -29,351 +29,391 @@ margin: 2rem 0; color: #666; } + .code .com { + color: #adadad; + } + .code .tag { + color: #4452c0; + } + .code .atn { + color: #4452c0; + } + .code .atv { + color: #e06870; + } </style> </head> <body> -<section class="container bg-grey"> - <section id="overview" class="grid-hero grid-960"> - <header class="text-center"><h3>Project Spectre</h3></header> - <section> - <p><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p> - <ul> - <li>lightweight and clean starting point for your project</li> - <li>flexbox and responsive layout friendly</li> - <li>built in useful components and utilities</li> - </ul> - </section> - <section class="notes text-center"> - <div class="btn-group"> - <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> - <a href="#get-started" class="btn btn-primary">Documentation</a> - </div> + <section class="container bg-grey"> + <section id="overview" class="grid-hero grid-960"> + <header class="text-center"><h3>Project Spectre</h3></header> + <section> + <p><strong>Project Spectre</strong> is a lightweight and clean CSS framework for faster and extendable development.</p> + <ul> + <li>lightweight and clean starting point for your project</li> + <li>flexbox and responsive layout friendly</li> + <li>built in useful components and utilities</li> + </ul> + </section> + <section class="notes text-center"> + <div class="btn-group"> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + <a href="#get-started" class="btn btn-primary">Documentation</a> + </div> + </section> </section> </section> -</section> -<section class="container grid-960"> - <section id="get-started"> - <!--<header class="text-center"><h4>get started</h4></header> - <section class="notes"> - <p>You can either manually install Spectre CSS framework to your website or app.</p> - <h5>Bower</h5> - <h5>NPM</h5> - </section>--> - </section> - - <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> + <section class="container grid-960"> + <section id="get-started"> + <!--<header class="text-center"><h4>get started</h4></header> + <section class="notes"> + <p>You can either manually install Spectre CSS framework to your website or app.</p> + <h5>Bower</h5> + <h5>NPM</h5> + </section>--> </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> + <section id="typography"> + <header class="text-center"><h4>typography</h4></header> + <section class="notes"> + <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>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> - <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <header class="text-center"><h5>headings</h5></header> + <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>blockquote</h5></header> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <small>- Source</small> - </blockquote> + <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> + <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <header class="text-center"><h5>lists</h5></header> - <div class="columns"> - <div class="column col-6"> - <ul class="list"> - <li>list item 1</li> - <li>list item 2 - <ul> - <li>list item 2.1</li> - <li>list item 2.2</li> - <li>list item 2.3</li> - </ul> - </li> - <li>list item 3</li> - </ul> - </div> - <div class="column col-6"> - <ol class="list"> - <li>list item 1</li> - <li>list item 2 - <ol> - <li>list item 2.1</li> - <li>list item 2.2</li> - <li>list item 2.3</li> - </ol> - </li> - <li>list item 3</li> - </ol> - </div> - </div> - </section> + <header class="text-center"><h5>blockquote</h5></header> + <blockquote> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> + <small>- Source</small> + </blockquote> - <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> - </section> - <div class="columns"> - <div class="column"> - <div class="bg-grey">1</div> - </div> - <div class="column"> - <div class="bg-grey">2</div> - </div> - <div class="column"> - <div class="bg-grey">3</div> - </div> - <div class="column"> - <div class="bg-grey">4</div> - </div> - <div class="column"> - <div class="bg-grey">5</div> - </div> - <div class="column"> - <div class="bg-grey">6</div> - </div> - <div class="column"> - <div class="bg-grey">7</div> - </div> - <div class="column"> - <div class="bg-grey">8</div> - </div> - <div class="column"> - <div class="bg-grey">9</div> - </div> - <div class="column"> - <div class="bg-grey">10</div> - </div> - <div class="column"> - <div class="bg-grey">11</div> - </div> - <div class="column"> - <div class="bg-grey">12</div> - </div> - </div> - <div class="columns"> - <div class="column col-8"> - <div class="bg-grey">1</div> - </div> - <div class="column col-2"> - <div class="bg-grey">2</div> - </div> - <div class="column"> - <div class="bg-grey">3</div> - </div> - <div class="column"> - <div class="bg-grey">4</div> - </div> - </div> - <div class="columns"> - <div class="column col-2"> - <div class="bg-grey">1</div> + <header class="text-center"><h5>lists</h5></header> + <div class="columns"> + <div class="column col-6"> + <ul class="list"> + <li>list item 1</li> + <li>list item 2 + <ul> + <li>list item 2.1</li> + <li>list item 2.2</li> + <li>list item 2.3</li> + </ul> + </li> + <li>list item 3</li> + </ul> + </div> + <div class="column col-6"> + <ol class="list"> + <li>list item 1</li> + <li>list item 2 + <ol> + <li>list item 2.1</li> + <li>list item 2.2</li> + <li>list item 2.3</li> + </ol> + </li> + <li>list item 3</li> + </ol> + </div> </div> - <div class="column col-4"> - <div class="bg-grey">2</div> + </section> + + <section id="layout"> + <header class="text-center"><h4>flexbox layout</h4></header> + <section class="notes"> + <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p> + <p>Add the class <code class="label">columns</code> to a container. And add any element you want with classname <code class="label">column</code> inside the container. These columns will take up the space equally. You can specific the width of each column by adding class <code class="label">col-[1-12]</code>.</p> + </section> + <div class="columns"> + <div class="column"> + <div class="bg-grey">1</div> + </div> + <div class="column"> + <div class="bg-grey">2</div> + </div> + <div class="column"> + <div class="bg-grey">3</div> + </div> + <div class="column"> + <div class="bg-grey">4</div> + </div> + <div class="column"> + <div class="bg-grey">5</div> + </div> + <div class="column"> + <div class="bg-grey">6</div> + </div> + <div class="column"> + <div class="bg-grey">7</div> + </div> + <div class="column"> + <div class="bg-grey">8</div> + </div> + <div class="column"> + <div class="bg-grey">9</div> + </div> + <div class="column"> + <div class="bg-grey">10</div> + </div> + <div class="column"> + <div class="bg-grey">11</div> + </div> + <div class="column"> + <div class="bg-grey">12</div> + </div> </div> - <div class="column col-4"> - <div class="bg-grey">3</div> + <div class="columns"> + <div class="column col-6"> + <div class="bg-grey">col-6</div> + </div> + <div class="column col-3"> + <div class="bg-grey">col-3</div> + </div> + <div class="column col-2"> + <div class="bg-grey">col-2</div> + </div> + <div class="column col-1"> + <div class="bg-grey">col-1</div> + </div> </div> - <div class="column col-2"> - <div class="bg-grey">4</div> + <div class="columns"> + <div class="column col-2"> + <div class="bg-grey">col-2</div> + </div> + <div class="column col-4"> + <div class="bg-grey">col-4</div> + </div> + <div class="column col-4"> + <div class="bg-grey">col-4</div> + </div> + <div class="column col-2"> + <div class="bg-grey">col-2</div> + </div> </div> - </div> - </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"><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> - <th>duration</th> - <th>genre</th> - <th>release date</th> - </tr> - </thead> - <tbody> - <tr> - <td>The Shawshank Redemption</td> - <td>2h 22min</td> - <td>Crime, Drama</td> - <td>14 October 1994 <span class="label">USA</span></td> - </tr> - <tr> - <td>The Godfather</td> - <td>2h 55min</td> - <td>Crime, Drama</td> - <td>24 March 1972 <span class="label">USA</span></td> - </tr> - <tr class="selected"> - <td>Schindler's List</td> - <td>3h 15min</td> - <td>Biography, Drama, History</td> - <td>4 February 1994 <span class="label">USA</span></td> - </tr> - <tr> - <td>Se7en</td> - <td>2h 7min</td> - <td>Crime, Drama, Mystery</td> - <td>24 March 1972 <span class="label">USA</span></td> - </tr> - </tbody> - </table> - </section> + <!-- layout example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-3"</span>>col-3<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-2"</span>>col-2<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-1"</span>>col-1<<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</pre> - <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 <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"> - <button class="btn">default button</button> - <button class="btn loading">default button</button> - </div> - <div class="column"> - <button class="btn btn-primary">primary button</button> - <button class="btn btn-primary loading">primary button</button> - </div> - <div class="column"> - <button class="btn btn-link">link button</button> - <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. 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> + <section id="tables"> + <header class="text-center"><h4>tables</h4></header> + <section class="notes"> + <p><strong>Tables</strong> include default styles for tables and data sets.</p> + <p>Add the class <code class="label">table</code> to any <table> element. The class will add padding, border and emphasized table header. Use the class <code class="label">selected</code> to make <tr> element highlighted. </p> + </section> + + <table class="table"> + <thead> + <tr> + <th>name</th> + <th>duration</th> + <th>genre</th> + <th>release date</th> + </tr> + </thead> + <tbody> + <tr class="selected"> + <td>The Shawshank Redemption</td> + <td>2h 22min</td> + <td>Crime, Drama</td> + <td>14 October 1994 <span class="label">USA</span></td> + </tr> + <tr> + <td>The Godfather</td> + <td>2h 55min</td> + <td>Crime, Drama</td> + <td>24 March 1972 <span class="label">USA</span></td> + </tr> + <tr> + <td>Schindler's List</td> + <td>3h 15min</td> + <td>Biography, Drama, History</td> + <td>4 February 1994 <span class="label">USA</span></td> + </tr> + <tr> + <td>Se7en</td> + <td>2h 7min</td> + <td>Crime, Drama, Mystery</td> + <td>24 March 1972 <span class="label">USA</span></td> + </tr> + </tbody> + </table> + + <!-- tables example --> +<pre class="code lang-html"> +<<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table"</span>> + <<span class="tag">thead</span>> + <<span class="tag">tr</span>> + <<span class="tag">th</span>>name<<span class="tag">/th</span>> + <<span class="tag">th</span>>duration<<span class="tag">/th</span>> + <<span class="tag">th</span>>genre<<span class="tag">/th</span>> + <<span class="tag">th</span>>release date<<span class="tag">/th</span>> + <<span class="tag">/tr</span>> + <<span class="tag">/thead</span>> + <<span class="tag">tbody</span>> + <<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">"selected"</span>> + <<span class="tag">th</span>>The Shawshank Redemption<<span class="tag">/th</span>> + <<span class="tag">th</span>>2h 22min<<span class="tag">/th</span>> + <<span class="tag">th</span>>Crime, Drama<<span class="tag">/th</span>> + <<span class="tag">th</span>>14 October 1994<<span class="tag">/th</span>> + <<span class="tag">/tr</span>> + <<span class="tag">/tbody</span>> +<<span class="tag">/table</span>> +</pre> + </section> - <div class="columns"> - <div class="column"> - <button class="btn btn-lg">large button</button> - <button class="btn">normal button</button> - <button class="btn btn-sm">small button</button> - </div> - <div class="column"> - <button class="btn btn-block">block button</button> - </div> - </div> - <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> + <section id="buttons"> + <header class="text-center"><h4>buttons</h4></header> + <section class="notes"> + <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p> + <p>Add the class <code class="label">btn</code> to <a>, <input> or <button> 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> + <button class="btn loading">default button</button> + </div> + <div class="column"> + <button class="btn btn-primary">primary button</button> + <button class="btn btn-primary loading">primary button</button> + </div> + <div class="column"> + <button class="btn btn-link">link button</button> + <button class="btn btn-link loading">link button</button> + </div> </div> - </div> - <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> - </section> - <div class="columns"> - <div class="column"> - <div class="btn-group"> - <button class="btn">first button</button> - <button class="btn">second button</button> - <button class="btn">third button</button> + <!-- buttons example --> +<pre class="code lang-html"> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>default button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>primary button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>link button<<span class="tag">/button</span>> + +<span class="com"><!-- a button with loading state --></span> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> +</pre> + + <header class="text-center"><h5>button sizes</h5></header> + <section class="notes"> + <p>Add the class <code class="label">btn-sm</code> or <code class="label">btn-lg</code> for small or large button size. Also, you can add the class <code class="label">btn-block</code> for a full-width button. </p> + </section> + + <div class="columns"> + <div class="column"> + <button class="btn btn-lg">large button</button> + <button class="btn">normal button</button> + <button class="btn btn-sm">small button</button> + </div> + <div class="column"> + <button class="btn btn-block">block button</button> </div> </div> - <div class="column"> - <div class="btn-group btn-group-block"> - <button class="btn btn-primary">first button</button> - <button class="btn btn-primary">second button</button> - <button class="btn btn-primary">third button</button> + + <!-- buttons example --> +<pre class="code lang-html"> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-sm"</span>>small button<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-block"</span>>block button<<span class="tag">/button</span>> +</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 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> - </div> - </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> </p> - </section> - <div class="columns"> - <div class="column col-6"> - <form> - <div class="form-group"> - <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-2">Email</label> - <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> - </div> - <div class="form-group"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - <div class="form-group"> - <label class="form-switch"> - <input type="checkbox"> - Send me emails with news and tips - </label> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-3">Message</label> - <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"> - Remember me - </label> + <!-- buttons example --> +<pre class="code lang-html"> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-lg"</span>><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/span</span>> large<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/span</span>> normal<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm"</span>><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/span</span>> small<<span class="tag">/button</span>> +</pre> + + <header class="text-center"><h5>button groups</h5></header> + <section class="notes"> + <p>If you want to use buttons as a group, add the class <code class="label">btn-group</code> to the container. You can add the class <code class="label">btn-group-block</code> for a full-width button group.</p> + </section> + <div class="columns"> + <div class="column"> + <div class="btn-group"> + <button class="btn">first button</button> + <button class="btn">second button</button> + <button class="btn">third button</button> </div> - <div class="form-group"> - <button class="btn btn-primary">Submit</button> - <button class="btn btn-link">Cancel</button> + </div> + <div class="column"> + <div class="btn-group btn-group-block"> + <button class="btn btn-primary">first button</button> + <button class="btn btn-primary">second button</button> + <button class="btn btn-primary">third button</button> </div> - </form> + </div> </div> - <div class="column col-6"> - <form class="form-horizontal"> - <div class="form-group"> - <label class="form-label col-3" for="input-example-4">Name</label> - <div class="col-9"> - <input class="form-input" type="text" id="input-example-4" placeholder="Name" /> + + <!-- button groups example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group btn-group-block"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>first button<<span class="tag">/button</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>second button<<span class="tag">/button</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>third button<<span class="tag">/button</span>> +<<span class="tag">/div</span>> +</pre> + + </section> + + <section id="forms"> + <header class="text-center"><h4>forms</h4></header> + <section class="notes"> + <p><strong>Forms</strong> provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch. </p> + <p> </p> + </section> + <div class="columns"> + <div class="column col-6"> + <form> + <div class="form-group"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> </div> - </div> - <div class="form-group"> - <label class="form-label col-3" for="input-example-5">Email</label> - <div class="col-9"> - <input class="form-input" type="email" id="input-example-5" placeholder="Email" /> + <div class="form-group"> + <label class="form-label" for="input-example-2">Email</label> + <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> + <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> @@ -381,578 +421,858 @@ <option>Hipchat</option> </select> </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> + <div class="form-group"> <label class="form-switch"> - <input type="checkbox"> + <input type="checkbox" /> Send me emails with news and tips </label> </div> - </div> - <div class="form-group"> - <label class="form-label col-3" for="input-example-6">Message</label> - <div class="col-9"> - <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea> + <div class="form-group"> + <label class="form-label" for="input-example-3">Message</label> + <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> </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"> + <div class="form-group"> <label class="form-checkbox"> - <input type="checkbox"> + <input type="checkbox" /> Remember me </label> </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> + <div class="form-group"> <button class="btn btn-primary">Submit</button> <button class="btn btn-link">Cancel</button> </div> - </div> - </form> + </form> + </div> + <div class="column col-6"> + <form class="form-horizontal"> + <div class="form-group"> + <label class="form-label col-3" for="input-example-4">Name</label> + <div class="col-9"> + <input class="form-input" type="text" id="input-example-4" placeholder="Name" /> + </div> + </div> + <div class="form-group"> + <label class="form-label col-3" for="input-example-5">Email</label> + <div class="col-9"> + <input class="form-input" type="email" id="input-example-5" placeholder="Email" /> + </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"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + <div class="form-group"> + <div class="col-3"></div> + <div class="col-9"> + <label class="form-switch"> + <input type="checkbox" /> + Send me emails with news and tips + </label> + </div> + </div> + <div class="form-group"> + <label class="form-label col-3" for="input-example-6">Message</label> + <div class="col-9"> + <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea> + </div> + </div> + <div class="form-group"> + <div class="col-3"></div> + <div class="col-9"> + <label class="form-checkbox"> + <input type="checkbox" /> + Remember me + </label> + </div> + </div> + <div class="form-group"> + <div class="col-3"></div> + <div class="col-9"> + <button class="btn btn-primary">Submit</button> + <button class="btn btn-link">Cancel</button> + </div> + </div> + </form> + </div> </div> - </div> - <header class="text-center"><h5>input groups</h5></header> - <div class="columns"> - <div class="column"> - <div class="input-group"> - <span class="input-group-addon">slack.com/</span> - <input type="text" class="form-input" placeholder="site name" /> + <!-- forms example --> +<pre class="code lang-html"> +<<span class="tag">form</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span>>Gender<<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> /> Male + <<span class="tag">/label</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> <span class="atn">checked</span> /> Female + <<span class="tag">/label</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">select</span> <span class="atn">class</span>=<span class="atv">"form-select"</span>> + <<span class="tag">option</span>>Choose an option<<span class="tag">/option</span>> + <<span class="tag">option</span>>Slack<<span class="tag">/option</span>> + <<span class="tag">option</span>>Skype<<span class="tag">/option</span>> + <<span class="tag">option</span>>Hipchat<<span class="tag">/option</span>> + <<span class="tag">/select</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-switch"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> + Send me emails with news and tips + <<span class="tag">/label</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-3"</span>>Message<<span class="tag">/label</span>> + <<span class="tag">textarea</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">id</span>=<span class="atv">"input-example-3"</span> <span class="atn">placeholder</span>=<span class="atv">"Textarea"</span> <span class="atn">rows</span>=<span class="atv">"3"</span>><<span class="tag">/textarea</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-checkbox"</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> + Remember me + <<span class="tag">/label</span>> + <<span class="tag">/div</span>> +<<span class="tag">/form</span>> +</pre> + + <header class="text-center"><h5>input groups</h5></header> + <div class="columns"> + <div class="column"> + <div class="input-group"> + <span class="input-group-addon">slack.com/</span> + <input type="text" class="form-input" placeholder="site name" /> + </div> </div> - </div> - <div class="column"> - <div class="input-group"> - <span class="input-group-addon">slack.com/</span> - <input type="text" class="form-input" placeholder="site name" /> - <button class="btn btn-primary input-group-btn">Submit</button> + <div class="column"> + <div class="input-group"> + <span class="input-group-addon">slack.com/</span> + <input type="text" class="form-input" placeholder="site name" /> + <button class="btn btn-primary input-group-btn">Submit</button> + </div> </div> </div> - </div> - </section> + </section> - <section id="media"> - <header class="text-center"><h4>media</h4></header> - <div class="columns"> - <div class="column col-6"> - <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" /> - </div> - <div class="column col-6"> - <img src="demo/img/osx-el-capitan-2.jpg" class="img-responsive rounded hide-sm" /> + <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 <img> elements. The images will scale with the parent sizes.</p> + </section> + <div class="columns"> + <div class="column col-6"> + <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" /> + </div> + <div class="column col-6"> + <img src="demo/img/osx-el-capitan-2.jpg" class="img-responsive rounded hide-sm" /> + </div> </div> - </div> - </section> - <section id="avatars"> - <header class="text-center"><h4>avatars</h4></header> - <div class="columns"> - <div class="column col-3"> - <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"> + <!-- images example --> +<pre class="code lang-html"> +<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> /> +</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 <img> 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 <div> 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="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="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="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="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="demo/img/avatar-5.png" class="avatar avatar-xs" /> - <img src="demo/img/avatar-1.png" class="avatar avatar-icon" /> + </div> + <div class="column col-3"> + <div class="avatar-container"> + <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="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="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="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="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"> + <div class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></div> + <div class="avatar avatar-lg" data-initial="YZ" style="background-color: #6874cc;"></div> + <div class="avatar" data-initial="YZ" style="background-color: #7983d2;"></div> + <div class="avatar avatar-sm" data-initial="YZ" style="background-color: #8a93d7;"></div> + <div class="avatar avatar-xs" data-initial="YZ" style="background-color: #9ba2dd;"></div> </div> </div> - <div class="column col-3"> - <div class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></div> - <div class="avatar avatar-lg" data-initial="YZ" style="background-color: #6874cc;"></div> - <div class="avatar" data-initial="YZ" style="background-color: #7983d2;"></div> - <div class="avatar avatar-sm" data-initial="YZ" style="background-color: #8a93d7;"></div> - <div class="avatar avatar-xs" data-initial="YZ" style="background-color: #9ba2dd;"></div> - </div> - </div> - </section> - <section id="chips"> - <header class="text-center"><h4>chips</h4></header> - <div class="columns"> - <div class="column"> - <div class="chip"> - <span class="icon icon-favorite_border"></span> - <span class="chip-name">Crime</span> - <button class="btn btn-clear"></button> - </div> - <div class="chip"> - <span class="chip-name">Drama</span> - <button class="btn btn-clear"></button> + <!-- avatars example --> +<pre class="code lang-html"> +<<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> /> + + +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"avatar-container"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-5.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-icon"</span> /> +<<span class="tag">/div</span>> + +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>><<span class="tag">/div</span>> +</pre> + + </section> + + <section id="chips"> + <header class="text-center"><h4>chips</h4></header> + <div class="columns"> + <div class="column"> + <div class="chip"> + <span class="icon icon-favorite_border"></span> + <span class="chip-name">Crime</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <span class="chip-name">Drama</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <span class="chip-name">Biography</span> + <button class="btn btn-clear"></button> + </div> + <div class="chip"> + <span class="chip-name">Mystery</span> + <button class="btn btn-clear"></button> + </div> </div> - <div class="chip"> - <span class="chip-name">Biography</span> - <button class="btn btn-clear"></button> + <div class="column"> + <div class="chip"> + <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="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="demo/img/avatar-4.png" class="avatar avatar-xs" /> + <span class="chip-name">Yan Zhu</span> + <button class="btn btn-clear"></button> + </div> </div> - <div class="chip"> - <span class="chip-name">Mystery</span> - <button class="btn btn-clear"></button> + </div> + </section> + + <section id="fileicons"> + <header class="text-center"><h4>file icons</h4></header> + <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"> + <div class="column"> + <div class="file-icon file-icon-xl" data-type="docx"></div> + <div class="file-icon file-icon-lg" data-type="pptx"></div> + <div class="file-icon" data-type="xlsx"></div> + <div class="file-icon file-icon-sm" data-type="pdf"></div> + <div class="file-icon file-icon-xs" data-type="png"></div> </div> </div> - <div class="column"> - <div class="chip"> - <img src="demo/img/avatar-1.png" class="avatar avatar-xs" /> - <span class="chip-name">Yan Zhu</span> - <button class="btn btn-clear"></button> + </section> + + <section id="tooltips"> + <header class="text-center"><h4>tooltips</h4></header> + <section class="notes"> + <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p> + <p>Add the class <code class="label">tooltip</code> and the attribute <code class="label">data-tooltip</code>, which contains the tooltip content, to non self closing elements. And add the class name <code class="label">tooltip-right</code>, <code class="label">tooltip-bottom</code> or <code class="label">tooltip-left</code> to define the position of a tooltip. By default, the tooltip appears above the element.</p> + </section> + <div class="columns"> + <div class="column text-center"> + <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="chip"> - <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 class="column"> + <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button> </div> - <div class="chip"> - <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 class="column"> + <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum dolor sit amet">bottom tooltip</button> + </div> + <div class="column"> + <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum dolor sit amet">left tooltip</button> </div> </div> - </div> - </section> - <section id="fileicons"> - <header class="text-center"><h4>file icons</h4></header> - <section class="notes"> - <p><strong>fileicons.less</strong> includes a set of file icons. This part is written entirely in CSS as well. </p> + <!-- tooltips example --> +<pre class="code lang-html"> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>top tooltip<<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip tooltip-right"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>right tooltip<<span class="tag">/button</span>> +</pre> + </section> - <div class="columns"> - <div class="column"> - <div class="file-icon file-icon-xl" data-type="docx"></div> - <div class="file-icon file-icon-lg" data-type="pptx"></div> - <div class="file-icon" data-type="xlsx"></div> - <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"> + <section id="labels"> + <header class="text-center"><h4>labels</h4></header> + <section class="notes"> + <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p> + <p>Add the class <code class="label">label</code> to <span> or <small> elements. You can add another class <code class="label">label-primary</code>, <code class="label">label-success</code>, <code class="label">label-info</code>, <code class="label">label-warning</code>, <code class="label">label-danger</code> for more colored labels.</p> + </section> + <div class="columns"> + <div class="column"> + <span class="label">default label</span> + </div> + <div class="column"> + <span class="label label-primary">primary label</span> + </div> + <div class="column"> + <span class="label label-success">success label</span> + </div> + <div class="column"> + <span class="label label-info">info label</span> + </div> + <div class="column"> + <span class="label label-warning">warning label</span> + </div> + <div class="column"> + <span class="label label-danger">danger label</span> + </div> </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><button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button></code> - </section> - <div class="columns"> - <div class="column"> - <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"> - <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button> - </div> - <div class="column"> - <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum dolor sit amet">bottom tooltip</button> - </div> - <div class="column"> - <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum dolor sit amet">left tooltip</button> - </div> - </div> - </section> + <!-- labels example --> +<pre class="code lang-html"> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label"</span>>default label<<span class="tag">/span</span>> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>primary label<<span class="tag">/span</span>> +</pre> - <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> </section> - <div class="columns"> - <div class="column"> - <span class="label">default label</span> - </div> - <div class="column"> - <span class="label label-primary">primary label</span> - </div> - <div class="column"> - <span class="label label-success">success label</span> - </div> - <div class="column"> - <span class="label label-info">info label</span> - </div> - <div class="column"> - <span class="label label-warning">warning label</span> - </div> - <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> - </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> - </section> - <div class="columns"> - <div class="column"> - <div class="toast"> - <button class="btn btn-clear pull-right"></button> - <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. + <section id="toasts"> + <header class="text-center"><h4>toasts</h4></header> + <section class="notes"> + <p><strong>Toasts</strong> are used to show alert or information to users.</p> + <p>Add a container element with the class <code class="label">toast</code>. You can add any text within the container, and even icons. You may also add a close button with the class <code class="label">btn-clear</code> if you need. </p> + </section> + <div class="columns"> + <div class="column"> + <div class="toast"> + <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> - <div class="column"> - <div class="toast toast-primary"> - <button class="btn btn-clear pull-right"></button> - <span class="icon icon-error_outline"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. + <div class="column"> + <div class="toast toast-primary"> + <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> - </div> - <div class="columns"> - <div class="column"> - <div class="toast toast-success"> - <button class="btn btn-clear pull-right"></button> - Efficiently unleash cross-media information without cross-media value. + <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"> + <button class="btn btn-clear pull-right"></button> + Efficiently unleash cross-media information without cross-media value. + </div> </div> - </div> - <div class="column"> - <div class="toast toast-info"> - <button class="btn btn-clear pull-right"></button> - Efficiently unleash cross-media information without cross-media value. + <div class="column"> + <div class="toast toast-info"> + <button class="btn btn-clear pull-right"></button> + Efficiently unleash cross-media information without cross-media value. + </div> </div> - </div> - <div class="column"> - <div class="toast toast-warning"> - <button class="btn btn-clear pull-right"></button> - Efficiently unleash cross-media information without cross-media value. + <div class="column"> + <div class="toast toast-warning"> + <button class="btn btn-clear pull-right"></button> + Efficiently unleash cross-media information without cross-media value. + </div> </div> - </div> - <div class="column"> - <div class="toast toast-danger"> - <button class="btn btn-clear pull-right"></button> - Efficiently unleash cross-media information without cross-media value. + <div class="column"> + <div class="toast toast-danger"> + <button class="btn btn-clear pull-right"></button> + Efficiently unleash cross-media information without cross-media value. + </div> </div> </div> - </div> - </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> + <!-- toasts example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear pull-right"</span>><<span class="tag">/button</span>> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +<<span class="tag">/div</span>> + +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast toast-primary"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear pull-right"</span>><<span class="tag">/button</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-error_outline"</span>><<span class="tag">/span</span>> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. +<<span class="tag">/div</span>> +</pre> + </section> - <div class="columns"> - <div class="column col-3"> - <menu class="menu"> - <menuitem class="menu-item"> - <a href="#" class="active"> - My profile - </a> - </menuitem> - <menuitem class="divider"></menuitem> - <menuitem class="menu-item"> - <a href="#"> - Settings - </a> - </menuitem> - <menuitem class="menu-item"> - <a href="#"> - Logout - </a> - </menuitem> - </menu> - </div> - <div class="column col-3"> - <ul class="menu"> - <li class="menu-header"> + + <section id="menus"> + <header class="text-center"><h4>menus</h4></header> + <section class="notes"> + <p>A <strong>menu</strong> is a vertical list of links or buttons for actions and navigation.</p> + <p>Add a container element with the class <code class="label">menu</code>. And add child elements with the classname <code class="label">menu-item</code>. That is a basic menu component.</p> + </section> + <div class="columns"> + <div class="column col-3"> + <menu class="menu"> + <menuitem class="menu-item"> + <a href="#" class="active"> + My profile + </a> + </menuitem> + <menuitem class="divider"></menuitem> + <menuitem class="menu-item"> + <a href="#"> + Settings + </a> + </menuitem> + <menuitem class="menu-item"> + <a href="#"> + Logout + </a> + </menuitem> + </menu> + </div> + <div class="column col-3"> + <ul class="menu"> + <li class="menu-header"> <span class="menu-header-text"> Go to </span> - </li> - <li class="menu-item"> - <a href="#"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#"> - Hipchat - </a> - </li> - <li class="menu-item"> - Skype - </li> - </ul> - </div> - <div class="column col-3"> - <ul class="menu"> - <li class="menu-header"> + </li> + <li class="menu-item"> + <a href="#"> + Slack + </a> + </li> + <li class="menu-item"> + <a href="#"> + Hipchat + </a> + </li> + <li class="menu-item"> + Skype + </li> + </ul> + </div> + <div class="column col-3"> + <ul class="menu"> + <li class="menu-header"> <span class="menu-header-text"> Go to </span> - </li> - <li class="menu-item"> - <a href="#"> - <span class="icon icon-link"></span> Slack - </a> - </li> - <li class="menu-item"> - <a href="#"> - <span class="icon icon-link"></span> Hipchat - </a> - </li> - <li class="menu-item"> - <span class="icon icon-link"></span> Skype - </li> - </ul> + </li> + <li class="menu-item"> + <a href="#"> + <span class="icon icon-link"></span> Slack + </a> + </li> + <li class="menu-item"> + <a href="#"> + <span class="icon icon-link"></span> Hipchat + </a> + </li> + <li class="menu-item"> + <span class="icon icon-link"></span> Skype + </li> + </ul> + </div> </div> - </div> - </section> - <section id="breadcrumbs"> - <header class="text-center"><h4>breadcrumbs</h4></header> - <div class="columns"> - <div class="column"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"> - <a href="#"> - Home - </a> - </li> - <li class="breadcrumb-item"> - <a href="#"> - Profile - </a> - </li> - <li class="breadcrumb-item"> - <a href="#"> - Change avatar - </a> - </li> - </ul> - </div> - </div> - </section> + <!-- menus example --> +<pre class="code lang-html"> +<<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-header"</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"menu-header-text"</span>> + Go to + <<span class="tag">/span</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">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/span</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">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/span</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">span</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/span</span>> skype + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</pre> - <section id="tabs"> - <header class="text-center"><h4>tabs</h4></header> - <div class="columns"> - <div class="column"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#"> - Connect - </a> - </li> - </ul> + </section> + + <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"> + <li class="breadcrumb-item"> + <a href="#"> + Home + </a> + </li> + <li class="breadcrumb-item"> + <a href="#"> + Profile + </a> + </li> + <li class="breadcrumb-item"> + <a href="#"> + Change avatar + </a> + </li> + </ul> + </div> </div> - <div class="column"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#"> - Connect - </a> - </li> - </ul> + + <!-- breadcrumbs example --> +<pre class="code lang-html"> +<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Home + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Profile + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Change avatar + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</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"> + <li class="tab-item active"> + <a href="#"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#"> + Radio + </a> + </li> + <li class="tab-item"> + <a href="#"> + Connect + </a> + </li> + </ul> + </div> + <div class="column"> + <ul class="tab tab-block"> + <li class="tab-item active"> + <a href="#"> + Music + </a> + </li> + <li class="tab-item"> + <a href="#"> + Playlists + </a> + </li> + <li class="tab-item"> + <a href="#"> + Radio + </a> + </li> + <li class="tab-item"> + <a href="#"> + Connect + </a> + </li> + </ul> + </div> </div> - </div> - </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> + <!-- tabs example --> +<pre class="code lang-html"> +<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Music + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Playlists + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Radio + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + Connect + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</pre> + </section> - <div class="columns"> - <div class="column"> + + <section id="badges"> + <header class="text-center"><h4>badges</h4></header> + <section class="notes"> + <p><strong>Badges</strong> are often used as unread number indicators.</p> + <p>Add the class <code class="label">badge</code> to non self closing elements. And add the attribute <code class="label">data-badge</code> to define the content of a badge. The badge will appear in the top-right direction of the element.</p> + </section> + <div class="columns"> + <div class="column"> <span class="badge" data-badge="1"> Notifications </span> - </div> - <div class="column"> + </div> + <div class="column"> <span class="badge" data-badge="99"> Notifications </span> - </div> - <div class="column"> + </div> + <div class="column"> <span class="badge" data-badge="999"> Notifications </span> - </div> - <div class="column"> + </div> + <div class="column"> <span class="badge" data-badge="♀"> Notifications </span> + </div> </div> - </div> - </section> - <section id="modals"> - <header class="text-center"><h4>modals</h4></header> - <div class="columns"> - <div class="column"> - <div class="modal"> - <div class="modal-container" role="document"> - <div class="modal-header"> - <button type="button" class="btn btn-clear pull-right" aria-label="Close"></button> - <h6 class="modal-title">Modal title</h6> - </div> - <div class="modal-body"> - <div class="content"> - <p> - This is the content inside the modal. - </p> - <h4>Lorem ipsum</h4> - <p> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. - </p> - <p> - Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs. - </p> - <h4>Cupcake ipsum</h4> - <p> - Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels. - </p> - <p> - De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve. - </p> - <h4>Candy ipsum</h4> - <p> - Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar. - </p> - <p> - Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow. - </p> + <!-- badges example --> +<pre class="code lang-html"> +<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"99"</span>> + Notifications +<<span class="tag">/span</span>> +</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"> + <div class="modal-container" role="document"> + <div class="modal-header"> + <button type="button" class="btn btn-clear pull-right" aria-label="Close"></button> + <h6 class="modal-title">Modal title</h6> + </div> + <div class="modal-body"> + <div class="content"> + <p> + This is the content inside the modal. + </p> + <h4>Lorem ipsum</h4> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. + </p> + <p> + Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs. + </p> + <h4>Cupcake ipsum</h4> + <p> + Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels. + </p> + <p> + De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve. + </p> + <h4>Candy ipsum</h4> + <p> + Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar. + </p> + <p> + Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow. + </p> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-link">Close</button> + <button class="btn btn-primary">Share</button> </div> - </div> - <div class="modal-footer"> - <button class="btn btn-link">Close</button> - <button class="btn btn-primary">Share</button> </div> </div> </div> </div> - </div> - </section> - <section id="cards"> - <header class="text-center"><h4>cards</h4></header> - <div class="columns"> - <div class="column col-4"> - <div class="card"> - <div class="card-image"> - <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"> - Empower every person and every organization on the planet to achieve more. - </div> - <div class="card-footer"> - <a href="#" class="btn btn-primary">Do</a> + + <!-- modals example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-header"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear pull-right"</span>><<span class="tag">/button</span>> + <<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">"modal-title"</span>>Modal title<<span class="tag">/h6</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-body"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"content"</span>> + <span class="com"><!-- content here --></span> + <<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>> +</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="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-body"> + Empower every person and every organization on the planet to achieve more. + </div> + <div class="card-footer"> + <a href="#" class="btn btn-primary">Do</a> + </div> </div> </div> - </div> - <div class="column col-4"> - <div class="card"> - <div class="card-header"> - <h4 class="card-title">Apple</h4> - <h6 class="card-meta">Hardware and software</h6> - </div> - <div class="card-image"> - <img class="img-responsive" src="demo/img/osx-yosemite.jpg" /> - </div> - <div class="card-content"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-footer"> - <div class="btn-group btn-group-block"> - <button class="btn">Buy</button> - <button class="btn">Buy</button> - <button class="btn">Buy</button> + <div class="column col-4"> + <div class="card"> + <div class="card-header"> + <h4 class="card-title">Apple</h4> + <h6 class="card-meta">Hardware and software</h6> + </div> + <div class="card-image"> + <img class="img-responsive" src="demo/img/osx-yosemite.jpg" /> + </div> + <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"> + <div class="btn-group btn-group-block"> + <button class="btn">Buy</button> + <button class="btn">Buy</button> + <button class="btn">Buy</button> + </div> </div> </div> </div> - </div> - <div class="column col-4"> - <div class="card"> - <div class="card-header"> - <h4 class="card-title">Google</h4> - <h6 class="card-meta">Software and hardware</h6> - </div> - <div class="card-content"> - Organize the world’s information and make it universally accessible and useful. - </div> - <div class="card-footer"> - <a href="#" class="btn btn-primary">Ad</a> + <div class="column col-4"> + <div class="card"> + <div class="card-header"> + <h4 class="card-title">Google</h4> + <h6 class="card-meta">Software and hardware</h6> + </div> + <div class="card-body"> + Organize the world’s information and make it universally accessible and useful. + </div> + <div class="card-footer"> + <a href="#" class="btn btn-primary">Ad</a> + </div> </div> </div> </div> - </div> + + <!-- cards example --> +<pre class="code lang-html"> +<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-image"</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> /> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-header"</span>> + <<span class="tag">h4</span> <span class="atn">class</span>=<span class="atv">"card-title"</span>>Microsoft<<span class="tag">/h4</span>> + <<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">"card-meta"</span>>Software and hardware<<span class="tag">/h6</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-body"</span>> + To make a contribution to the world by making tools for the mind that advance humankind. + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-footer"</span>> + <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>Do<<span class="tag">/button</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</pre> + + </section> </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 |