+
+ 
+
+
+ CentOS Forms Visual Style Guide.
+Table of contents
+
+
+
-
-
- CentOS Forms Visual Style Guide.
- -Table of contents
-
+
+
+
+
+ CentOS Headings Visual Style Guide.
+Table of contents
+<h1 class="title" class="title"><a name="head-5871b1272673f7cf89bcaf48972c848a" href="#head-5871b1272673f7cf89bcaf48972c848a">Heading Level 1</a></h1>+
<h2 class="title"><a name="head-d33a28a4193cffb949f506cfdf770f05" href="#head-d33a28a4193cffb949f506cfdf770f05">Heading Level 2</a></h2>+
<h3 class="title"><a name="head-82dd23c665d8ee437a980459c8b80d7a" href="#head-82dd23c665d8ee437a980459c8b80d7a">Heading Level 3</a></h3>+
<h4 class="title"><a name="head-157dc030ea314f4b53a6ed238113a3f8" href="#head-157dc030ea314f4b53a6ed238113a3f8">Heading Level 4</a></h4>+
<h5 class="title"><a name="head-33628cc07bcbefc4e4732407b8680bf6" href="#head-33628cc07bcbefc4e4732407b8680bf6">Heading Level 5</a></h5>+
<h6 class="title"><a name="head-93b42a4a61a0b05a81aff6224555603c" href="#head-93b42a4a61a0b05a81aff6224555603c">Heading Level 5</a></h6>+
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.
+
+
+
-
-
- CentOS Headings Visual Style Guide.
- -Table of contents
<h1 class="title" class="title"><a name="head-5871b1272673f7cf89bcaf48972c848a" href="#head-5871b1272673f7cf89bcaf48972c848a">Heading Level 1</a></h1>- -
<h2 class="title"><a name="head-d33a28a4193cffb949f506cfdf770f05" href="#head-d33a28a4193cffb949f506cfdf770f05">Heading Level 2</a></h2>- -
<h3 class="title"><a name="head-82dd23c665d8ee437a980459c8b80d7a" href="#head-82dd23c665d8ee437a980459c8b80d7a">Heading Level 3</a></h3>- -
<h4 class="title"><a name="head-157dc030ea314f4b53a6ed238113a3f8" href="#head-157dc030ea314f4b53a6ed238113a3f8">Heading Level 4</a></h4>- -
<h5 class="title"><a name="head-33628cc07bcbefc4e4732407b8680bf6" href="#head-33628cc07bcbefc4e4732407b8680bf6">Heading Level 5</a></h5>- -
<h6 class="title"><a name="head-93b42a4a61a0b05a81aff6224555603c" href="#head-93b42a4a61a0b05a81aff6224555603c">Heading Level 5</a></h6>- -
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.
-
+
+
+
+
+ ...
+ +
+
+
-
-
- ...
- - -
-
+
+
+
+
+ CentOS Links Visual Style Guide.
+Table of contents
++ This is a common text link style +
++ This is a common nonexistant text link style +
+
+
+ 
+
+
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.
+
+
+
-
-
- CentOS Links Visual Style Guide.
- -Table of contents
This is a common text link style
-This is a common nonexistant text link style
- -
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.
- -
-
+
+
+
+
+ CentOS Lists Visual Style Guide.
+Table of contents
+This section illustrates the visual style of unordered lists.
+This section illustrates the visual style of ordered lists.
+This section illustrates the visual style of definition lists.
+World Wide Web
+Community Enterprise Operating System
+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):
+
+
+
-
-
- CentOS Lists Visual Style Guide.
- -Table of contents
This section illustrates the visual style of unordered lists.
- -This section illustrates the visual style of ordered lists.
- -This section illustrates the visual style of definition lists.
- -World Wide Web
Community Enterprise Operating System
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):
- -
-
+
+
+
+
+ CentOS Pagination Visual Style Guide.
+Table of contents
++++
Success
+Use this message to notify action success.
+
+++
Warning
+Use this message to notify action warnings.
+
+++
Error
+Use this message to notify action errors.
+
+
+
-
-
- CentOS Pagination Visual Style Guide.
- -Table of contents
--Success
-Use this message to notify action success.
-
--Warning
-Use this message to notify action warnings.
-
-- -Error
-Use this message to notify action errors.
-
-
+
+
+
+
+ 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.
+| + | Average | +Red eyes |
+ |
|---|---|---|---|
| height | +weight | +||
| Males | +1.9 | +0.003 | +40% | +
| Females | +1.7 | +0.002 | +43% | +
+
+
-
-
- 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.
- -| - | Average | -Red eyes |
- |
|---|---|---|---|
| height | -weight | -||
| Males | -1.9 | -0.003 | -40% | -
| Females | -1.7 | -0.002 | -43% | -
-
+
+
+ CentOS Texts Visual Style Guide.
+ +Table of contents
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.).
SUB
H2O
SUP
E = mc2
Mlle Dupont
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. +
+ + +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.+ +
++ +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
+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:
++
++ ++ ./Images/tip.png ++ ++ ./Images/note.png ++ ++ ./Images/caution.png ++ ++ ./Images/warning.png ++ ++ ./Images/convenction.png ++ ++ ./Images/important.png ++ ++ ./Images/error.png ++ ++ ./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.
+
++ +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
+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>+ +
In order to maintain a consistent quotation style, consider the + following standard recomendations:
+ +++ ++
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
+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
+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
+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
+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
+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
+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>+
+
-
-
- CentOS Texts Visual Style Guide.
- -Table of contents
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.).
SUB
H2O
SUP
E = mc2
Mlle Dupont
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. -
- - -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.- -
-- -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
-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:
--
-- -- ./Images/tip.png -- -- ./Images/note.png -- -- ./Images/caution.png -- -- ./Images/warning.png -- -- ./Images/convenction.png -- -- ./Images/important.png -- -- ./Images/error.png -- -- ./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.
-
-- -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
-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>- -
In order to maintain a consistent quotation style, consider the - following standard recomendations:
- --- -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
-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
-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
-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
-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
-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
-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>-
- 