From 1c439a3201df5b559b124940c8fcc2702c345631 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 10 Jun 2018 10:38:45 +0800 Subject: Update Docs anchor --- docs/elements.html | 66 +++++++++++++++++++++++++++--------------------------- 1 file changed, 33 insertions(+), 33 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index 922d391..6a7f1b1 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -130,7 +130,7 @@
-

Typography

+

Typography

@@ -143,7 +143,7 @@

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

-

Headings

+

Headings

H1 Heading 40px

@@ -168,7 +168,7 @@ <h1>H1 Heading <small class="label">40px</small></h1> <span class="h1">H1 Heading</span> -

Paragraphs

+

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.

@@ -176,7 +176,7 @@ 
<p>Lorem ipsum dolor sit amet, ...</p>
 <p>...</p>
-

Semantic text elements

+

Semantic text elements

I18Nabbr
Boldstrongb
@@ -217,7 +217,7 @@ y + 2var
-

Optimized for East Asian fonts

+

Optimized for East Asian fonts

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

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

Fonts

+

Fonts

Spectre sets the most common and best font-family for each OS with fallback support in old systems. There are also fonts targeted East Asian typography.

@@ -267,7 +267,7 @@ /* Korean (lang="ko") targeted */ font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif; -

Blockquote

+

Blockquote

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

- Bill Gates @@ -277,7 +277,7 @@ <cite>- Bill Gates</cite> </blockquote> -

Lists

+

Lists

    @@ -336,7 +336,7 @@ </dl>
-

Tables

+

Tables

Tables include default styles for tables and data sets.

@@ -397,7 +397,7 @@ </table>
-

Buttons

+

Buttons

@@ -416,7 +416,7 @@ <button class="btn btn-primary">primary button</button> <button class="btn btn-link">link button</button> -

Button colors

+

Button colors

@@ -429,7 +429,7 @@ 
<button class="btn btn-success">success button</button>
 <button class="btn btn-error">error button</button>
-

Button sizes

+

Button sizes

@@ -472,7 +472,7 @@ 
<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
 <button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button>
-

Button states

+

Button states

Add the active class for active button state style.

@@ -505,7 +505,7 @@ <button class="btn loading">button</button> <button class="btn btn-primary loading">primary button</button> -

Button groups

+

Button groups

@@ -546,7 +546,7 @@ </div>
-

Forms

+

Forms

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

@@ -683,7 +683,7 @@ </div>

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

-

Horizontal forms

+

Horizontal forms

If you want to have a horizontal form, add the form-horizontal class to the <form> container. And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout.

@@ -768,7 +768,7 @@ <!-- form structure --> </form> -

Form sizes

+

Form sizes

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

@@ -801,7 +801,7 @@

You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.

-

Form icons

+

Form icons

Spectre Form components has Spectre Icons support.

Add a wrapper with the has-icon-left/has-icon-right class to <input> element. And add the icon with form-icon class next to the <input>. @@ -868,7 +868,7 @@ <i class="form-icon loading"></i> </div> -

Input types

+

Input types

@@ -947,7 +947,7 @@
-

Input groups

+

Input groups

@@ -1036,7 +1036,7 @@ <button class="btn btn-primary input-group-btn">Submit</button> </div> -

Form validation styles

+

Form validation styles

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

@@ -1128,7 +1128,7 @@ </div> </form> -

Form disabled styles

+

Form disabled styles

Add the disabled attribute to the element or <fieldset> for a disabled form components style.

@@ -1218,12 +1218,12 @@ </fieldset>
-

Icons

+

Icons

Icons are single-element, responsive and pure CSS icons. You can include spectre-icons.css located in the dist folder to your web <head> to have these CSS icons.

-

Navigation icons

+

Navigation icons

@@ -1278,7 +1278,7 @@

icon-more-vert

-

Action icons

+

Action icons

@@ -1349,7 +1349,7 @@

icon-upload

-

Object icons

+

Object icons

@@ -1386,7 +1386,7 @@ 
<i class="icon icon-menu"></i>
-

Icon sizes

+

Icon sizes

Use icon-2x, icon-3x and icon-4x classes to increase icon sizes. You can set font-size to have different icon sizes.

@@ -1407,7 +1407,7 @@ 
<i class="icon icon-2x icon-mail"></i>
-

Labels

+

Labels

Labels are formatted text tags for highlighted, informative information.

default labelprimary labelsecondary labelsuccess labelwarning labelerror label
@@ -1427,7 +1427,7 @@ <span class="label label-rounded label-primary">primary label</span>
-

Code

+

Code

Code is used for styling inline and multiline code snippets.

For inline code, you can use the <code> element. For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. @@ -1445,9 +1445,9 @@ </code></pre>

-

Media

+

Media

Media includes responsive images, figures and video classes.

-

Images

+

Images

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

macOS El Capitan Wallpaper
@@ -1471,7 +1471,7 @@ <img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="..."> <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="..."> -

Figure

+

Figure

You can use the element <figure> for an image with a caption. Add the figure class to <figure> element. The images with the img-responsive class will be responsive. @@ -1485,7 +1485,7 @@

-

Video

+

Video

For responsive video, add a container with the video-responsive class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. -- cgit v1.3.1-23-gd82d