Front-end styleguide FTW!
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.
Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.
"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."
The a element example
The abbr element and an abbr element with title examples
The ACRONYM element example
The b element example
The cite element example
The code element
example
The em element example
The del element example
The dfn element and dfn element with title examples
The i element example
The ins element example
The kbd element example
The mark element example
The q element
example
The q element
exampleinside
a q element
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
The var element example
Code block wrapped in "pre" and "code" tags
// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;
for (i = 0; i < divs.length; ++i) {
divs[i].style.color = "green";
}
Monospace Text wrapped in "pre" tags
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto tempora temporibus labore ut dolores earum libero architecto, illo doloribus necessitatibus neque quibusdam eos, porro est fugit soluta dolore suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto tempora temporibus labore ut dolores earum libero architecto, illo doloribus necessitatibus neque quibusdam eos, porro est fugit soluta dolore suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto tempora temporibus labore ut dolores earum libero architecto, illo doloribus necessitatibus neque quibusdam eos, porro est fugit soluta dolore suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto tempora temporibus labore ut dolores earum libero architecto, illo doloribus necessitatibus neque quibusdam eos, porro est fugit soluta dolore suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto tempora temporibus labore ut dolores earum libero architecto, illo doloribus necessitatibus neque quibusdam eos, porro est fugit soluta dolore suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto tempora temporibus labore ut dolores earum libero architecto, illo doloribus necessitatibus neque quibusdam eos, porro est fugit soluta dolore suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto tempora temporibus labore ut dolores earum libero architecto, illo doloribus necessitatibus neque quibusdam eos, porro est fugit soluta dolore suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto tempora temporibus labore ut dolores earum libero architecto, illo doloribus necessitatibus neque quibusdam eos, porro est fugit soluta dolore suscipit.
Table Header 1 | Table Header 2 | Table Header 3 |
---|---|---|
Division 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 3 |
This last section contains elements that don't render well in markdown. Please consult the final section in index.html, to see the rest of the styleguide.
The Audio Element:
The Video Element:
The Fieldset: