3 #elements Elements
Elements are the building blocks of the theme. They are the things that the different blocks and widgets and other components are made from.
Source:
assets/sass/style.scss, line 15
Source:
assets/sass/lib/elements/_entry.scss, line 1
3.2.1 #elements.entry.header Entry Header
A block that can be used throughout the theme. Often found on the single posts/ pages and archives.
Example
Philosophers Stone
It is impossible to live without failing at something, unless you live so cautiously that you might has well not have lived at all, in which case you have failed by default.
Markup
<div class="entry-header">
<div class="entry-meta"><span>Dudley</span> <span><a href="#">Dursley</a></span></div>
<h1 class="entry-title ">Philosophers Stone</h1>
<p class="entry-meta">Chapter 1</p>
<div class="entry-intro">It is impossible to live without failing at something, unless you live so cautiously that you might has well not have lived at all, in which case you have failed by default.</div>
</div>
Source:
assets/sass/lib/elements/_entry.scss, line 5
3.2.2 #elements.entry.intro Entry Intro
A block with large text that can be used for category descriptions, or displaying the excerpt on a post.
Example
It is impossible to live without failing at something, unless you live so cautiously that you might has well not have lived at all, in which case you have failed by default.
Markup
<div class="entry-intro">It is impossible to live without failing at something, unless you live so cautiously that you might has well not have lived at all, in which case you have failed by default.</div>
Source:
assets/sass/lib/elements/_entry.scss, line 119
3.2.3 #elements.entry.meta Entry Meta
Style for entry meta data. Individual parts of the meta data should be wrapped in an element (a span or an anchor, or some other thing). The elements will have margin applied to create consistent spacing so the wrapping element is required.
Example
Markup
<div class="entry-meta"><span>Dudley</span> <span><a href="#">Dursley</a></span></div>
Source:
assets/sass/lib/elements/_entry.scss, line 81
3.2.4 #elements.entry.title Entry Title
Massive title text for use in .entry-headers
Examples
Default styling
Book 1 Philosophers Stone
.summary
A title for the archive post listings.
Book 1 Philosophers Stone
Markup
<h1 class="entry-title [modifier class]"><small>Book 1</small> Philosophers Stone</h1>
Source:
assets/sass/lib/elements/_entry.scss, line 38
3.3 #elements.forms Forms
Consistent controls for forms.
Source:
assets/sass/lib/elements/_forms.scss, line 6
3.3.1 #elements.forms.label Label
Element to label form elements.
Example
Markup
<label class="">Example Label</label>
Source:
assets/sass/lib/elements/_forms.scss, line 226
3.3.2 #elements.forms.radio-checkbox Radio and Checkbox inputs
Form controls for Radio and Checkboxes.
Example
Markup
<input type="radio" class="" />
<input type="checkbox" class="" />
Source:
assets/sass/lib/elements/_forms.scss, line 12
3.3.3 #elements.forms.select Select box
Select box dropdowns.
Examples
Default styling
:focus
Highlight the selectbox on focus.
Markup
<select class="[modifier class]"><option value="0">WordPress</option><option value="1">wordpress</option><option value="2">WP</option></select>
Source:
assets/sass/lib/elements/_forms.scss, line 187
3.3.4 #elements.forms.text-input Text input
Various types of text input.
Examples
Default styling
:hover
Highlight text field on hover.
:focus
Highlight text field on focus.
Markup
<input class="[modifier class]" type="text" />
Source:
assets/sass/lib/elements/_forms.scss, line 116
3.3.5 #elements.forms.textarea Textarea
Text input for large amounts of text. By default it's used in comment forms, but also used with plugins in contact forms and other.
Examples
Default styling
:focus
Highlight textareas on focus.
Markup
<textarea class="[modifier class]"></textarea>
Source:
assets/sass/lib/elements/_forms.scss, line 209
3.4 #elements.html HTML Elements
Common HTML elements
Source:
assets/sass/lib/elements/_html.scss, line 6
3.4.1 #elements.html.blockquote Blockquote
Use this to display quotes from people or articles.
Example
It does not do well to dwell on dreams and forget to live.
Markup
<blockquote>It does not do well to dwell on dreams and forget to live.</blockquote>
Source:
assets/sass/lib/elements/_html.scss, line 85
3.4.2 #elements.html.cite Cite
Used in Blockquotes to reference the thing being quoted.
Example
Harry Potter and the Sorcerer’s Stone
Markup
<cite>Harry Potter and the Sorcerer’s Stone</cite>
Source:
assets/sass/lib/elements/_html.scss, line 134
3.4.3 #elements.html.data-list Data List
Display data list.
Example
- Title
- Data
- Title
- Data
- Title
- Data
Markup
<dl><dt>Title</dt><dd>Data</dd><dt>Title</dt><dd>Data</dd><dt>Title</dt><dd>Data</dd></dl>
Source:
assets/sass/lib/elements/_html.scss, line 59
3.4.4 #elements.html.ol Ordered Lists
Display lists of data where order is important
Example
- Item 1
- Item 2
- Item 3
Markup
<ol class=""><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
Source:
assets/sass/lib/elements/_html.scss, line 12
3.4.5 #elements.html.pre Preformatted Text
For preformatted text. Displayed in a fixed-width font, and preserves both spaces and line breaks.
Examples
Default styling
Hogwarts, Hogwarts, Hoggy Warty Hogwarts, Teach us something please, Whether we be old and bald Or young with scabby knees, Our heads could do with filling With some interesting stuff, For now they’re bare and full of air, Dead flies and bits of fluff, So teach us things worth knowing, Bring back what we’ve forgot, Just do your best, we’ll do the rest, And learn until our brains all rot.
.compress
Reduces the height of the pre element and forces a vertical scrollbar.
Hogwarts, Hogwarts, Hoggy Warty Hogwarts, Teach us something please, Whether we be old and bald Or young with scabby knees, Our heads could do with filling With some interesting stuff, For now they’re bare and full of air, Dead flies and bits of fluff, So teach us things worth knowing, Bring back what we’ve forgot, Just do your best, we’ll do the rest, And learn until our brains all rot.
Markup
<pre class="[modifier class]">
Hogwarts, Hogwarts, Hoggy Warty Hogwarts,
Teach us something please,
Whether we be old and bald
Or young with scabby knees,
Our heads could do with filling
With some interesting stuff,
For now they’re bare and full of air,
Dead flies and bits of fluff,
So teach us things worth knowing,
Bring back what we’ve forgot,
Just do your best, we’ll do the rest,
And learn until our brains all rot.
</pre>
Source:
assets/sass/lib/elements/_html.scss, line 234
3.4.6 #elements.html.table Table
For tabular data, not for laying out content!
Example
| First Name | Last Name | Age |
|---|---|---|
| Harry | Potter | 12 |
| Hermione | Grainger | 12 |
| Ronald | Weasley | 12 |
Markup
<table>
<tr><th>First Name</th><th>Last Name</th><th>Age</th></tr>
<tr><td>Harry</td><td>Potter</td><td>12</td></tr>
<tr><td>Hermione</td><td>Grainger</td><td>12</td></tr>
<tr><td>Ronald</td><td>Weasley</td><td>12</td></tr>
</table>
Source:
assets/sass/lib/elements/_html.scss, line 158
3.4.7 #elements.html.ul Unordered Lists
Display lists of data ehere order is unimportant.
Example
- Item 1
- Item 2
- Item 3
Markup
<ul class=""><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
Source:
assets/sass/lib/elements/_html.scss, line 21
Source:
assets/sass/lib/elements/_typography.scss, line 6
3.5.1 #elements.typography.headings Headings
Content headings. Don't use for presentation! Headings are to signify changes in content.
Example
Heading 1
Heading 1
Heading 1
Heading 1
Heading 1
Heading 1
Markup
<h1>Heading 1</h1>
<h2>Heading 1</h2>
<h3>Heading 1</h3>
<h4>Heading 1</h4>
<h5>Heading 1</h5>
<h6>Heading 1</h6>
Source:
assets/sass/lib/elements/_typography.scss, line 34
3.5.2 #elements.typography.hr Horizontal rule
Use as a separator between blocks of content.
Example
Markup
<hr />
Source:
assets/sass/lib/elements/_typography.scss, line 155
3.5.3 #elements.typography.link Link
Link to stuff across the web.
Examples
Default styling
:hover
highlight the link on hover.
:focus
highlight the link on focus.
Markup
<a href="#" class="[modifier class]">Harry Potter?</a>
Source:
assets/sass/lib/elements/_typography.scss, line 126
3.5.4 #elements.typography.paragraph Paragraph
Arguably the most important element of a website. In particular websites based on the written word.
Example
Happiness can be found in the darkest of times if only one remembers to turn on the light.
Markup
<p>Happiness can be found in the darkest of times if only one remembers to turn on the light.</p>
Source:
assets/sass/lib/elements/_typography.scss, line 114