Style guide

Headings

Headings add structure and meaning to pages by labeling each content part and indicating the relative importance of those parts.

Assistive technologies and some browsers provide mechanisms to present a list of headings to the user that allows users to jump to individual headings. Headings also provide visual clues that help to skim the page or find a specific section, this is especially useful for people that are easily distracted.

Element

This is a H1 element

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

This is a H2 element

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

This is a H3 element

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

This is a H4 element

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

This is a H5 element

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

This is a H6 element

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Source
<h1>This is a H1 element</h1>
<h2>This is a H2 element</h2>
<h3>This is a H3 element</h3>
<h4>This is a H4 element</h4>
<h5>This is a H5 element</h5>
<h6>This is a H6 element</h6>

Extra text size

These are some extra classes that can be applied to any text block to change the font size.

Element
XXXL text size

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

XXL text size

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

XL text size

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

M text size

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Source
<div class="xxxl-text">This is XXXL size, text element</div>
<div class="xxl-text">This is XXL size, text element</div>
<div class="xl-text">This is XL size, text element</div>
<div class="m-text">This is M size, text element</div>

Unordered list

The unordered list consists of one <ul> element and multiple list item (<li>) elements.

Element
  • Ut enim ad minim veniam, quis nostrud.
  • Ut enim ad minim veniam, quis nostrud.
  • Ut enim ad minim veniam, quis nostrud.
    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
  • Ut enim ad minim veniam, quis nostrud.
  • Ut enim ad minim veniam, quis nostrud.
Source
<ul>
	<li>Ut enim ad minim veniam, quis nostrud.</li>
	<li>Ut enim ad minim veniam, quis nostrud.</li>
	<li>Ut enim ad minim veniam, quis nostrud.</li>
</ul>

Ordered list

The ordered list consists of one <ol> element and multiple list item (<li>) elements.

Element
  1. Ut enim ad minim veniam, quis nostrud.
  2. Ut enim ad minim veniam, quis nostrud.
  3. Ut enim ad minim veniam, quis nostrud.
    1. Lorem ipsum dolor sit amet.
    2. Lorem ipsum dolor sit amet.
    3. Lorem ipsum dolor sit amet.
  4. Ut enim ad minim veniam, quis nostrud.
  5. Ut enim ad minim veniam, quis nostrud.
Source
<ol>
	<li>Ut enim ad minim veniam, quis nostrud.</li>
	<li>Ut enim ad minim veniam, quis nostrud.</li>
	<li>Ut enim ad minim veniam, quis nostrud.</li>
</ol>

Inline elements

An inline element occupies only the space bounded by the tags that define the inline element. Here are the most common inline elements.

Elements
Anchor Tag (aka. Link)

This is an example of a hyperlink. Use it to create a connection between two or more pages.

Abbreviation

In computing, a DoS or DDoS attack is an attempt to make a machine or network resource unavailable to its intended users.

Acronym

The acronym afaik stands for "As far as I know".

Code

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Del tag

Ticket #29095 (The get/set_user_setting fails on multisite/network with sub-domains) closed

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarsly known tag emulates keyboard text. Example: ctrl + shift + del

Quote Tag

Lead, follow, or get out of the way. – Laurence J. Peter

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2″ down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

Teletype Tag

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag

This allows you to denote variables.

Blockquote

For larger quotes, the <blockquote> element should be used. It can contain paragraphs, headings, and other text structure elements. The <cite> element can be used to refer to the source of the quote.

Element

Only two things are infinite, the universe and human stupidity, and I'm not sure about the former.

Albert Einstein
Source
<blockquote>
	<p>Only two things are infinite, the universe...</p>
	<cite>Albert Einstein</cite>
</blockquote>

Table

Element
Date Name Country
19 July 2016 Nancy Jackson Zambia
23 October 2016 John Lopez Netherlands
5 December 2016 Michael Allen Mali
Source
<table>
	<tr>
		<th>Date</th>
		<th>Name</th>
		<th>Country</th>
	</tr>
	<tr>
		<td>11 January 2017</td>
		<td>Charles Hall</td>
		<td>Turkey</td>
	</tr>
	[…]
</table>

John Hill

Molestias odit magni non doloremque vel eaque magnam quod officiis velit consequuntur voluptatem sint dolorem harum, reprehenderit.