diff --git a/Artworks/Webenv/Style-guide/0.0.1/forms.html b/Artworks/Webenv/Style-guide/0.0.1/forms.html new file mode 100644 index 0000000..66fb173 --- /dev/null +++ b/Artworks/Webenv/Style-guide/0.0.1/forms.html @@ -0,0 +1,485 @@ + + + + + + + + + + + Forms - Home + + + + +
+ + +
+ +
+ +

+ Forms +

+

CentOS Forms Visual Style Guide.

+
+

Table of contents

+
+
+ Forms +
+
+ Elements +
+
+ Recommendations +
+
+
+
+
+

+ Elements +

+
+
+ Fieldset: +
+ input[type="text"] +
+ +
+
+
+ input[type="password"] +
+ +
+
+
+ textarea +
+ +
+
+
+ select +
+ + + + +
+
+
+ checkbox +
+
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+
+
+ radio +
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+
+
+
+
+
+ + + +
Brief fieldset description here ... Brief + fieldset description here ... Brief fieldset description here + ... +
+
+
+
+

+ Recommendations +

+
    +
  • ...
  • +
+ +
+
+
+
+
+ + +
+ + diff --git a/Artworks/Webenv/Style-guide/0.0.1/forms.xhtml b/Artworks/Webenv/Style-guide/0.0.1/forms.xhtml deleted file mode 100644 index c9ef4fa..0000000 --- a/Artworks/Webenv/Style-guide/0.0.1/forms.xhtml +++ /dev/null @@ -1,444 +0,0 @@ - - - - - - - - - - - - - Forms - Home - - - - - - - - - -
- - - - - -
- - - -
- - - -

Forms

- -

CentOS Forms Visual Style Guide.

- -

Table of contents

Forms
Elements
Recommendations
- -

Elements

- -
-
- Fieldset: -
- input[type="text"] -
-
- -
- input[type="password"] -
-
- -
- textarea -
-
- -
- select -
- - - - - - -
-
- -
- checkbox -
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
- -
- -
- -
- radio -
- -
-
-
-
- -
- -
-
-
-
- -
- -
-
- -

- -
- - -
Brief fieldset description here ... Brief - fieldset description here ... Brief fieldset description here - ... -
- -
- -
-
- -

Recommendations

- -
    -
  • ...
  • -
- - -

- -
- -
- - - - -
- - - - diff --git a/Artworks/Webenv/Style-guide/0.0.1/headings.html b/Artworks/Webenv/Style-guide/0.0.1/headings.html new file mode 100644 index 0000000..4087b90 --- /dev/null +++ b/Artworks/Webenv/Style-guide/0.0.1/headings.html @@ -0,0 +1,387 @@ + + + + + + + + + + + Headings - Home + + + + +
+ + +
+ +
+ +

+ Headings +

+

CentOS Headings Visual Style Guide.

+
+

Table of contents

+
+
+ Headings +
+
+ Heading Level 1 +
+
+ Heading Level 2 +
+
+ Heading Level 3 +
+
+ Heading Level 4 +
+
+ Heading Level 5 +
+
+ Heading Level 6 +
+
+
+
+
+
+
+
+
+
+ Recommendations +
+
+
+
+
+

+ Heading Level 1 +

+
<h1 class="title" class="title"><a name="head-5871b1272673f7cf89bcaf48972c848a" href="#head-5871b1272673f7cf89bcaf48972c848a">Heading Level 1</a></h1>
+

+ Heading Level 2 +

+
<h2 class="title"><a name="head-d33a28a4193cffb949f506cfdf770f05" href="#head-d33a28a4193cffb949f506cfdf770f05">Heading Level 2</a></h2>
+

+ Heading Level 3 +

+
<h3 class="title"><a name="head-82dd23c665d8ee437a980459c8b80d7a" href="#head-82dd23c665d8ee437a980459c8b80d7a">Heading Level 3</a></h3>
+

+ Heading Level 4 +

+
<h4 class="title"><a name="head-157dc030ea314f4b53a6ed238113a3f8" href="#head-157dc030ea314f4b53a6ed238113a3f8">Heading Level 4</a></h4>
+
+ Heading Level 5 +
+
<h5 class="title"><a name="head-33628cc07bcbefc4e4732407b8680bf6" href="#head-33628cc07bcbefc4e4732407b8680bf6">Heading Level 5</a></h5>
+
+ Heading Level 6 +
+
<h6 class="title"><a name="head-93b42a4a61a0b05a81aff6224555603c" href="#head-93b42a4a61a0b05a81aff6224555603c">Heading Level 5</a></h6>
+

+ Recommendations +

+

As heading design recommendations:

+
    +
  • +

    When defining headings, make them accessible + using the following structure:

    +
    <h1 class="title"><a name="head-a1811f6545db914813115417011b2df9">Heading</a></h1>
    +

    Where a1811f6545db914813115417011b2df9 is the + result of applying md5sum command to + Heading string. In this case, + Heading is the heading name.

    +
  • +
  • +

    Sometimes headings are used as links. For those + cases, use the following structure:

    +
  • +
    <h1 class="title"><a href="#head-a1811f6545db914813115417011b2df9">Heading</a></h1>
    +

    or the following, if you want to make a heading an + anchor and link of itself:

    +
    <h1 class="title"><a name="head-a1811f6545db914813115417011b2df9" href="#head-a1811f6545db914813115417011b2df9">Heading</a></h1>
    +
  • +

    Avoid using more than 4 levels of headings. If + you think you need to, you probably do; but consider + splitting your content in several pages instead. Too + many headings could affect your content + readability.

    +
  • +
+ +
+
+
+
+
+ + +
+ + diff --git a/Artworks/Webenv/Style-guide/0.0.1/headings.xhtml b/Artworks/Webenv/Style-guide/0.0.1/headings.xhtml deleted file mode 100644 index b1edaca..0000000 --- a/Artworks/Webenv/Style-guide/0.0.1/headings.xhtml +++ /dev/null @@ -1,329 +0,0 @@ - - - - - - - - - - - - - Headings - Home - - - - - - - - - -
- - - - - -
- - - -
- - - -

Headings

- -

CentOS Headings Visual Style Guide.

- - - -

Heading Level 1

-
<h1 class="title" class="title"><a name="head-5871b1272673f7cf89bcaf48972c848a" href="#head-5871b1272673f7cf89bcaf48972c848a">Heading Level 1</a></h1>
- -

Heading Level 2

-
<h2 class="title"><a name="head-d33a28a4193cffb949f506cfdf770f05" href="#head-d33a28a4193cffb949f506cfdf770f05">Heading Level 2</a></h2>
- -

Heading Level 3

-
<h3 class="title"><a name="head-82dd23c665d8ee437a980459c8b80d7a" href="#head-82dd23c665d8ee437a980459c8b80d7a">Heading Level 3</a></h3>
- -

Heading Level 4

-
<h4 class="title"><a name="head-157dc030ea314f4b53a6ed238113a3f8" href="#head-157dc030ea314f4b53a6ed238113a3f8">Heading Level 4</a></h4>
- -
Heading Level 5
-
<h5 class="title"><a name="head-33628cc07bcbefc4e4732407b8680bf6" href="#head-33628cc07bcbefc4e4732407b8680bf6">Heading Level 5</a></h5>
- -
Heading Level 6
-
<h6 class="title"><a name="head-93b42a4a61a0b05a81aff6224555603c" href="#head-93b42a4a61a0b05a81aff6224555603c">Heading Level 5</a></h6>
- -

Recommendations

- -

As heading design recommendations:

- -
    - -
  • When defining headings, make them accessible - using the following structure:

    - -
    <h1 class="title"><a name="head-a1811f6545db914813115417011b2df9">Heading</a></h1>
    - -

    Where a1811f6545db914813115417011b2df9 is the - result of applying md5sum command to - Heading string. In this case, - Heading is the heading name.

    - -
  • - -
  • Sometimes headings are used as links. For those - cases, use the following structure:

  • - -
    <h1 class="title"><a href="#head-a1811f6545db914813115417011b2df9">Heading</a></h1>
    - -

    or the following, if you want to make a heading an - anchor and link of itself:

    - -
    <h1 class="title"><a name="head-a1811f6545db914813115417011b2df9" href="#head-a1811f6545db914813115417011b2df9">Heading</a></h1>
    - -
  • Avoid using more than 4 levels of headings. If - you think you need to, you probably do; but consider - splitting your content in several pages instead. Too - many headings could affect your content - readability.

  • - -
- - -

- -
- -
- - - - -
- - - - diff --git a/Artworks/Webenv/Style-guide/0.0.1/index.html b/Artworks/Webenv/Style-guide/0.0.1/index.html new file mode 100644 index 0000000..d6aeb87 --- /dev/null +++ b/Artworks/Webenv/Style-guide/0.0.1/index.html @@ -0,0 +1,290 @@ + + + + + + + + + + + Welcome - Home + + + + +
+ + +
+ +
+ +

...

+ +
+
+
+
+
+ + +
+ + diff --git a/Artworks/Webenv/Style-guide/0.0.1/index.xhtml b/Artworks/Webenv/Style-guide/0.0.1/index.xhtml deleted file mode 100644 index 1d9be57..0000000 --- a/Artworks/Webenv/Style-guide/0.0.1/index.xhtml +++ /dev/null @@ -1,270 +0,0 @@ - - - - - - - - - - - - - Welcome - Home - - - - - - - - - -
- - - - - -
- - - -
- - -

...

- - -

- -
- -
- - - - -
- - - - diff --git a/Artworks/Webenv/Style-guide/0.0.1/links.html b/Artworks/Webenv/Style-guide/0.0.1/links.html new file mode 100644 index 0000000..5cb6e10 --- /dev/null +++ b/Artworks/Webenv/Style-guide/0.0.1/links.html @@ -0,0 +1,351 @@ + + + + + + + + + + + Links - Home + + + + +
+ + +
+ +
+ +

+ Links +

+

CentOS Links Visual Style Guide.

+
+

Table of contents

+
+
+ Links +
+
+ Common link style +
+
+ Image link style +
+
+ Decorative link styles +
+
+ Recommendations +
+
+
+
+
+

+ Common link style +

+

+ This is a common text link style +

+

+ This is a common nonexistant text link style +

+

+ Image link style +

+

+ + Powered by CentOS + +

+

+ Decorative link styles +

+

http://www.centos.org/. + This is the "www" and "http" link style. It is generally + used to link external sites.

+

centos-devel@centos.org. + This is the "mailto" link style. It is generally used to + display email addresses.

+

header-bg.jpg. This is the + "attachment" link style. It is generally used to display + an attachment.

+

+ Recommendations +

+
    +
  • ...
  • +
+ +
+
+
+
+
+ + +
+ + diff --git a/Artworks/Webenv/Style-guide/0.0.1/links.xhtml b/Artworks/Webenv/Style-guide/0.0.1/links.xhtml deleted file mode 100644 index 41227c8..0000000 --- a/Artworks/Webenv/Style-guide/0.0.1/links.xhtml +++ /dev/null @@ -1,310 +0,0 @@ - - - - - - - - - - - - - Links - Home - - - - - - - - - -
- - - - - -
- - - -
- - - -

Links

- -

CentOS Links Visual Style Guide.

- - - -

Common link style

- -

This is a common text link style

-

This is a common nonexistant text link style

- -

Image link style

- -

Powered by CentOS

- -

Decorative link styles

- -

http://www.centos.org/. - This is the "www" and "http" link style. It is generally - used to link external sites.

- -

centos-devel@centos.org. - This is the "mailto" link style. It is generally used to - display email addresses.

- -

header-bg.jpg. This is the - "attachment" link style. It is generally used to display - an attachment.

- -

Recommendations

- -
    -
  • ...
  • -
- - -

- -
- -
- - - - -
- - - - diff --git a/Artworks/Webenv/Style-guide/0.0.1/lists.html b/Artworks/Webenv/Style-guide/0.0.1/lists.html new file mode 100644 index 0000000..14bc46b --- /dev/null +++ b/Artworks/Webenv/Style-guide/0.0.1/lists.html @@ -0,0 +1,376 @@ + + + + + + + + + + + Lists - Home + + + + +
+ + +
+ +
+ +

+ Lists +

+

CentOS Lists Visual Style Guide.

+
+

Table of contents

+
+
+ Lists +
+
+ Unordered Lists +
+
+ Ordered Lists +
+
+ Definition Lists +
+
+ Nested Lists +
+
+
+
+
+

+ Unordered Lists +

+

This section illustrates the visual style of unordered lists.

+
    +
  • This is a list element.
  • +
  • This is another list element.
  • +
  • This is even another list element.
  • +
+

+ Ordered Lists +

+

This section illustrates the visual style of ordered lists.

+
    +
  1. This is a list element.
  2. +
  3. This is another list element.
  4. +
  5. This is even another list element.
  6. +
+

+ Definition Lists +

+

This section illustrates the visual style of definition lists.

+
+
WWW
+
+

World Wide Web

+
+
CentOS
+
+

Community Enterprise Operating System

+
+
+

+ Nested Lists +

+

Lists may also be nested and different list types may be + used together, as in the following example, which is a + definition list that contains an unordered list (the + ingredients) and an ordered list (the procedure):

+
+
The ingredients
+
+
    +
  • 100 g. flour
  • +
  • 10 g. sugar
  • +
  • 1 cup water
  • +
  • 2 eggs
  • +
  • salt, pepper
  • +
+
+
The procedure
+
+
    +
  1. Mix dry ingredients thoroughly.
  2. +
  3. Pour in wet ingredients.
  4. +
  5. Mix for 10 minutes.
  6. +
  7. Bake for one hour at 300 degrees.
  8. +
+
+
+ +
+
+
+
+
+ + +
+ + diff --git a/Artworks/Webenv/Style-guide/0.0.1/lists.xhtml b/Artworks/Webenv/Style-guide/0.0.1/lists.xhtml deleted file mode 100644 index e04db6a..0000000 --- a/Artworks/Webenv/Style-guide/0.0.1/lists.xhtml +++ /dev/null @@ -1,339 +0,0 @@ - - - - - - - - - - - - - Lists - Home - - - - - - - - - -
- - - - - -
- - - -
- - - -

Lists

- -

CentOS Lists Visual Style Guide.

- - - -

Unordered Lists

- -

This section illustrates the visual style of unordered lists.

- -
    -
  • This is a list element.
  • -
  • This is another list element.
  • -
  • This is even another list element.
  • -
- -

Ordered Lists

- -

This section illustrates the visual style of ordered lists.

- -
    -
  1. This is a list element.
  2. -
  3. This is another list element.
  4. -
  5. This is even another list element.
  6. -
- -

Definition Lists

- -

This section illustrates the visual style of definition lists.

- -
-
WWW
-

World Wide Web

- -
CentOS
-

Community Enterprise Operating System

-
- -

Nested Lists

- -

Lists may also be nested and different list types may be - used together, as in the following example, which is a - definition list that contains an unordered list (the - ingredients) and an ordered list (the procedure):

- -
-
The ingredients
-
-
    -
  • 100 g. flour
  • -
  • 10 g. sugar
  • -
  • 1 cup water
  • -
  • 2 eggs
  • -
  • salt, pepper
  • -
-
- -
The procedure
-
-
    -
  1. Mix dry ingredients thoroughly.
  2. -
  3. Pour in wet ingredients.
  4. -
  5. Mix for 10 minutes.
  6. -
  7. Bake for one hour at 300 degrees.
  8. -
-
- -
- - -

- -
- -
- - - - -
- - - - diff --git a/Artworks/Webenv/Style-guide/0.0.1/pagination.html b/Artworks/Webenv/Style-guide/0.0.1/pagination.html new file mode 100644 index 0000000..bd83dbb --- /dev/null +++ b/Artworks/Webenv/Style-guide/0.0.1/pagination.html @@ -0,0 +1,471 @@ + + + + + + + + + + + Pagination - Home + + + + +
+ + +
+ +
+ +

+ Pagination +

+

CentOS Pagination Visual Style Guide.

+
+

Table of contents

+
+
+ Pagination +
+
+ Basic +
+
+ Administrative +
+
+ Recommendations +
+
+
+
+
+

+ Basic +

+
+
+
+
+
+
+ + + + + + + 3 records found. +
+
    +
  • + Name + Description +
  • +
  • + Alain Reguera Delgado + alain.reguera@localhost.localdomain +
  • +
  • + Ana Tamara Reguera Gattorno + ana.reguera@localhost.localdomain +
  • +
  • + Alina Reguera Gattorno + alina.reguera@localhost.localdomain +
  • +
+
+
+
+
+
+ +
+
+
+

+ Administrative +

+
+ Success +

Success

+

Use this message to notify action success.

+
+
+ Warning +

Warning

+

Use this message to notify action warnings.

+
+
+ Error +

Error

+

Use this message to notify action errors.

+
+
+
+
+
+
+
+ + + + + + + + + + + +
+
    +
  • + + + + Name + Description +
  • +
  • + + + + Alain Reguera Delgado + alain.reguera@localhost.localdomain +
  • +
  • + + + + Ana Tamara Reguera Gattorno + ana.reguera@localhost.localdomain +
  • +
  • + + + + Alina Reguera Gattorno + alina.reguera@localhost.localdomain +
  • +
+
+
+
+
+
+ +
+
+
+

+ Recommendations +

+
    +
  • ...
  • +
+ +
+
+
+
+
+ + +
+ + diff --git a/Artworks/Webenv/Style-guide/0.0.1/pagination.xhtml b/Artworks/Webenv/Style-guide/0.0.1/pagination.xhtml deleted file mode 100644 index be1b28f..0000000 --- a/Artworks/Webenv/Style-guide/0.0.1/pagination.xhtml +++ /dev/null @@ -1,419 +0,0 @@ - - - - - - - - - - - - - Pagination - Home - - - - - - - - - -
- - - - - -
- - - -
- - - -

Pagination

- -

CentOS Pagination Visual Style Guide.

- - - -

Basic

- -

-
-
-
- - - - - - - 3 records found. -
- -
    -
  • - Name - Description -
  • -
  • - Alain Reguera Delgado - alain.reguera@localhost.localdomain -
  • -
  • - Ana Tamara Reguera Gattorno - ana.reguera@localhost.localdomain -
  • -
  • - Alina Reguera Gattorno - alina.reguera@localhost.localdomain -
  • -
-
-
- -

- -

- -

Administrative

- -
- Success -

Success

-

Use this message to notify action success.

-
-
- Warning -

Warning

-

Use this message to notify action warnings.

-
-
- Error -

Error

-

Use this message to notify action errors.

-
- -

-
-
-
- - - - - - - - - - - - -
- -
    -
  • - - - - Name - Description -
  • -
  • - - - - Alain Reguera Delgado - alain.reguera@localhost.localdomain -
  • -
  • - - - - Ana Tamara Reguera Gattorno - ana.reguera@localhost.localdomain -
  • -
  • - - - - Alina Reguera Gattorno - alina.reguera@localhost.localdomain -
  • -
-
-
- -

- -

- -

Recommendations

- -
    -
  • ...
  • -
- - -

- -
- -
- - - - -
- - - - diff --git a/Artworks/Webenv/Style-guide/0.0.1/tables.html b/Artworks/Webenv/Style-guide/0.0.1/tables.html new file mode 100644 index 0000000..52010cb --- /dev/null +++ b/Artworks/Webenv/Style-guide/0.0.1/tables.html @@ -0,0 +1,326 @@ + + + + + + + + + + + Tables - Home + + + + +
+ + +
+ +
+ +

+ Tables +

+

CentOS Tables Visual Style Guide.

+

The HTML table model allows authors to arrange data + — text, preformatted text, images, links, forms, + form fields, other tables, etc. — into rows and + columns of cells.

+ + + + + + + + + + + + + + + + + + + + + + + +
A test table with merged cells
AverageRed
eyes
heightweight
Males1.90.00340%
Females1.70.00243%
+

Recommendations

+
    +
  • ...
  • +
+ +
+
+
+
+
+ + +
+ + diff --git a/Artworks/Webenv/Style-guide/0.0.1/tables.xhtml b/Artworks/Webenv/Style-guide/0.0.1/tables.xhtml deleted file mode 100644 index 748bc58..0000000 --- a/Artworks/Webenv/Style-guide/0.0.1/tables.xhtml +++ /dev/null @@ -1,311 +0,0 @@ - - - - - - - - - - - - - Tables - Home - - - - - - - - - -
- - - - - -
- - - -
- - - -

Tables

- -

CentOS Tables Visual Style Guide.

- -

The HTML table model allows authors to arrange data - — text, preformatted text, images, links, forms, - form fields, other tables, etc. — into rows and - columns of cells.

- - - - - - - - - - - - - - - - - - - - - - - - -
A test table with merged cells
AverageRed
eyes
heightweight
Males1.90.00340%
Females1.70.00243%
- -

Recommendations

- -
    -
  • ...
  • -
- - -

- -
- -
- - - - -
- - - - diff --git a/Artworks/Webenv/Style-guide/0.0.1/texts.html b/Artworks/Webenv/Style-guide/0.0.1/texts.html new file mode 100644 index 0000000..df76bc8 --- /dev/null +++ b/Artworks/Webenv/Style-guide/0.0.1/texts.html @@ -0,0 +1,601 @@ + + + + + + + + + + + + + Texts - Home + + + + + + + + + +
+ + + + + +
+ + + +
+ + + +

Texts

+ +

CentOS Texts Visual Style Guide.

+ + + +

Phrase elements

+ +
+
+

EM

+

Indicates emphasis.

+ +

STRONG

+

Indicates stronger emphasis.

+ +

CITE

+

Contains a citation or a reference to other + sources.

+ +

DFN

+

Indicates that this is the defining instance + of the enclosed term.

+ +

CODE

+

Designates a fragment of computer code.

+ +

SAMP

+

Designates sample output from programs, + scripts, etc.

+ +

KBD

+

Indicates text to be entered by the user.

+ +

VAR

+

Indicates an instance of a variable or + program argument.

+ +

ABBR

+

Indicates an + abbreviated form (e.g., WWW, HTTP, URI, Mass., + etc.).

+ +

ACRONYM

+

Indicates an acronym + (e.g., WAC, radar, etc.).

+ +
+
+ +

Subscripts and superscripts

+ +
+
+ +

SUB

+

H2O

+ +

SUP

+

E = mc2

+

Mlle Dupont

+
+
+ +

Paragraphs

+ +

CentOS is an + Enterprise-class Linux Distribution derived from sources + freely provided to the public by a prominent North + American Enterprise Linux vendor. CentOS conforms fully + with the upstream vendors redistribution policy and aims + to be 100% binary compatible. (CentOS mainly changes + packages to remove upstream vendor branding and + artwork.)

+ +

CentOS is developed by a small but growing team of core + developers.  In turn the core developers are + supported by an active user community including system + administrators, network administrators, enterprise users, + managers, core Linux contributors and Linux enthusiasts + from around the world.

+ +

CentOS has numerous advantages including: an active and + growing user community, quickly rebuilt, tested, and QA'ed + errata packages, an extensive mirror + network, developers who are contactable and responsive + reliable Enterprise Linux class distribution, multiple + free support avenues including a wiki, IRC + Chat, Email + Lists, Forums,and + a dynamic FAQ. +

+ + +

Preformatted texts

+ +
This is a small one-line pre formatted element.
+ +
This is a long one-line pre formatted element to illustrate how the content is scrollable when it doesn't fit the current screen area.
+ +

Quotations

+ +
+

The simplest quotation.

+
<blockquote>
+    <p>The simplest quotation.</p>
+</blockquote>
+
+ +
+

Tip

+

The simplest quotation using heading.

+
<blockquote><h3 class="title">Tip</h3> 
+    <p>The simplest quotation using heading.</p>
+</blockquote>
+
+ +
+ Tip +

Tip

+

Simple quotations can be combined with color classes, icons + and headings to make your message more attractive. To set + quotation with icons, use the icon class in the + blockquote html tag. The heading is set using + h3 heading level.

+
<blockquote class="icon orange">
+    <img src="./Images/tip.png" alt="Tip" />
+    <h3 class="title">Tip</h3>
+    <p>This is a simple quotation with an icon.</p>
+</blockquote>
+

The following color classes are available:

+ +
    +
  • blue
  • +
  • orange
  • +
  • green
  • +
  • violet
  • +
  • red
  • +
+ +

The following icon paths are available:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tip./Images/tip.png
Info./Images/note.png
Attention./Images/caution.png
Warning./Images/warning.png
Convenction./Images/convenction.png
Star./Images/important.png
Error./Images/error.png
Success./Images/success.png
+

As you probably have noted, it is possible to use pre-formatted + texts, lists, tables and several paragraphs inside one admonition. + In fact, it is possible to use any html code inside admonitions. + Feel yourself free to experiment new combinations.

+
+ +
+

This admonition style is used to output web application + messages like action results. This one is the simplest.

+
<blockquote class="message">
+    <p>This is the simplest administrative admonition.</p>
+</blockquote>
+
+ +
+ Success +

Success

+

This admonition style is used to output web application + messages like action results. This one combines color classes, + heading, and icon.

+
<blockquote class="icon message green">
+    <img src="./Images/success.png" alt="Success" />
+    <h3 class="title">Success</h3>
+    <p>This admonition style is used to output web application messages like action results. This one combines color classes, heading, and icon.</p>
+</blockquote>
+
+ +
+ Error +

Error

+

This admonition style is used to output web application + messages like action results. This one combines color classes, + heading, and icon.

+
<blockquote class="icon message error">
+    <img src="./Images/error.png" alt="Error" />
+    <h3 class="title">Error</h3>
+    <p>This admonition style is used to output web application messages like action results. This one combines color classes, heading, and icon.</p>
+</blockquote>
+
+ +

The Community Enterprise + Operating System is a GNU/Linux Distribution based on the + freely available sources of a prominet Linux vendor.

+ +
<p>The <q cite="http://www.centos.org/">Community Enterprise
+Operating System</q> is a GNU/Linux Distribution based on the freely
+available sources of a prominet Linux vendor.</p>
+ +

John said, I saw Lucy at lunch, she told me + Mary wants you to get some ice cream on your + way home. I think I will get some at Ben and Jerry’s, on + Gloucester Road.

+ +
<p>John said, <q lang="en-US">I saw Lucy at lunch,
+she told me <q lang="en-US">Mary wants you to get some ice cream
+on your way home.</q> I think I will get some at Ben and
+Jerry’s, on Gloucester Road.</q></p>
+ +

Recommendations

+ +

In order to maintain a consistent quotation style, consider the + following standard recomendations:

+ +
+ Note +

Note

+

Use this quotation style to remark notes inside your content.

+
<blockquote class="icon blue">
+    <img src="./Images/note.png" alt="Note" />
+    <h3 class="title">Note</h3>
+    <p>Use this quotation style to remark notes inside your content.</p>
+</blockquote>
+
+ +
+ Tip +

Tip

+

Use this quotation style to remark tips inside your content.

+
<blockquote class="icon orange">
+    <img src="./Images/tip.png" alt="Tip" />
+    <h3 class="title">Tip</h3>
+    <p>Use this quotation style to remark tips inside your content.</p>
+</blockquote>
+
+ +
+ Important +

Important

+

Use this quotation style to remark important ideas inside your + content.

+
<blockquote class="icon orange">
+    <h3 class="title">Important</h3>
+    <img src="./Images/important.png" alt="Important" />
+    <p>Use this quotation style to remark important ideas inside your content.</p>
+</blockquote>
+
+ +
+ Caution +

Caution

+

Use this quotation style to remark caution ideas inside your + content.

+
<blockquote class="icon orange">
+    <h3 class="title">Caution</h3>
+    <img src="./Images/caution.png" alt="Caution" />
+    <p>Use this quotation style to remark caution ideas inside your content.</p>
+</blockquote>
+
+ +
+ Warning +

Warning

+

Use this quotation style to remark warnings inside your content.

+
<blockquote class="icon orange">
+    <img src="./Images/warning.png" alt="Warning" />
+    <h3 class="title">Warning</h3>
+    <p>Use this quotation style to remark warnings inside your content.</p>
+</blockquote>
+
+ +

as well as the following no-standard ones:

+ +
+ Convenction +

Convenction

+

Use this quotation style to remark convenctions inside your + content.

+
<blockquote class="icon orange">
+    <h3 class="title">Convenction</h3>
+    <img src="./Images/convenction.png" alt="Convenction" />
+    <p>Use this quotation style to remark convenctions inside your content.</p>
+</blockquote>
+
+ +
+ Redirection +

Redirection

+

Use this quotation style to remark redirections inside your + content.

+
<blockquote class="icon orange">
+    <h3 class="title">Convenction</h3>
+    <img src="./Images/redirect.png" alt="Redirection" />
+    <p>Use this quotation style to remark redirections inside your content.</p>
+</blockquote>
+
+ +
    +
  • ...
  • +
+ + + +

+ +
+ +
+ + + + +
+ + + + diff --git a/Artworks/Webenv/Style-guide/0.0.1/texts.xhtml b/Artworks/Webenv/Style-guide/0.0.1/texts.xhtml deleted file mode 100644 index ea0c4ff..0000000 --- a/Artworks/Webenv/Style-guide/0.0.1/texts.xhtml +++ /dev/null @@ -1,601 +0,0 @@ - - - - - - - - - - - - - Texts - Home - - - - - - - - - -
- - - - - -
- - - -
- - - -

Texts

- -

CentOS Texts Visual Style Guide.

- - - -

Phrase elements

- -
-
-

EM

-

Indicates emphasis.

- -

STRONG

-

Indicates stronger emphasis.

- -

CITE

-

Contains a citation or a reference to other - sources.

- -

DFN

-

Indicates that this is the defining instance - of the enclosed term.

- -

CODE

-

Designates a fragment of computer code.

- -

SAMP

-

Designates sample output from programs, - scripts, etc.

- -

KBD

-

Indicates text to be entered by the user.

- -

VAR

-

Indicates an instance of a variable or - program argument.

- -

ABBR

-

Indicates an - abbreviated form (e.g., WWW, HTTP, URI, Mass., - etc.).

- -

ACRONYM

-

Indicates an acronym - (e.g., WAC, radar, etc.).

- -
-
- -

Subscripts and superscripts

- -
-
- -

SUB

-

H2O

- -

SUP

-

E = mc2

-

Mlle Dupont

-
-
- -

Paragraphs

- -

CentOS is an - Enterprise-class Linux Distribution derived from sources - freely provided to the public by a prominent North - American Enterprise Linux vendor. CentOS conforms fully - with the upstream vendors redistribution policy and aims - to be 100% binary compatible. (CentOS mainly changes - packages to remove upstream vendor branding and - artwork.)

- -

CentOS is developed by a small but growing team of core - developers.  In turn the core developers are - supported by an active user community including system - administrators, network administrators, enterprise users, - managers, core Linux contributors and Linux enthusiasts - from around the world.

- -

CentOS has numerous advantages including: an active and - growing user community, quickly rebuilt, tested, and QA'ed - errata packages, an extensive mirror - network, developers who are contactable and responsive - reliable Enterprise Linux class distribution, multiple - free support avenues including a wiki, IRC - Chat, Email - Lists, Forums,and - a dynamic FAQ. -

- - -

Preformatted texts

- -
This is a small one-line pre formatted element.
- -
This is a long one-line pre formatted element to illustrate how the content is scrollable when it doesn't fit the current screen area.
- -

Quotations

- -
-

The simplest quotation.

-
<blockquote>
-    <p>The simplest quotation.</p>
-</blockquote>
-
- -
-

Tip

-

The simplest quotation using heading.

-
<blockquote><h3 class="title">Tip</h3> 
-    <p>The simplest quotation using heading.</p>
-</blockquote>
-
- -
- Tip -

Tip

-

Simple quotations can be combined with color classes, icons - and headings to make your message more attractive. To set - quotation with icons, use the icon class in the - blockquote html tag. The heading is set using - h3 heading level.

-
<blockquote class="icon orange">
-    <img src="./Images/tip.png" alt="Tip" />
-    <h3 class="title">Tip</h3>
-    <p>This is a simple quotation with an icon.</p>
-</blockquote>
-

The following color classes are available:

- -
    -
  • blue
  • -
  • orange
  • -
  • green
  • -
  • violet
  • -
  • red
  • -
- -

The following icon paths are available:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tip./Images/tip.png
Info./Images/note.png
Attention./Images/caution.png
Warning./Images/warning.png
Convenction./Images/convenction.png
Star./Images/important.png
Error./Images/error.png
Success./Images/success.png
-

As you probably have noted, it is possible to use pre-formatted - texts, lists, tables and several paragraphs inside one admonition. - In fact, it is possible to use any html code inside admonitions. - Feel yourself free to experiment new combinations.

-
- -
-

This admonition style is used to output web application - messages like action results. This one is the simplest.

-
<blockquote class="message">
-    <p>This is the simplest administrative admonition.</p>
-</blockquote>
-
- -
- Success -

Success

-

This admonition style is used to output web application - messages like action results. This one combines color classes, - heading, and icon.

-
<blockquote class="icon message green">
-    <img src="./Images/success.png" alt="Success" />
-    <h3 class="title">Success</h3>
-    <p>This admonition style is used to output web application messages like action results. This one combines color classes, heading, and icon.</p>
-</blockquote>
-
- -
- Error -

Error

-

This admonition style is used to output web application - messages like action results. This one combines color classes, - heading, and icon.

-
<blockquote class="icon message error">
-    <img src="./Images/error.png" alt="Error" />
-    <h3 class="title">Error</h3>
-    <p>This admonition style is used to output web application messages like action results. This one combines color classes, heading, and icon.</p>
-</blockquote>
-
- -

The Community Enterprise - Operating System is a GNU/Linux Distribution based on the - freely available sources of a prominet Linux vendor.

- -
<p>The <q cite="http://www.centos.org/">Community Enterprise
-Operating System</q> is a GNU/Linux Distribution based on the freely
-available sources of a prominet Linux vendor.</p>
- -

John said, I saw Lucy at lunch, she told me - Mary wants you to get some ice cream on your - way home. I think I will get some at Ben and Jerry’s, on - Gloucester Road.

- -
<p>John said, <q lang="en-US">I saw Lucy at lunch,
-she told me <q lang="en-US">Mary wants you to get some ice cream
-on your way home.</q> I think I will get some at Ben and
-Jerry’s, on Gloucester Road.</q></p>
- -

Recommendations

- -

In order to maintain a consistent quotation style, consider the - following standard recomendations:

- -
- Note -

Note

-

Use this quotation style to remark notes inside your content.

-
<blockquote class="icon blue">
-    <img src="./Images/note.png" alt="Note" />
-    <h3 class="title">Note</h3>
-    <p>Use this quotation style to remark notes inside your content.</p>
-</blockquote>
-
- -
- Tip -

Tip

-

Use this quotation style to remark tips inside your content.

-
<blockquote class="icon orange">
-    <img src="./Images/tip.png" alt="Tip" />
-    <h3 class="title">Tip</h3>
-    <p>Use this quotation style to remark tips inside your content.</p>
-</blockquote>
-
- -
- Important -

Important

-

Use this quotation style to remark important ideas inside your - content.

-
<blockquote class="icon orange">
-    <h3 class="title">Important</h3>
-    <img src="./Images/important.png" alt="Important" />
-    <p>Use this quotation style to remark important ideas inside your content.</p>
-</blockquote>
-
- -
- Caution -

Caution

-

Use this quotation style to remark caution ideas inside your - content.

-
<blockquote class="icon orange">
-    <h3 class="title">Caution</h3>
-    <img src="./Images/caution.png" alt="Caution" />
-    <p>Use this quotation style to remark caution ideas inside your content.</p>
-</blockquote>
-
- -
- Warning -

Warning

-

Use this quotation style to remark warnings inside your content.

-
<blockquote class="icon orange">
-    <img src="./Images/warning.png" alt="Warning" />
-    <h3 class="title">Warning</h3>
-    <p>Use this quotation style to remark warnings inside your content.</p>
-</blockquote>
-
- -

as well as the following no-standard ones:

- -
- Convenction -

Convenction

-

Use this quotation style to remark convenctions inside your - content.

-
<blockquote class="icon orange">
-    <h3 class="title">Convenction</h3>
-    <img src="./Images/convenction.png" alt="Convenction" />
-    <p>Use this quotation style to remark convenctions inside your content.</p>
-</blockquote>
-
- -
- Redirection -

Redirection

-

Use this quotation style to remark redirections inside your - content.

-
<blockquote class="icon orange">
-    <h3 class="title">Convenction</h3>
-    <img src="./Images/redirect.png" alt="Redirection" />
-    <p>Use this quotation style to remark redirections inside your content.</p>
-</blockquote>
-
- -
    -
  • ...
  • -
- - - -

- -
- -
- - - - -
- - - -