diff options
1 files changed, 0 insertions, 3044 deletions
| -rw-r--r-- | index.html | 3044 |
diff --git a/index.html b/index.html deleted file mode 100644 index 0ef74b7..0000000 --- a/index.html +++ /dev/null @@ -1,3044 +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 http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="author" content="https://github.com/picturepan2/" /> - <title>Spectre.css - a lightweight, responsive and modern CSS framework</title> - <link rel="stylesheet" href="dist/spectre.css" /> - <link rel="stylesheet" href="demo/font/style.css" /> - <style> - header > h4, - header > h5 { - margin-top: 4rem; - margin-bottom: 2rem; - } - .bg-grey { - background-color: #efefef; - padding: 1rem .5rem; - border-radius: .2rem; - } - .navbar-brand { - font-size: 2rem; - font-weight: bold; - padding-right: 2rem; - text-decoration: none; - vertical-align: middle; - } - .navbar-brand .icon { - font-size: 1.3333em; - line-height: .8em; - margin-right: .2rem; - vertical-align: -20%; - } - .grid-hero { - margin-top: 10rem; - margin-bottom: 10rem; - } - .grid-hero h3 { - margin-bottom: 5rem; - } - .grid-hero .notes { - margin: 4rem 0; - } - .grid-footer { - color: #888; - margin-top: 4rem; - margin-bottom: 4rem; - } - .grid-footer a { - color: #666; - } - .container header { - padding-top: 3rem; - } - .notes { - margin: 4rem 0; - color: #666; - } - .empty .icon { - font-size: 4rem; - } - .code { - color: #666; - } - .code .com { - color: #adadad; - } - .code .tag { - color: #4452c0; - } - .code .atn { - color: #666; - } - .code .atv { - color: #e06870; - } - </style> -</head> -<body> - <section class="section bg-grey"> - <section id="overview" class="grid-hero container grid-960"> - <header class="text-center"><h3>Spectre.css</h3></header> - <section> - <p><strong>Spectre.css</strong> is a lightweight, responsive and modern CSS framework for faster and extensible development.</p> - <ul> - <li>lightweight and clean starting point for your project and prototype</li> - <li>flexbox, responsive and mobile-friendly layout</li> - <li>carefully designed elements</li> - <li>built in useful components and utilities</li> - <li>responsive email templates <span class="label label-primary">soon</span></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 Repo</a> - <a href="#getting-started" class="btn btn-primary">Documentation</a> - </div> - </section> - </section> - </section> - <section class="section"> - <section id="getting-started" class="container grid-960"> - <header class="text-center"><h4>getting started</h4></header> - <section class="notes"> - <p>There are 3 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM and Bower.</p> - <h5>Install manually</h5> - <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank">Spectre CSS file</a> (about 30KB):</p> - <p><a href="https://github.com/picturepan2/spectre/tree/master/dist" target="_blank" class="btn btn-primary">Download Spectre.css</a></p> - <h5>Install with NPM</h5> - <!-- install with npm example --> -<pre class="code lang-html"> -<span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save -</pre> - <h5>Install with Bower</h5> - <!-- install with bower example --> -<pre class="code lang-html"> -<span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save -</pre> - <p>And include it in your website or Web app <code><head></code></p> - <!-- install manually example --> -<pre class="code lang-html"> -<<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"dist/spectre.min.css"</span> /> -</pre> - - </section> - </section> - - <section id="compiling" class="container grid-960"> - <header class="text-center"><h4>compiling custom version</h4></header> - <section class="notes"> - <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>spectre.less</code>.</p> - <p>Then, you can build the CSS file from the command line:</p> - <ol> - <li>Navigate to the root directory of Spectre where you can find <code>package.json</code> file.</li> - <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li> - <li>When completed, run <code>gulp build</code> to compile LESS to CSS and minify files.</li> - <li>You can find compiled CSS files in <code>/dist</code> directory.</li> - </ol> - <p>You can watch file changes and rebuild CSS files by using <code>gulp watch</code>.</p> - </section> - </section> - - <section id="elements" class="container grid-960"> - <section class="notes text-center"> - <ul class="tab inline-flex"> - <li class="tab-item active"> - <a href="#elements"> - elements - </a> - </li> - <li class="tab-item"> - <a href="#layout"> - layout - </a> - </li> - <li class="tab-item"> - <a href="#components"> - components - </a> - </li> - <li class="tab-item"> - <a href="#utilities"> - utilities - </a> - </li> - </ul> - </section> - <section class="notes text-center"> - <div class="btn-group"> - <a href="#typography" class="btn btn-primary">typography</a> - <a href="#tables" class="btn btn-primary">tables</a> - <a href="#buttons" class="btn btn-primary">buttons</a> - <a href="#forms" class="btn btn-primary">forms</a> - <a href="#labels" class="btn btn-primary">labels</a> - <a href="#media" class="btn btn-primary">media</a> - </div> - </section> - </section> - - <section id="typography" class="container grid-960"> - <header class="text-center"><h4>typography</h4></header> - <section class="notes"> - <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote, lists and code elements. </p> - </section> - - <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 <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> - - <!-- headings example --> -<pre class="code lang-html"> -<<span class="tag">h1</span>>H1 Title<<span class="tag">/h1</span>> -<<span class="tag">h2</span>>H2 Title <<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">"label"</span>>4rem<<span class="tag">/small</span>><<span class="tag">/h2</span>> -</pre> - - <header class="text-center"><h5>paragraphs</h5></header> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#typography">dictum in vehicula sit amet</a>, 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> - - <!-- headings example --> -<pre class="code lang-html"> -<<span class="tag">p</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>dictum in vehicula sit amet<<span class="tag">/a</span>>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.<<span class="tag">/p</span>> -</pre> - - <header class="text-center"><h5>semantic text elements</h5></header> - <div class="columns"> - <div class="column col-3 col-xs-12"> - <abbr title="Internationalization">I18N</abbr> - <code class="ml-10"><abbr></code> - </div> - <div class="column col-3 col-xs-12"> - <strong>Bold</strong> - <code class="ml-10"><strong></code> <code><b></code> - </div> - <div class="column col-3 col-xs-12"> - <cite>Citation</cite> - <code class="ml-10"><cite></code> - </div> - <div class="column col-3 col-xs-12"> - <code>Hello World!</code> - <code class="ml-10"><code></code> - </div> - <div class="column col-3 col-xs-12"> - <del>Deleted</del> - <code class="ml-10"><del></code> - </div> - <div class="column col-3 col-xs-12"> - <em>Emphasis</em> - <code class="ml-10"><em></code> - </div> - <div class="column col-3 col-xs-12"> - <i>Italic</i> - <code class="ml-10"><i></code> - </div> - <div class="column col-3 col-xs-12"> - <ins>Inserted</ins> - <code class="ml-10"><ins></code> - </div> - <div class="column col-3 col-xs-12"> - <kbd>Ctrl + S</kbd> - <code class="ml-10"><kbd></code> - </div> - <div class="column col-3 col-xs-12"> - <mark>Highlighted</mark> - <code class="ml-10"><mark></code> - </div> - <div class="column col-3 col-xs-12"> - <ruby> - 漢 <rt>kan</rt> - 字 <rt>ji</rt> - </ruby> - <code class="ml-10"><ruby></code> - </div> - <div class="column col-3 col-xs-12"> - <s>Strikethrough</s> - <code class="ml-10"><s></code> - </div> - <div class="column col-3 col-xs-12"> - <samp>Sample</samp> - <code class="ml-10"><samp></code> - </div> - <div class="column col-3 col-xs-12"> - Text <sub>Subscripted</sub> - <code class="ml-10"><sub></code> - </div> - <div class="column col-3 col-xs-12"> - Text <sup>Superscripted</sup> - <code class="ml-10"><sup></code> - </div> - <div class="column col-3 col-xs-12"> - <time>20:00</time> - <code class="ml-10"><time></code> - </div> - <div class="column col-3 col-xs-12"> - <u>Underline</u> - <code class="ml-10"><u></code> - </div> - <div class="column col-3 col-xs-12"> - <var>x</var> = <var>y</var> + 2 - <code class="ml-10"><var></code> - </div> - </div> - - <header class="text-center"><h5>optimized for east asian fonts</h5></header> - <p class="text-large text-center"><span lang="zh-Hans">你好</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕하세요</span></p> - <h6>Chinese (Simplified)</h6> - <p lang="zh-Hans">革命不是请客吃饭,不是做文章,不是绘画绣花,不能那样雅致,那样从容不迫,“文质彬彬”,那样“温良恭俭让”。革命就是暴动,是一个阶级推翻一个阶级的暴烈的行动。</p> - <h6>Chinese (Tranditional)</h6> - <p lang="zh-Hant">山不在高,有仙則名;水不在深,有龍則靈。斯是陋室,惟吾德馨。苔痕上階綠,草色入簾青;談笑有鴻儒,往來無白丁。可以調素琴,閱金經。無絲竹之亂耳,無案牘之勞形。南陽諸葛廬,西蜀子雲亭。孔子云:「何陋之有?」</p> - <h6>Japanese</h6> - <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。</p> - <h6>Korean</h6> - <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p> - - <section class="notes"> - <p>Use the attribute <code>lang</code> or add the class <code>cjk</code> to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.</p> - </section> - - <!-- asian example --> -<pre class="code lang-html"> -<<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>>祇園精舎の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> -<<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"ja"</span>>祇園精舎の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> -</pre> - - <header class="text-center"><h5>blockquote</h5></header> - <blockquote> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> - <cite>- Source</cite> - </blockquote> - - <!-- blockquote example --> -<pre class="code lang-html"> -<<span class="tag">blockquote</span>> - <<span class="tag">p</span>>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<<span class="tag">/p</span>> - <<span class="tag">cite</span>>- Source<<span class="tag">/cite</span>> -<<span class="tag">/blockquote</span>> -</pre> - - <header class="text-center"><h5>lists</h5></header> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <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-4 col-xs-12"> - <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 class="column col-4 col-xs-12"> - <dl class="list"> - <dt>description list term 1</dt> - <dd>description list description 1</dd> - <dt>description list term 2</dt> - <dd>description list description 2</dd> - <dt>description list term 3</dt> - <dd>description list description 3</dd> - </dl> - </div> - </div> - - <!-- lists example --> -<pre class="code lang-html"> -<span class="com"><!-- unordered list --></span> -<<span class="tag">ul</span>> - <<span class="tag">li</span>>list item 1<<span class="tag">/li</span>> - <<span class="tag">li</span>>list item 2 - <<span class="tag">ul</span>> - <<span class="tag">li</span>>list item 2.1<<span class="tag">/li</span>> - <<span class="tag">li</span>>list item 2.2<<span class="tag">/li</span>> - <<span class="tag">li</span>>list item 2.3<<span class="tag">/li</span>> - <<span class="tag">/ul</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span>>list item 3<<span class="tag">/li</span>> -<<span class="tag">/ul</span>> - -<span class="com"><!-- description list --></span> -<<span class="tag">dl</span>> - <<span class="tag">dt</span>>description list term<<span class="tag">/dt</span>> - <<span class="tag">dd</span>>description list description<<span class="tag">/dd</span>> -<<span class="tag">/dl</span>> -</pre> - - </section> - - <section id="tables" class="container grid-960"> - <header class="text-center"><h4>tables</h4></header> - <section class="notes"> - <p><strong>Tables</strong> include default styles for tables and data sets.</p> - </section> - - <table class="table table-striped"> - <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> - <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>22 September 1995 <span class="label">USA</span></td> - </tr> - </tbody> - </table> - <section class="notes"> - <p>Add the class <code>table</code> to any <table> element. The class will add padding, border and emphasized table header. Use <code>table-striped</code> to <table> to add zebra striped style. For hoverable table rows, you can add the class <code>table-hover</code> to enable hover style. </p> - <p>Use the class <code>selected</code> to make <tr> element highlighted. </p> - </section> - - <!-- tables example --> -<pre class="code lang-html"> -<<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table table-striped table-hover"</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">td</span>>The Shawshank Redemption<<span class="tag">/td</span>> - <<span class="tag">td</span>>2h 22min<<span class="tag">/td</span>> - <<span class="tag">td</span>>Crime, Drama<<span class="tag">/td</span>> - <<span class="tag">td</span>>14 October 1994<<span class="tag">/td</span>> - <<span class="tag">/tr</span>> - <<span class="tag">/tbody</span>> -<<span class="tag">/table</span>> -</pre> - - </section> - - <section id="buttons" class="container grid-960"> - <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> - </section> - - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn">default button</button> - <button class="btn loading">default button</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary">primary button</button> - <button class="btn btn-primary loading">primary button</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-link">link button</button> - <button class="btn btn-link loading">link button</button> - </div> - </div> - <section class="notes"> - <p>Add the class <code>btn</code> to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. A button with the class <code>loading</code> can show loading indicator. </p> - </section> - - <!-- 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> - - <section class="notes"> - <p>Add the class <code>disabled</code> or the attribute <code>disabled</code> for a disabled button.</p> - </section> - - <div class="columns"> - <div class="column col-xs-12"> - <button class="btn disabled">default button</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary" disabled>primary button</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-link" disabled>link button</button> - </div> - </div> - - <header class="text-center"><h5>button sizes</h5></header> - - <div class="columns"> - <div class="column col-xs-12"> - <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 col-xs-12"> - <button class="btn btn-block">block button</button> - </div> - </div> - <section class="notes"> - <p>Add the class <code>btn-sm</code> or <code>btn-lg</code> for small or large button size. Also, you can add the class <code>btn-block</code> for a full-width button. </p> - </section> - - <!-- 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> - - <div class="columns"> - <div class="column"> - <button class="btn btn-primary btn-lg"><i class="icon icon-markunread"></i> large</button> - <button class="btn btn-primary"><i class="icon icon-markunread"></i> normal</button> - <button class="btn btn-primary btn-sm"><i class="icon icon-markunread"></i> small</button> - </div> - </div> - <section class="notes"> - <p>Icons with the class <code>icon</code> can be correctly rendered in each button size. </p> - </section> - - <!-- 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">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</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">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</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">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>> small<<span class="tag">/button</span>> -</pre> - - <header class="text-center"><h5>button groups</h5></header> - <div class="columns"> - <div class="column col-xs-12"> - <div class="btn-group"> - <button class="btn tooltip" data-tooltip="Lorem ipsum">first button</button> - <button class="btn tooltip" data-tooltip="Lorem ipsum">second button</button> - <button class="btn tooltip" data-tooltip="Lorem ipsum">third button</button> - </div> - </div> - <div class="column col-xs-12"> - <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> - <div class="columns"> - <div class="column col-xs-12"> - <div class="btn-group"> - <button class="btn btn-sm active">first button</button> - <button class="btn btn-sm">second button</button> - <button class="btn btn-sm">third button</button> - </div> - </div> - <div class="column col-xs-12"> - <div class="btn-group btn-group-block"> - <button class="btn btn-primary btn-sm active">first button</button> - <button class="btn btn-primary btn-sm">second button</button> - <button class="btn btn-primary btn-sm">third button</button> - </div> - </div> - </div> - <section class="notes"> - <p>If you want to use buttons as a group, add the class <code>btn-group</code> to the container. You can add the class <code>btn-group-block</code> for a full-width button group.</p> - </section> - - <!-- 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" class="container grid-960"> - <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> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <form action="#forms"> - <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"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender" /> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" /> - <i class="form-icon"></i> Female - </label> - </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" /> - <i class="form-icon"></i> 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-checkbox"> - <input type="checkbox" /> - <i class="form-icon"></i> Remember me - </label> - </div> - <div class="form-group"> - <button class="btn btn-primary" type="submit">Submit</button> - <button class="btn btn-link" type="reset">Cancel</button> - </div> - </form> - </div> - </div> - - <!-- forms example --> -<pre class="code lang-html"> -<<span class="tag">form</span>> - <span class="com"><!-- form input control --></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="com"><!-- form radio control --></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> /> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</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> /> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Female - <<span class="tag">/label</span>> - <<span class="tag">/div</span>> - <span class="com"><!-- form select control --></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="com"><!-- form switch control --></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> /> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Send me emails with news and tips - <<span class="tag">/label</span>> - <<span class="tag">/div</span>> - <span class="com"><!-- form textarea control --></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="com"><!-- form checkbox control --></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> /> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Remember me - <<span class="tag">/label</span>> - <<span class="tag">/div</span>> -<<span class="tag">/form</span>> -</pre> - - <section class="notes"> - <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> - <p>If you want to have a horizontal form, add the class <code>form-horizontal</code> to the <form> container. And add the class <code>col-[1-12]</code> to the child elements for form row layout. </p> - </section> - - <div class="columns"> - <div class="column col-6 col-sm-12"> - <form class="form-horizontal" action="#forms"> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-4">Name</label> - </div> - <div class="col-9"> - <input class="form-input" type="text" id="input-example-4" placeholder="Name" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-5">Email</label> - </div> - <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"> - <label class="form-label">Gender</label> - </div> - <div class="col-9"> - <label class="form-radio"> - <input type="radio" name="gender" /> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" checked /> - <i class="form-icon"></i> Female - </label> - </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <select class="form-select" multiple> - <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" /> - <i class="form-icon"></i> Send me emails with news and tips - </label> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-6">Message</label> - </div> - <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" /> - <i class="form-icon"></i> Remember me - </label> - </div> - </div> - <div class="form-group"> - <div class="col-3"></div> - <div class="col-9"> - <button class="btn btn-primary" type="submit">Submit</button> - <button class="btn btn-link" type="reset">Cancel</button> - </div> - </div> - </form> - </div> - </div> - - <!-- forms example --> -<pre class="code lang-html"> -<<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">"form-horizontal"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"col-3"</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">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"col-9"</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="com"><!-- form structure --></span> -<<span class="tag">/form</span>> -</pre> - - <div class="columns"> - <div class="column col-6 col-sm-12"> - <form class="form-horizontal" action="#forms"> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-8">Email</label> - </div> - <div class="col-9"> - <input class="form-input" type="email" id="input-example-8" placeholder="Email" value="spectre@example.com" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-9">URL</label> - </div> - <div class="col-9"> - <input class="form-input" type="url" id="input-example-9" placeholder="URL" value="https://github.com/picturepan2/spectre"> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-10">Search</label> - </div> - <div class="col-9"> - <input class="form-input" type="search" id="input-example-10" placeholder="Search" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-11">Tel</label> - </div> - <div class="col-9"> - <input class="form-input" type="tel" id="input-example-11" placeholder="Tel" value="1-(888)-888-8888" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-12">Password</label> - </div> - <div class="col-9"> - <input class="form-input" type="password" id="input-example-12" placeholder="Password" value="123456789" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-13">Number</label> - </div> - <div class="col-9"> - <input class="form-input" type="number" id="input-example-13" placeholder="00" value="66" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-14">Date</label> - </div> - <div class="col-9"> - <input class="form-input" type="date" id="input-example-14" value="2016-12-31" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-15">Color</label> - </div> - <div class="col-9"> - <input class="form-input" type="color" id="input-example-15" value="#5764c6" /> - </div> - </div> - <div class="form-group"> - <div class="col-3"> - <label class="form-label" for="input-example-16">File</label> - </div> - <div class="col-9"> - <input class="form-input" type="file" id="input-example-16" value="" /> - </div> - </div> - <div class="form-group hide"> - <div class="col-3"> - <label class="form-label" for="input-example-17">Slider</label> - </div> - <div class="col-9"> - <input class="form-input" type="range" min="0" max="50" value="25" /> - </div> - </div> - <div class="form-group hide"> - <div class="col-3"> - <label class="form-label" for="input-example-18">Progress</label> - </div> - <div class="col-9"> - <progress class="progress" value="50" max="100"></progress> - </div> - </div> - </form> - </div> - </div> - - <section class="notes"> - <p>To use form validation styles, add <code>is-success</code> and <code>is-danger</code> to the controls or add <code>has-success</code> and <code>has-danger</code> to parent elements. You can use the class <code>form-input-hint</code> to provide form validation success and error messages.</p> - </section> - - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <label class="form-label" for="input-example-1">Name</label> - <input class="form-input is-danger" type="text" id="input-example-1" placeholder="Name" /> - <p class="form-input-hint">The name is invaild.</p> - </div> - <div class="form-group has-success"> - <label class="form-label" for="input-example-2">Email</label> - <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> - <p class="form-input-hint">The email is available.</p> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <select class="form-select is-danger"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - <p class="form-input-hint">The option is invaild.</p> - </div> - <div class="form-group has-success"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - <p class="form-input-hint">The option is available.</p> - </div> - </div> - </div> - - <!-- forms example --> -<pre class="code lang-html"> -<<span class="tag">form</span>> - <span class="com"><!-- form validation class: has-success --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group has-success"</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">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invaild.<<span class="tag">/p</span>> - <<span class="tag">/div</span>> - - <span class="com"><!-- form validation class: is-success --></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 is-success"</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">p</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invaild.<<span class="tag">/p</span>> - <<span class="tag">/div</span>> -<<span class="tag">/form</span>> -</pre> - - <section class="notes"> - <p>For smaller or larger input and select controls, you could add <code>input-sm</code>/<code>input-lg</code> and <code>select-sm</code>/<code>select-lg</code> to the elements.</p> - </section> - - <div class="columns"> - <div class="column col-4"> - <input class="form-input input-sm" type="text" placeholder="Name" /> - </div> - <div class="column col-4"> - <select class="form-select select-sm"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - </div> - <div class="columns"> - <div class="column col-4"> - <input class="form-input input-lg" type="text" placeholder="Name" /> - </div> - <div class="column col-4"> - <select class="form-select select-lg"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - </div> - - <header class="text-center"><h5>input groups</h5></header> - <div class="columns"> - <div class="column col-xs-12"> - <div class="input-group"> - <span class="input-group-addon addon-sm">slack.com/</span> - <input type="text" class="form-input input-sm" placeholder="site name" /> - </div> - </div> - <div class="column col-xs-12"> - <div class="input-group"> - <input type="text" class="form-input input-sm" placeholder="username" /> - <span class="input-group-addon addon-sm">@slack.com</span> - </div> - </div> - <div class="column col-xs-12"> - <div class="input-group"> - <span class="input-group-addon addon-sm">slack.com/</span> - <input type="text" class="form-input input-sm" placeholder="site name" /> - <button class="btn btn-primary input-group-btn btn-sm">Submit</button> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-xs-12"> - <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 col-xs-12"> - <div class="input-group"> - <input type="text" class="form-input" placeholder="username" /> - <span class="input-group-addon">@slack.com</span> - </div> - </div> - <div class="column col-xs-12"> - <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 class="columns"> - <div class="column col-xs-12"> - <div class="input-group"> - <span class="input-group-addon addon-lg">slack.com/</span> - <input type="text" class="form-input input-lg" placeholder="site name" /> - </div> - </div> - <div class="column col-xs-12"> - <div class="input-group"> - <input type="text" class="form-input input-lg" placeholder="username" /> - <span class="input-group-addon addon-lg">@slack.com</span> - </div> - </div> - <div class="column"> - <div class="input-group"> - <span class="input-group-addon addon-lg">slack.com/</span> - <input type="text" class="form-input input-lg" placeholder="site name" /> - <button class="btn btn-primary input-group-btn btn-lg">Submit</button> - </div> - </div> - </div> - <section class="notes"> - <p>If you want to attach text and button along with an input, add the class <code>input-group</code> to the input container. And add the class <code>input-group-addon</code> to the text element and <code>input-group-btn</code> to the button element.</p> - </section> - - <!-- input groups example --> -<pre class="code lang-html"> -<span class="com"><!-- normal input group --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>slack.com/<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> -<<span class="tag">/div</span>> - -<span class="com"><!-- large input group --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon addon-lg"</span>>slack.com/<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input input-lg"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> -<<span class="tag">/div</span>> - -<span class="com"><!-- normal input group with button --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>slack.com/<<span class="tag">/span</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"site name"</span> /> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Submit<<span class="tag">/button</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="labels" class="container grid-960"> - <header class="text-center"><h4>labels</h4></header> - <section class="notes"> - <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p> - </section> - <div class="columns"> - <div class="column"> - <span class="label">default label</span> - <span class="label label-primary">primary label</span> - <span class="label label-success">success label</span> - <span class="label label-danger">danger label</span> - </div> - </div> - <section class="notes"> - <p>Add the class <code>label</code> to <span> or <small> elements. You can add another class <code>label-primary</code>, <code>label-success</code> and <code>label-danger</code> for a primary colored label.</p> - </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> - - <section id="media" class="container grid-960"> - <header class="text-center"><h4>media</h4></header> - <section class="notes"> - <p><strong>Media</strong> include responsive images, figures and video classes. </p> - <p>Add the class <code>img-responsive</code> to <img> elements. The images will scale with the parent sizes.</p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <img src="demo/img/osx-el-capitan.jpg" class="img-responsive rounded" /> - </div> - </div> - - <section class="notes"> - <p>You can use the element <code><figure></code> for an image with a caption. Add the class <code>figure</code> to <figure> element. The images with the class <code>img-responsive</code> will be responsive. And the included class <code>figure-caption</code> will provide basic style for caption. Also, you can use <code>text-left</code>, <code>text-center</code> and <code>text-right</code> for caption alignment. </p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <figure class="figure"> - <img src="demo/img/osx-yosemite-2.jpg" class="img-responsive rounded" /> - <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption> - </figure> - - </div> - </div> - - <section class="notes"> - <p>For responsive video, add a container with the class <code>video-responsive</code>. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="video-responsive"> - <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" frameborder="0" allowfullscreen></iframe> - </div> - </div> - </div> - - <!-- media 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> /> - -<<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"figure"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-yosemite-2.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive rounded"</span> /> - <<span class="tag">figcaption</span> <span class="atn">class</span>=<span class="atv">"figure-caption text-center"</span>>macOS Yosemite wallpaper<<span class="tag">/figcaption</span>> -<<span class="tag">/figure</span>> - -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"video-responsive"</span>> - <<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">"https://www.youtube.com/embed/BzMLA8YIgG0;</span> <span class="atn">width</span>=<span class="atv">"560"</span> <span class="atn">height</span>=<span class="atv">"315"</span> <span class="atn">frameborder</span>=<span class="atv">"0"</span> <span class="atn">allowfullscreen</span>><<span class="tag">/iframe</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="layout" class="container grid-960"> - <section class="notes text-center"> - <ul class="tab inline-flex"> - <li class="tab-item"> - <a href="#elements"> - elements - </a> - </li> - <li class="tab-item active"> - <a href="#layout"> - layout - </a> - </li> - <li class="tab-item"> - <a href="#components"> - components - </a> - </li> - <li class="tab-item"> - <a href="#utilities"> - utilities - </a> - </li> - </ul> - </section> - <section class="notes text-center"> - <div class="btn-group"> - <a href="#grid" class="btn btn-primary">flexbox grid</a> - <a href="#responsive" class="btn btn-primary">responsive</a> - <a href="#navbar" class="btn btn-primary">navbar</a> - <a href="#empty" class="btn btn-primary">empty states</a> - </div> - </section> - </section> - - <section id="grid" class="container grid-960"> - <header class="text-center"><h4>flexbox grid</h4></header> - <section class="notes"> - <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p> - </section> - <div class="columns"> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - <div class="column"> - <div class="bg-grey"></div> - </div> - </div> - - <div class="columns"> - <div class="column col-12"> - <div class="bg-grey">col-12 (100%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-9"> - <div class="bg-grey">col-9 (75%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-6"> - <div class="bg-grey">col-6 (50%)</div> - </div> - </div> - <div class="columns"> - <div class="column col-3"> - <div class="bg-grey">col-3 (25%)</div> - </div> - </div> - - <section class="notes"> - <p>Add the class <code>columns</code> to a container with the class <code>container</code>. And add any element you want with classname <code>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>col-[1-12]</code>.</p> - <p>And you can add the class <code>col-gapless</code> to have gapless columns.</p> - </section> - - <div class="columns col-gapless"> - <div class="column col-6"> - <div class="bg-grey">col-6 (gapless)</div> - </div> - <div class="column col-6"> - <div class="bg-grey">col-6 (gapless)</div> - </div> - </div> - - <section class="notes"> - <p>By default, Spectre grid has multi-line flexbox enabled. You can add the class <code>col-oneline</code> to <code>columns</code> to make all its child columns positioned in the same single row.</p> - </section> - - <div class="columns col-oneline"> - <div class="column col-8"> - <div class="bg-grey">col-8</div> - </div> - <div class="column col-8"> - <div class="bg-grey">col-8</div> - </div> - </div> - - <!-- layout example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> - <<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>> - - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns col-gapless"</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-6"</span>>col-6<<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="responsive" class="container grid-960"> - <header class="text-center"><h4>responsive grid</h4></header> - <div class="columns col-multiline"> - <div class="column col-md-6 col-xs-12"> - <div class="bg-grey">col-md-6</div> - </div> - <div class="column col-md-3 col-xs-12"> - <div class="bg-grey">col-md-3</div> - </div> - <div class="column col-md-3 col-xs-12"> - <div class="bg-grey">col-md-3</div> - </div> - </div> - - <div class="columns"> - <div class="column col-sm-6"> - <div class="bg-grey">col-sm-6</div> - </div> - <div class="column col-sm-3"> - <div class="bg-grey">col-sm-3</div> - </div> - <div class="column col-sm-3"> - <div class="bg-grey">col-sm-3</div> - </div> - </div> - - <div class="columns"> - <div class="column col-xs-6"> - <div class="bg-grey">col-xs-6</div> - </div> - <div class="column col-xs-3"> - <div class="bg-grey">col-xs-3</div> - </div> - <div class="column col-xs-3"> - <div class="bg-grey">col-xs-3</div> - </div> - </div> - - <section class="notes"> - <p>Spectre provides a neat responsive layout grid system. There are <code>.col-xs-[1-12]</code>, <code>.col-sm-[1-12]</code>, <code>.col-md-[1-12]</code>, <code>.col-lg-[1-12]</code> and <code>.col-xl-[1-12]</code> available for flexible grid across mobile, tablet and desktop viewport usage.</p> - <ul> - <li>For window width less than <strong>480px</strong>, all columns will show as a single row.</li> - <li><code>col-xs-[1-12]</code> apply to window width smaller than or equal to <strong>480px</strong>. </li> - <li><code>col-sm-[1-12]</code> apply to window width smaller than or equal to <strong>600px</strong>. </li> - <li><code>col-md-[1-12]</code> apply to window width smaller than or equal to <strong>840px</strong>. </li> - <li><code>col-lg-[1-12]</code> apply to window width smaller than or equal to <strong>960px</strong>. </li> - <li><code>col-xl-[1-12]</code> apply to window width smaller than or equal to <strong>1280px</strong>. </li> - </ul> - </section> - - <!-- layout example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> - <<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-xs-6"</span>>col-xs-6<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-3"</span>>col-xs-3<<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-xs-3"</span>>col-xs-3<<span class="tag">/div</span>> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</pre> - - <section class="notes"> - <p>For hiding elements on specific viewport sizes, there are classes <code>.hide-xs</code>, <code>.hide-sm</code>, <code>.hide-md</code>, <code>.hide-lg</code> and <code>.hide-xl</code> available.</p> - <ul> - <li><code>hide-xs</code> hides elements when the window width is smaller than or equal to <strong>480px</strong>. </li> - <li><code>hide-sm</code> hides elements when the window width is smaller than or equal to <strong>600px</strong>. </li> - <li><code>hide-md</code> hides elements when the window width is smaller than or equal to <strong>840px</strong>. </li> - <li><code>hide-lg</code> hides elements when the window width is smaller than or equal to <strong>960px</strong>. </li> - <li><code>hide-xl</code> hides elements when the window width is smaller than or equal to <strong>1280px</strong>. </li> - </ul> - <p>Spectre also has a responsive web test tool Responsive Resizer. You can use it locally in the directory <code>/tools/resizer</code> or online.</p> - <p><a href="http://picturepan2.github.io/spectre/tools/resizer/" target="_blank" class="btn btn-primary">Responsive Resizer</a></p> - </section> - </section> - - <section id="navbar" class="container grid-960"> - <header class="text-center"><h4>navbar</h4></header> - <section class="notes"> - <p><strong>Navbar</strong> is a layout container that appears in the header of apps and websites. </p> - </section> - <div class="columns"> - <div class="column"> - <section class="navbar"> - <section class="navbar-section"> - <a href="#navbar" class="navbar-brand"> - <i class="icon icon-pages"></i> Spectre.css - </a> - <a href="#navbar" class="btn btn-link">features</a> - <a href="#navbar" class="btn btn-link">documents</a> - </section> - <section class="navbar-section"> - <div class="input-group input-inline"> - <input class="form-input" type="text" placeholder="search" /> - <button class="btn btn-primary input-group-btn">Search</button> - </div> - </section> - </section> - </div> - </div> - - <section class="notes"> - <p>A navbar component can include logo brand, nav links and buttons, search box or any combination of those elements. Each section with the class <code>navbar-section</code> will be evenly distributed in the container.</p> - </section> - - <!-- navbar example --> -<pre class="code lang-html"> -<<span class="tag">header</span> <span class="atn">class</span>=<span class="atv">"navbar"</span>> - <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"navbar-brand"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-pages"</span>><<span class="tag">/i</span>> Spectre.css - <<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>features<<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>documents<<span class="tag">/a</span>> - <<span class="tag">/section</span>> - <<span class="tag">section</span> <span class="atn">class</span>=<span class="atv">"navbar-section"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</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">placeholder</span>=<span class="atv">"search"</span> /> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary input-group-btn"</span>>Search<<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <<span class="tag">/section</span>> -<<span class="tag">/header</span>> -</pre> - - </section> - - <section id="empty" class="container grid-960"> - <header class="text-center"><h4>empty states / blank slates</h4></header> - <section class="notes"> - <p><strong>Empty states/blank slates</strong> are commonly used as placeholders for first time use, empty data and error screens.</p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <section class="empty"> - <i class="icon icon-markunread"></i> - <p class="empty-title">You have no new messages</p> - <p class="empty-meta">Click the button to start a conversation.</p> - <button class="empty-action btn btn-primary">Send a message</button> - </section> - </div> - <div class="column col-6 col-xs-12"> - <section class="empty"> - <i class="icon icon-people"></i> - <p class="empty-title">You are not following anyone</p> - <div class="empty-action input-group"> - <input type="text" class="form-input" placeholder="" /> - <button class="btn btn-primary input-group-btn">Search</button> - </div> - </section> - </div> - </div> - - <section class="notes"> - <p>An empty state component can include icons, messages(title and meta messages) and action buttons or any combination of those elements. Add <code>empty-title</code>, <code>empty-meta</code> or <code>empty-action</code> to the elements. HTML structure is exampled below. </p> - </section> - - <!-- empty states example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-people"</span>><<span class="tag">/i</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-title"</span>>You have no new messages<<span class="tag">/p</span>> - <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"empty-meta"</span>>Click the button to start a conversation.<<span class="tag">/p</span>> - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"empty-action btn btn-primary"</span>>Send a message<<span class="tag">/button</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="components" class="container grid-960"> - <section class="notes text-center"> - <ul class="tab inline-flex"> - <li class="tab-item"> - <a href="#elements"> - elements - </a> - </li> - <li class="tab-item"> - <a href="#layout"> - layout - </a> - </li> - <li class="tab-item active"> - <a href="#components"> - components - </a> - </li> - <li class="tab-item"> - <a href="#utilities"> - utilities - </a> - </li> - </ul> - </section> - <section class="notes text-center"> - <div class="btn-group"> - <a href="#avatars" class="btn btn-primary">avatars</a> - <a href="#chips" class="btn btn-primary">chips</a> - <a href="#autocomplete" class="btn btn-primary">autocomplete</a> - <a href="#tooltips" class="btn btn-primary">tooltips</a> - <a href="#badges" class="btn btn-primary">badges</a> - <a href="#toasts" class="btn btn-primary">toasts</a> - <a href="#menus" class="btn btn-primary">menus</a> - <a href="#dropdowns" class="btn btn-primary">dropdowns</a> - <a href="#navigation" class="btn btn-primary">navigation</a> - <a href="#modals" class="btn btn-primary">modals</a> - <a href="#cards" class="btn btn-primary">cards</a> - </div> - </section> - </section> - - <section id="avatars" class="container grid-960"> - <header class="text-center"><h4>avatars</h4></header> - <section class="notes"> - <p><strong>Avatars</strong> are user profile pictures. </p> - </section> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <figure class="avatar avatar-xl"> - <img src="demo/img/avatar-1.png" /> - </figure> - <figure class="avatar avatar-lg"> - <img src="demo/img/avatar-2.png" /> - </figure> - <figure class="avatar"> - <img src="demo/img/avatar-3.png" /> - </figure> - <figure class="avatar avatar-sm"> - <img src="demo/img/avatar-4.png" /> - </figure> - <figure class="avatar avatar-xs"> - <img src="demo/img/avatar-5.png" /> - </figure> - </div> - <div class="column col-4 col-xs-12"> - <figure class="avatar avatar-xl"> - <img src="demo/img/avatar-1.png" /> - <img src="demo/img/avatar-2.png" class="avatar-icon" /> - </figure> - <figure class="avatar avatar-lg"> - <img src="demo/img/avatar-2.png" /> - <img src="demo/img/avatar-3.png" class="avatar-icon" /> - </figure> - <figure class="avatar"> - <img src="demo/img/avatar-3.png" /> - <img src="demo/img/avatar-4.png" class="avatar-icon" /> - </figure> - <figure class="avatar avatar-sm"> - <img src="demo/img/avatar-4.png" /> - <img src="demo/img/avatar-5.png" class="avatar-icon" /> - </figure> - <figure class="avatar avatar-xs"> - <img src="demo/img/avatar-5.png" /> - <img src="demo/img/avatar-1.png" class="avatar-icon" /> - </figure> - </div> - - <div class="column col-4 col-xs-12"> - <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure> - <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;"></figure> - <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"></figure> - <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"></figure> - <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"></figure> - </div> - </div> - - <section class="notes"> - <p>Add the class <code>avatar</code> to <img> element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p> - <p>For users who don't have profile pictures, you may use their initials for avatars. Add the class <code>avatar</code> and avatar size class to <div> element. The attribute <code>data-initial</code> is the name appear inside the avatar.</p> - </section> - - <div class="columns"> - <div class="column"> - <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"> - <img src="demo/img/avatar-1.png" /> - </figure> - <figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;"> - <img src="demo/img/avatar-2.png" /> - </figure> - <figure class="avatar" data-initial="YZ" style="background-color: #5764c6;"> - <img src="demo/img/avatar-3.png" /> - </figure> - <figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;"> - <img src="demo/img/avatar-4.png" /> - </figure> - <figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;"> - <img src="demo/img/avatar-5.png" /> - </figure> - </div> - </div> - - <!-- avatars example --> -<pre class="code lang-html"> -<span class="com"><!-- Basic avatar examples --></span> -<<span class="tag">figure</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-1.png"</span> /> -<<span class="tag">/figure</span>> - -<<span class="tag">figure</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-1.png"</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-icon"</span> /> -<<span class="tag">/figure</span>> - -<<span class="tag">figure</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">/figure</span>> - -<span class="com"><!-- Show initals when avatar image is unavailable or not fully loaded --></span> -<<span class="tag">figure</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">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> /> -<<span class="tag">/figure</span>> -</pre> - - </section> - - <section id="chips" class="container grid-960"> - <header class="text-center"><h4>chips</h4></header> - <section class="notes"> - <p><strong>Chips</strong> are complex entities in small blocks. </p> - </section> - <div class="columns"> - <div class="column col-xs-12"> - <div class="chip-sm"> - Crime - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Drama - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Biography - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Mystery - <button class="btn btn-clear"></button> - </div> - </div> - <div class="column col-xs-12"> - <div class="chip-sm"> - <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure> - Tony Stark - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <img src="demo/img/avatar-1.png" class="avatar" /> - Thor Odinson - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <img src="demo/img/avatar-4.png" class="avatar" /> - Steve Rogers - </div> - </div> - </div> - - <section class="notes"> - <p>Add a container element with the class <code>chip-sm</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p> - </section> - - <div class="columns hide"> - <div class="column col-4 col-xs-12"> - <div class="chip"> - <div class="chip-icon"> - <img src="demo/img/avatar-1.png" class="avatar" /> - </div> - <div class="chip-content"> - <div class="chip-title">Tony Stark</div> - <div class="chip-meta">Iron man</div> - </div> - <div class="chip-action"> - <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> - </div> - </div> - </div> - </div> - - <!-- chips example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</span>> - Crime - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> -<<span class="tag">/div</span>> - -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</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"</span> /> - Yan Zhu - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="autocomplete" class="container grid-960"> - <header class="text-center"><h4>autocomplete</h4></header> - <section class="notes"> - <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p> - </section> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input"> - <div class="chip-sm"> - <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure> - Tony Stark - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <img src="demo/img/avatar-1.png" class="avatar" /> - Thor Odinson - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <img src="demo/img/avatar-4.png" class="avatar" /> - Steve Rogers - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Bruce Banner - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm selected"> - Natasha Romanoff - <button class="btn btn-clear"></button> - </div> - <input class="form-input" type="text" placeholder="" /> - </div> - </div> - </div> - <div class="form-group col-xs-12"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input"> - <div class="chip-sm"> - Tony Stark - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Thor Odinson - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Steve Rogers - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - Bruce Banner - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm selected"> - Natasha Romanoff - <button class="btn btn-clear"></button> - </div> - <input class="form-input" type="text" placeholder="" /> - </div> - </div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="form-group"> - <div class="form-autocomplete"> - <div class="form-autocomplete-input"> - <div class="chip-sm"> - Bruce Banner - <button class="btn btn-clear"></button> - </div> - <div class="chip-sm"> - <img src="demo/img/avatar-1.png" class="avatar" /> - Thor Odinson - <button class="btn btn-clear"></button> - </div> - <input class="form-input" type="text" placeholder="typing here" value="S" /> - </div> - <ul class="menu"> - <li class="menu-item"> - <a href="#autocomplete"> - <div class="chip"> - <div class="chip-icon"> - <img src="demo/img/avatar-4.png" class="avatar" /> - </div> - <div class="chip-content"> - Steve Rogers - </div> - </div> - </a> - <a href="#autocomplete"> - <div class="chip"> - <div class="chip-icon"> - <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure> - </div> - <div class="chip-content"> - Tony Stark - </div> - </div> - </a> - </li> - </ul> - </div> - </div> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the autocomplete. </p> - <p>The autocomplete HTML structure is exampled below.</p> - </section> - - <!-- autocomplete example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete"</span>> - <span class="com"><!-- autocomplete input container --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input"</span>> - <span class="com"><!-- autocomplete chips --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm"</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"</span> /> - Yan Zhu - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-sm selected"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-2.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - Yan Zhu - <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span>><<span class="tag">/button</span>> - <<span class="tag">/div</span>> - <span class="com"><!-- autocomplete real input box --></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">placeholder</span>=<span class="atv">"typing here"</span> /> - <<span class="tag">/div</span>> - <span class="com"><!-- autocomplete suggestion list --></span> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> - <span class="com"><!-- menu list chips --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> - Steve Rogers - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">class</span>=<span class="atv">"avatar"</span> /> - <<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"chip-content"</span>> - Yan Zhu - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">/ul</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="tooltips" class="container grid-960"> - <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> - </section> - <div class="columns text-center"> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip" data-tooltip="Lorem ipsum" data-tooltip-pos="top">top tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Lorem ipsum">right tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Lorem ipsum">bottom tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Lorem ipsum">left tooltip</button> - </div> - </div> - <section class="notes"> - <p>Tooltip component is built entirely in CSS.</p> - <p>Add the class <code>tooltip</code> and the attribute <code>data-tooltip</code>, which contains the tooltip content, to non self closing elements. And add the class name <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> to define the position of a tooltip. By default, the tooltip appears above the element.</p> - </section> - - <!-- 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> - - <section id="badges" class="container grid-960"> - <header class="text-center"><h4>badges</h4></header> - <section class="notes"> - <p><strong>Badges</strong> are often used as unread number indicators.</p> - </section> - <div class="columns"> - <div class="column col-xs-6"> - <span class="badge" data-badge="1"> - Notifications - </span> - </div> - <div class="column col-xs-6"> - <span class="badge" data-badge="99"> - Notifications - </span> - </div> - <div class="column col-xs-6"> - <span class="badge" data-badge="999"> - Notifications - </span> - </div> - <div class="column col-xs-6"> - <span class="badge" data-badge="…"> - Notifications - </span> - </div> - </div> - <section class="notes"> - <p>Add the class <code>badge</code> to non self closing elements. And add the attribute <code>data-badge</code> to define the content of a badge. The badge will appear in the top-right direction of the element.</p> - </section> - - <!-- 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="toasts" class="container grid-960"> - <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> - </section> - <div class="columns"> - <div class="column col-sm-12 col-6"> - <div class="toast"> - <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>toast</code>. You can add any text within the container, and even icons. You may also add a close button with the class <code>btn-clear</code> if you need. </p> - </section> - <div class="columns"> - <div class="column col-sm-12"> - <div class="toast toast-primary"> - <button class="btn btn-clear float-right"></button> - <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - <div class="column col-sm-12"> - <div class="toast toast-success"> - <button class="btn btn-clear float-right"></button> - <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - <div class="column col-sm-12"> - <div class="toast toast-danger"> - <button class="btn btn-clear float-right"></button> - <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - </div> - <section class="notes"> - <p>And you can add the class <code>toast-primary</code>, <code>toast-success</code> or <code>toast-danger</code> for additional toast colors.</p> - </section> - - <!-- 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 float-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 float-right"</span>><<span class="tag">/button</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-error_outline"</span>><<span class="tag">/i</span>> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="menus" class="container grid-960"> - <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> - </section> - <div class="columns"> - <div class="column col-xs-6"> - <ul class="menu"> - <li class="menu-item"> - <div class="chip"> - <div class="chip-icon"> - <img src="demo/img/avatar-4.png" class="avatar" /> - </div> - <div class="chip-content"> - Steve Rogers - </div> - </div> - </li> - <li class="divider"></li> - <li class="menu-item"> - <a href="#menus" class="active"> - My profile - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Settings - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Logout - </a> - </li> - </ul> - </div> - <div class="column col-xs-6"> - <ul class="menu"> - <li class="menu-header"> - <span class="menu-header-text"> - Go to - </span> - </li> - <li class="menu-item"> - <a href="#menus"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Hipchat - </a> - </li> - <li class="menu-item"> - Skype - </li> - </ul> - </div> - <div class="column col-xs-6"> - <ul class="menu"> - <li class="menu-header"> - <span class="menu-header-text"> - Go to - </span> - </li> - <li class="menu-item"> - <a href="#menus"> - <i class="icon icon-link"></i> Slack - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - <i class="icon icon-link"></i> Hipchat - </a> - </li> - <li class="menu-item"> - <i class="icon icon-link"></i> Skype - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>menu</code>. And add child elements with the classname <code>menu-item</code>. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> - </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="com"><!-- menu header --></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="com"><!-- menu item --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Slack - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Hipchat - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Skype - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <span class="com"><!-- menu divider --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Settings - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</pre> - - </section> - - <section id="dropdowns" class="container grid-960"> - <header class="text-center"><h4>dropdowns</h4></header> - <section class="notes"> - <p>A <strong>dropdown</strong> is a combination of buttons and menus.</p> - </section> - <div class="columns"> - <div class="column col-xs-6"> - <div class="dropdown"> - <div class="btn-group"> - <a class="btn">dropdown button</a> - <a class="btn dropdown-toggle" tabindex="0"><i class="icon-caret"></i></a> - <ul class="menu"> - <li class="menu-item"> - <a href="#dropdowns"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Hipchat - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Skype - </a> - </li> - </ul> - </div> - </div> - </div> - <div class="column col-xs-6"> - <div class="dropdown"> - <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon-caret"></i></a> - <ul class="menu"> - <li class="menu-item"> - <a href="#dropdowns"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Hipchat - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Skype - </a> - </li> - </ul> - </div> - </div> - <div class="column col-xs-6"> - <div class="dropdown"> - <a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon-caret"></i></a> - <ul class="menu"> - <li class="menu-item"> - <a href="#dropdowns"> - Slack - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Hipchat - </a> - </li> - <li class="menu-item"> - <a href="#dropdowns"> - Skype - </a> - </li> - </ul> - </div> - </div> - </div> - <section class="notes"> - <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p> - <p>Add a container element with the class <code>dropdown</code>. And add a focusable element with the classname <code>dropdown-toggle</code> for the button and a <code>menu</code> component right next to it. </p> - </section> - <section class="notes"> - <p>Also, you can implement your JS to interact with the dropdown menus by adding the class <code>active</code> to the <code>dropdown</code>.</p> - </section> - - <!-- dropdowns example --> -<pre class="code lang-html"> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"dropdown"</span>> - <span class="com"><!-- basic dropdown button --></span> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link dropdown-toggle"</span> <span class="atn">tabindex</span>=<span class="atv">"0"</span>> - dropdown menu <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon-caret"</span>><<span class="tag">/i</span>> - <<span class="tag">/a</span>> - <span class="com"><!-- menu component --></span> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Slack<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Hipchat<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">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>>Skype<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">/ul</span>> - <<span class="tag">/div</span>> - - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"dropdown"</span>> - <span class="com"><!-- dropdown button group --></span> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn"</span>> - dropdown button - <<span class="tag">/a</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn dropdown-toggle"</span> <span class="atn">tabindex</span>=<span class="atv">"0"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon-caret"</span>><<span class="tag">/i</span>> - <<span class="tag">/a</span>> - - <span class="com"><!-- menu component --></span> - <<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> - ... - <<span class="tag">/ul</span>> - <<span class="tag">/div</span>> - <<span class="tag">/div</span>> -</pre> - - </section> - - <section id="navigation" class="container grid-960"> - <header class="text-center"><h4>navigation</h4></header> - <section class="notes"> - <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs, pagination and nav.</p> - </section> - <header id="breadcrumbs" class="text-center"><h5>breadcrumbs</h5></header> - <div class="columns"> - <div class="column"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"> - <a href="#breadcrumbs"> - Home - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs"> - Profile - </a> - </li> - <li class="breadcrumb-item"> - <a href="#breadcrumbs"> - Change avatar - </a> - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>breadcrumb</code>. And add child elements with the classname <code>breadcrumb-item</code>.</p> - </section> - - <!-- 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 id="tabs" class="text-center"><h5>tabs</h5></header> - <div class="columns"> - <div class="column col-xs-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Connect - </a> - </li> - </ul> - </div> - <div class="column col-xs-12"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#tabs"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Connect - </a> - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>tab</code>. And add child elements with the classname <code>tab-item</code>. You can add the class <code>tab-block</code> for a full-width tab. The <code>tab-item</code> or its child <code><a></code> with the class <code>active</code> will be highlighted.</p> - </section> - - <!-- 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> <span class="atn">class</span>=<span class="atv">"active"</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> - <div class="columns"> - <div class="column col-xs-12"> - <ul class="tab"> - <li class="tab-item active"> - <a href="#tabs" class="badge" data-badge="9"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs" class="badge" data-badge="99"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Connect - </a> - </li> - </ul> - </div> - <div class="column col-xs-12"> - <ul class="tab tab-block"> - <li class="tab-item active"> - <a href="#tabs" class="badge" data-badge="9"> - Music - </a> - </li> - <li class="tab-item"> - <a href="#tabs" class="badge" data-badge="99"> - Playlists - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Radio - </a> - </li> - <li class="tab-item"> - <a href="#tabs"> - Connect - </a> - </li> - </ul> - </div> - </div> - - <section class="notes"> - <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p> - </section> - - <!-- tabs with badges 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> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"9"</span>> - Music - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</pre> - - <header id="pagination" class="text-center"><h5>pagination</h5></header> - <div class="columns"> - <div class="column col-xs-12"> - <ul class="pagination"> - <li class="page-item"> - <a href="#pagination">Previous</a> - </li> - <li class="page-item"> - <a href="#pagination">1</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">6</a> - </li> - <li class="page-item active"> - <a href="#pagination">7</a> - </li> - <li class="page-item"> - <a href="#pagination">8</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">12</a> - </li> - <li class="page-item"> - <a href="#pagination">Next</a> - </li> - </ul> - </div> - <div class="column col-xs-12"> - <ul class="pagination"> - <li class="page-item"> - <a href="#pagination" disabled>Previous</a> - </li> - <li class="page-item active"> - <a href="#pagination">1</a> - </li> - <li class="page-item"> - <a href="#pagination">2</a> - </li> - <li class="page-item"> - <a href="#pagination">3</a> - </li> - <li class="page-item"> - <span>...</span> - </li> - <li class="page-item"> - <a href="#pagination">12</a> - </li> - <li class="page-item"> - <a href="#pagination">Next</a> - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>pagination</code>. And add child elements with the classname <code>page-item</code>. The <code>page-item</code> with the class <code>active</code> will be highlighted.</p> - </section> - - <!-- pagination example --> -<pre class="code lang-html"> -<<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">disabled</span>>Previous<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item active"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>1<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>2<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>3<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">span</span>>...<<span class="tag">/span</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>12<<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Next<<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</pre> - - <header id="nav" class="text-center"><h5>nav</h5></header> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">Elements</a> - </li> - <li class="nav-item"> - <a href="#nav"><strong>Layout</strong></a> - <ul class="nav"> - <li class="nav-item"> - <a href="#nav">flexbox grid</a> - </li> - <li class="nav-item"> - <a href="#nav">responsive</a> - </li> - <li class="nav-item"> - <a href="#nav">navbar</a> - </li> - <li class="nav-item"> - <a href="#nav">empty states</a> - </li> - </ul> - </li> - <li class="nav-item"> - <a href="#nav">Components</a> - </li> - <li class="nav-item"> - <a href="#nav">Utilities</a> - </li> - </ul> - </div> - - </div> - <section class="notes"> - <p>Add a container element with the class <code>nav</code>. And add child elements with the classname <code>nav-item</code>. The <code>nav-item</code> with the class <code>active</code> will be highlighted.</p> - </section> - - </section> - - <section id="modals" class="container grid-960"> - <header class="text-center"><h4>modals</h4></header> - <section class="notes"> - <p><strong>Modals</strong> are flexible dialog prompts.</p> - </section> - <div class="columns"> - <div class="column"> - <div class="modal-temp"> - <div class="modal-overlay"></div> - <div class="modal-container" role="document"> - <div class="modal-header"> - <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> - <div class="modal-title">Modal title</div> - </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 class="notes"> - <p>Add a container element with the class <code>modal</code>. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the class name <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p> - <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the class <code>active</code> to the <code>modal</code> container</p> - </section> - - <!-- modals example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal active"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span>><<span class="tag">/div</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 float-right"</span>><<span class="tag">/button</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-title"</span>>Modal title<<span class="tag">/div</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> - - <header class="text-center"><h5>modal sizes</h5></header> - <div class="columns"> - <div class="column col-6 col-xs-12"> - <div class="modal-temp modal-sm"> - <div class="modal-overlay"></div> - <div class="modal-container" role="document"> - <div class="modal-header"> - <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> - <div class="modal-title">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </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 class="column col-6 col-xs-12"> - <div class="modal-temp modal-sm"> - <div class="modal-overlay"></div> - <div class="modal-container" role="document"> - <div class="modal-header"> - <button type="button" class="btn btn-clear float-right" aria-label="Close"></button> - <div class="modal-title">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <form> - <div class="form-group"> - <label class="form-label" for="input-example-7">Name</label> - <input class="form-input" type="text" id="input-example-7" placeholder="Name" /> - </div> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender" /> - <i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" checked /> - <i class="form-icon"></i> Female - </label> - </div> - </form> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-link">Close</button> - <button class="btn btn-primary">Submit</button> - </div> - </div> - </div> - </div> - </div> - <section class="notes"> - <p>Add the class <code>modal-sm</code> for a smaller modal dialog. </p> - </section> - - <!-- modals example --> -<pre class="code lang-html"> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal modal-sm"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span>><<span class="tag">/div</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> - <span class="com"><!-- modal structure here --></span> - <<span class="tag">/div</span>> -<<span class="tag">/div</span>> -</pre> - - </section> - - <section id="cards" class="container grid-960"> - <header class="text-center"><h4>cards</h4></header> - <section class="notes"> - <p><strong>Cards</strong> are flexible content containers.</p> - </section> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <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 class="column col-4 col-xs-12"> - <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 btn-primary">Buy</button> - <button class="btn">Buy</button> - <button class="btn">Buy</button> - </div> - </div> - </div> - </div> - <div class="column col-4 col-xs-12"> - <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-image"> - <img class="img-responsive" src="demo/img/osx-yosemite-2.jpg" /> - </div> - <div class="card-footer"> - <a href="#" class="btn btn-primary">Search</a> - <a href="#" class="btn btn-link">Share</a> - </div> - </div> - </div> - </div> - <div class="columns"> - <div class="column col-4 col-xs-12"> - <div class="card"> - <div class="card-image"> - <img class="img-responsive" src="demo/img/osx-el-capitan.jpg" /> - </div> - <div class="card-footer"> - <a href="#" class="btn btn-primary">Buy</a> - <a href="#" class="btn btn-link">Share</a> - </div> - <div class="card-body"> - <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process. - </div> - - </div> - </div> - <div class="column col-4 col-xs-12"> - <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-body"> - To make a contribution to the world by making tools for the mind that advance humankind. - </div> - <div class="card-image"> - <img class="img-responsive" src="demo/img/osx-yosemite.jpg" /> - </div> - </div> - </div> - <div class="column col-4 col-xs-12"> - <div class="card"> - <div class="card-header"> - <h4 class="card-title">Google I/O</h4> - </div> - <div class="card-body"> - An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. - </div> - <div class="card-footer"> - <div class="chip"> - <div class="chip-content"> - <div class="chip-title">Google</div> - <div class="chip-meta">Software and hardware</div> - </div> - <div class="chip-action"> - <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button> - </div> - </div> - </div> - </div> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>card</code>. And add child elements with the class name <code>card-image</code>, <code>card-header</code>, <code>card-content</code> and/or <code>card-footer</code>. The <code>card-image</code> can be placed in any position. </p> - </section> - - <!-- 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"</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 id="utilities" class="container grid-960"> - <section class="notes text-center"> - <ul class="tab inline-flex"> - <li class="tab-item"> - <a href="#elements"> - elements - </a> - </li> - <li class="tab-item"> - <a href="#layout"> - layout - </a> - </li> - <li class="tab-item"> - <a href="#components"> - components - </a> - </li> - <li class="tab-item active"> - <a href="#utilities"> - utilities - </a> - </li> - </ul> - </section> - <section class="notes text-center"> - <div class="btn-group"> - <a href="#position" class="btn btn-primary">position</a> - <a href="#display" class="btn btn-primary">display</a> - <a href="#text" class="btn btn-primary">text</a> - <a href="#shapes" class="btn btn-primary">shapes</a> - <a href="#loading" class="btn btn-primary">loading</a> - </div> - </section> - </section> - - <section id="position" class="container grid-960"> - <section class="notes"> - <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p> - </section> - - <!-- position utilities example --> -<pre class="code lang-html"> -<span class="com"><!-- clear float --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"clearfix"</span>><<span class="tag">/div</span>> -<span class="com"><!-- float: left and right --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-left"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"float-right"</span>><<span class="tag">/div</span>> -<span class="com"><!-- position: relative, absolute and fixed --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rel"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"abs"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"fixed"</span>><<span class="tag">/div</span>> -<span class="com"><!-- centered block --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"centered"</span>><<span class="tag">/div</span>> -<span class="com"><!-- margin: 10px and 5px in 4 directions. mt-10 = margin-top: 10px; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-10"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"mt-5"</span>><<span class="tag">/div</span>> -<span class="com"><!-- padding: 10px and 5px in 4 directions. pt-10 = padding-top: 10px; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-10"</span>><<span class="tag">/div</span>> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"pt-5"</span>><<span class="tag">/div</span>> -</pre> - - </section> - - <section id="display" class="container grid-960"> - <section class="notes"> - <p><strong>Display utilities</strong> are used for display and hidden things.</p> - </section> - - <!-- display utilities example --> -<pre class="code lang-html"> -<span class="com"><!-- display: block; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"block"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline-block; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline-block"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: flex; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"flex"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: inline-flex; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"inline-flex"</span>><<span class="tag">/div</span>> -<span class="com"><!-- display: none; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"hide"</span>><<span class="tag">/div</span>> -<span class="com"><!-- visibility: visible; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"visible"</span>><<span class="tag">/div</span>> -<span class="com"><!-- visibility: hidden; --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"invisible"</span>><<span class="tag">/div</span>> -<span class="com"><!-- hide text contents --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-hide"</span>><<span class="tag">/div</span>> -</pre> - - </section> - - <section id="text" class="container grid-960"> - <section class="notes"> - <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p> - </section> - - <!-- text utilities example --> -<pre class="code lang-html"> -<span class="com"><!-- left-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-left"</span>><<span class="tag">/div</span>> -<span class="com"><!-- center-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-center"</span>><<span class="tag">/div</span>> -<span class="com"><!-- right-aligned text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-right"</span>><<span class="tag">/div</span>> -<span class="com"><!-- justified text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-justify"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Lowercased text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-lowercase"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Uppercased text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-uppercase"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Capitalized text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-capitalize"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Normal weight text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-normal"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Bold text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-bold"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Italicized text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-italic"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Larger text (120%) --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-large"</span>><<span class="tag">/div</span>> - -<span class="com"><!-- Overflow behavior: display an ellipsis to represent clipped text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-ellipsis"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Overflow behavior: truncate the text --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-clip"</span>><<span class="tag">/div</span>> -<span class="com"><!-- Text may be broken at arbitrary points --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"text-break"</span>><<span class="tag">/div</span>> -</pre> - - </section> - - <section id="shapes" class="container grid-960"> - <section class="notes"> - <p><strong>Shape utilities</strong> are used for change element shapes.</p> - </section> - - <!-- shape utilities example --> -<pre class="code lang-html"> -<span class="com"><!-- rounded element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"rounded"</span>><<span class="tag">/div</span>> -<span class="com"><!-- circle element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"circle"</span>><<span class="tag">/div</span>> -</pre> - - </section> - - <section id="divider" class="container grid-960"> - <section class="notes"> - <p>A <strong>Divider</strong> is used for separating elements.</p> - </section> - <div class="columns"> - <div class="column"> - <div class="divider mt-10"></div> - </div> - </div> - - <!-- shape utilities example --> -<pre class="code lang-html"> -<span class="com"><!-- divider element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/div</span>> -</pre> - - </section> - - <section id="loading" class="container grid-960"> - <section class="notes"> - <p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the class <code>loading</code> to buttons for loading status.</p> - </section> - <div class="columns"> - <div class="column"> - <div class="loading"></div> - </div> - </div> - <!-- loading example --> -<pre class="code lang-html"> -<span class="com"><!-- loading element --></span> -<<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"loading"</span>><<span class="tag">/div</span>> -</pre> - - </section> - </section> - <footer class="bg-grey"> - <section id="copyright" class="grid-footer container grid-960"> - <p> - <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.32 - </p> - <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> - </section> - </footer> - <script> - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); - - ga('create', 'UA-2702768-8', 'auto'); - ga('send', 'pageview'); - </script> -</body> -</html> |