From 6a0b4cbb5895496ab8e204b5ef04732c4d9fdf1a Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Mon, 20 Feb 2017 10:26:45 +0800 Subject: ADD: New Documents experience --- docs/elements.html | 1065 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1065 insertions(+) create mode 100644 docs/elements.html (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html new file mode 100644 index 0000000..1b3056c --- /dev/null +++ b/docs/elements.html @@ -0,0 +1,1065 @@ + + + + + + + + + Elements - Spectre.css + + + + + +
+
+ +
+
+ +
+
+
+ +
+ Back to top +
+
+
+
+

Typography

+
+

Typography sets default styles for headings, paragraphs, semantic text, blockquote, lists and code elements.

+
+ +

Headings

+

H1 Title 5rem

+

H2 Title 4rem

+

H3 Title 3rem

+

H4 Title 2.4rem

+
H5 Title 2rem
+
H6 Title 1.6rem
+ + +
+<h1>H1 Title</h1>
+<h2>H2 Title <small class="label">4rem</small></h2>
+
+ +

Paragraphs

+

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.

+

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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
+
+ +

Semantic text elements

+
+
+ I18N + <abbr> +
+
+ Bold + <strong> <b> +
+
+ Citation + <cite> +
+
+ Hello World! + <code> +
+
+ Deleted + <del> +
+
+ Emphasis + <em> +
+
+ Italic + <i> +
+
+ Inserted + <ins> +
+
+ Ctrl + S + <kbd> +
+
+ Highlighted + <mark> +
+
+ + 漢 kan + 字 ji + + <ruby> +
+
+ Strikethrough + <s> +
+
+ Sample + <samp> +
+
+ Text Subscripted + <sub> +
+
+ Text Superscripted + <sup> +
+
+ + <time> +
+
+ Underline + <u> +
+
+ x = y + 2 + <var> +
+
+ +

Optimized for east asian fonts

+

你好, こんにちは, 안녕하세요

+
Chinese (Simplified)
+

革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

+
Chinese (Tranditional)
+

山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」

+
Japanese
+

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。

+
Korean
+

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

+ +
+

Use the attribute lang or add the class cjk to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.

+
+ + +
+<p class="cjk">祇園精舎の鐘の声、諸行無常の響きあり。……</p>
+<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。……</p>
+
+ +

Blockquote

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+ - Source +
+ + +
+<blockquote>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+  <cite>- Source</cite>
+</blockquote>
+
+ +

Lists

+
+
+
    +
  • list item 1
    • +
  • list item 2 +
      +
    • list item 2.1
      • +
    • list item 2.2
      • +
    • list item 2.3
      • +
    +
    • +
  • list item 3
    • +
+
+
+
    +
  1. list item 1
    2. +
  2. list item 2 +
      +
    1. list item 2.1
      2. +
    2. list item 2.2
      3. +
    3. list item 2.3
      4. +
    +
    3. +
  3. list item 3
    4. +
+
+
+
+
description list term 1
+
description list description 1
+
description list term 2
+
description list description 2
+
description list term 3
+
description list description 3
+
+
+
+ + +
+<!-- unordered list -->
+<ul>
+  <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>
+
+<!-- description list -->
+<dl>
+  <dt>description list term</dt>
+  <dd>description list description</dd>
+</dl>
+
+ +
+ +
+

Tables

+
+

Tables include default styles for tables and data sets.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
namedurationgenrerelease date
The Shawshank Redemption2h 22minCrime, Drama14 October 1994
The Godfather2h 55minCrime, Drama24 March 1972
Schindler's List3h 15minBiography, Drama, History4 February 1994
Se7en2h 7minCrime, Drama, Mystery22 September 1995
+
+

Add the class table to any <table> element. The class will add padding, border and emphasized table header. Use table-striped to <table> to add zebra striped style. For hoverable table rows, you can add the class table-hover to enable hover style.

+

Use the class selected to make <tr> element highlighted.

+
+ + +
+<table class="table table-striped table-hover">
+  <thead>
+    <tr>
+      <th>name</th>
+      <th>duration</th>
+      <th>genre</th>
+      <th>release date</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="selected">
+      <td>The Shawshank Redemption</td>
+      <td>2h 22min</td>
+      <td>Crime, Drama</td>
+      <td>14 October 1994</td>
+    </tr>
+  </tbody>
+</table>
+
+ +
+ +
+

Buttons

+
+

Buttons include simple button styles for actions in different types and sizes.

+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+

Add the class btn to <a>, <input> or <button> elements for a default button. There are classes btn-primary and btn-link for predefined primary and link buttons. A button with the class loading can show loading indicator.

+
+ + +
+<button class="btn">default button</button>
+<button class="btn btn-primary">primary button</button>
+<button class="btn btn-link">link button</button>
+
+<!-- a button with loading state -->
+<button class="btn loading">button</button>
+
+ +
+

Add the class disabled or the attribute disabled for a disabled button.

+
+ +
+
+ +
+
+ +
+
+ +
+
+ +

Button sizes

+ +
+
+ + + +
+
+
+

Add the class btn-sm or btn-lg for small or large button size. Also, you can add the class btn-block for a full-width button.

+
+ + +
+<button class="btn btn-lg">large button</button>
+<button class="btn btn-sm">small button</button>
+
+<button class="btn btn-block">block button</button>
+
+ +
+
+ + + +
+
+
+

Icons with the class icon can be correctly rendered in each button size.

+
+ + +
+<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>
+
+ +

Button groups

+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
+

If you want to use buttons as a group, add the class btn-group to the container. You can add the class btn-group-block for a full-width button group.

+
+ + +
+<div class="btn-group btn-group-block">
+  <button class="btn">first button</button>
+  <button class="btn">second button</button>
+  <button class="btn">third button</button>
+</div>
+
+ +
+ +
+

Forms

+
+

Forms provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch.

+
+
+
+
+
+ + +
+
+ + +
+
+ + + +
+
+ +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+ + +
+<form>
+  <!-- form input control -->
+  <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>
+  <!-- form radio control -->
+  <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 select control -->
+  <div class="form-group">
+    <select class="form-select">
+      <option>Choose an option</option>
+      <option>Slack</option>
+      <option>Skype</option>
+      <option>Hipchat</option>
+    </select>
+  </div>
+  <!-- form switch control -->
+  <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>
+  <!-- form textarea control -->
+  <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>
+  <!-- form checkbox control -->
+  <div class="form-group">
+    <label class="form-checkbox">
+      <input type="checkbox" />
+      <i class="form-icon"></i> Remember me
+    </label>
+  </div>
+</form>
+
+ +
+

You can use :indeterminate pseudo class for indeterminate state of checkboxes.

+

If you want to have a horizontal form, add the class form-horizontal to the <form> container. And add the class col-[1-12] to the child elements for form row layout.

+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ + +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+ + +
+<form class="form-horizontal">
+  <div class="form-group">
+    <div class="col-3">
+      <label class="form-label" for="input-example-1">Name</label>
+    </div>
+    <div class="col-9">
+      <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
+    </div>
+  </div>
+  <!-- form structure -->
+</form>
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+

To use form validation styles, add is-success and is-danger to the controls or add has-success and has-danger to parent elements. You can use the class form-input-hint to provide form validation success and error messages.

+
+ +
+
+
+ + +

The name is invaild.

+
+
+ + +

The email is available.

+
+
+
+
+
+
+ +

The option is invaild.

+
+
+ +

The option is available.

+
+
+
+ + +
+<form>
+  <!-- form validation class: has-success -->
+  <div class="form-group has-success">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
+    <p class="form-input-hint">The name is invaild.</p>
+  </div>
+
+  <!-- form validation class: is-success -->
+  <div class="form-group">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input is-success" type="text" id="input-example-1" placeholder="Name" />
+    <p class="form-input-hint">The name is invaild.</p>
+  </div>
+</form>
+
+ +
+

For smaller or larger input and select controls, you could add input-sm/input-lg and select-sm/select-lg to the elements.

+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +

Input groups

+
+
+
+ + @slack.com +
+
+
+
+ slack.com/ + + +
+
+
+
+
+
+ + @slack.com +
+
+
+
+ slack.com/ + + +
+
+
+
+
+
+ + @slack.com +
+
+
+
+ slack.com/ + + +
+
+
+
+

If you want to attach text and button along with an input, add the class input-group to the input container. And add the class input-group-addon to the text element and input-group-btn to the button element.

+
+ + +
+<!-- normal input group -->
+<div class="input-group">
+  <span class="input-group-addon">slack.com/</span>
+  <input type="text" class="form-input" placeholder="site name" />
+</div>
+
+<!-- large input group -->
+<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>
+
+<!-- normal input group with button -->
+<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>
+
+ +
+ +
+

Labels

+
+

Labels are formatted text tags for highlighted, informative information.

+
+
+
+ default label + primary label + success label + danger label +
+
+
+

Add the class label to <span> or <small> elements. You can add another class label-primary, label-success and label-danger for a primary colored label.

+
+ + +
+<span class="label">default label</span>
+<span class="label label-primary">primary label</span>
+
+ +
+ +
+

Media

+
+

Media include responsive images, figures and video classes.

+

Add the class img-responsive to <img> elements. The images will scale with the parent sizes.

+
+
+
+ macOS El Capitan Wallpaper +
+
+
+<img src="img/osx-el-capitan.jpg" class="img-responsive rounded" alt="macOS El Capitan Wallpaper" />
+
+ +
+

You can use the element <figure> for an image with a caption. Add the class figure to <figure> element. The images with the class img-responsive will be responsive. And the included class figure-caption will provide basic style for caption. Also, you can use text-left, text-center and text-right for caption alignment.

+
+
+
+
+ macOS Yosemite Wallpaper +
macOS Yosemite wallpaper
+
+
+
+
+<figure class="figure">
+  <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+  <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
+</figure>
+
+ +
+

For responsive video, add a container with the class video-responsive. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.

+
+
+
+
+ +
+
+
+ + +
+<div class="video-responsive">
+  <iframe src="https://www.youtube.com/embed/BzMLA8YIgG0" width="560" height="315" frameborder="0" allowfullscreen></iframe>
+</div>
+
+ +
+
+
+
+ + + + + -- cgit v1.3.1-23-gd82d