From 38962f94d497a40435862d187f30b04f2b68205d Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 15 Aug 2017 12:16:53 +0800 Subject: Improve Docs homepage --- docs/elements.html | 72 +++++++++++++++++++++++++++--------------------------- 1 file changed, 36 insertions(+), 36 deletions(-) (limited to 'docs/elements.html') diff --git a/docs/elements.html b/docs/elements.html index a72fe82..836cfc6 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -6,7 +6,7 @@ - Elements - Spectre.css + Elements - Spectre.css CSS Framework @@ -15,8 +15,8 @@
-
@@ -253,7 +253,7 @@

Typography

-
+

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

Headings

@@ -285,7 +285,7 @@

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.

@@ -376,7 +376,7 @@

Optimized for east asian fonts

你好, こんにちは, 안녕하세요
-
+
Chinese (Simplified)

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

Chinese (Tranditional)
@@ -386,7 +386,7 @@
Korean

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

-
+

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

@@ -396,10 +396,10 @@ <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p> -
+

And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

-
+

祇園精舎の鐘の声、諸行無常の響きあり。

祇園精舎の鐘の声、諸行無常の響きあり。

@@ -487,7 +487,7 @@

Tables

-
+

Tables include default styles for tables and data sets.

@@ -521,7 +521,7 @@
-
+

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

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

@@ -549,7 +549,7 @@

Buttons

-
+

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

@@ -564,11 +564,11 @@
-
+

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

-
+

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

@@ -584,7 +584,7 @@
-
+

A button with the loading class can show loading indicator.

@@ -624,7 +624,7 @@
-
+

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

@@ -639,7 +639,7 @@ <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button> -
+

Please note that you could use the btn-action class for a square button, or add another circle class for a round button, which is often used as a Float Action Button (FAB).

@@ -694,7 +694,7 @@
-
+

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

@@ -710,7 +710,7 @@

Forms

-
+

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

@@ -817,12 +817,12 @@ </form> -
+

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

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] class to the child elements for form row layout.

@@ -921,7 +921,7 @@

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.

@@ -958,7 +958,7 @@

Form icons

-
+

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

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

You can use the loading class for loading or posting state.

@@ -1180,7 +1180,7 @@
-
+

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

@@ -1206,7 +1206,7 @@

Form validation styles

-
+

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

@@ -1305,7 +1305,7 @@

Form disabled styles

-
+

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

@@ -1359,7 +1359,7 @@

Icons experimental

-
+

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

@@ -1608,7 +1608,7 @@

Labels

-
+

Labels are formatted text tags for highlighted, informative information.

@@ -1620,7 +1620,7 @@ error label
-
+

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

@@ -1633,7 +1633,7 @@

Codes

-
+

Codes are inline and multiline code snippets.

For inline code, you can use the element <code>. For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. The data-lang attribute is rendered as the language name in the top right.

@@ -1656,11 +1656,11 @@

Media

-
+

Media includes responsive images, figures and video classes.

Images

-
+

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

@@ -1669,7 +1669,7 @@
-
+

Add the img-fit-contain or img-fit-cover class to <img> or <video> elements. The media will crop itself to fit inside the element (and you don't need another container). This feature can replace the background image trick. Microsoft Edge support is in preview.

@@ -1692,7 +1692,7 @@ <img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="..." /> -
+

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

@@ -1711,7 +1711,7 @@

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. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.

-- cgit v1.3.1-23-gd82d