-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstandard.html
executable file
·251 lines (210 loc) · 13.9 KB
/
standard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7" manifest="default.appcache?v=1"><![endif]-->
<!--[if lt IE 7 ]><html class="no-js ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="no-js ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" manifest="default.appcache?v=1" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta description="untitled" />
<meta name="author" content="Tady Walsh">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">
<!-- Microsoft. Delete if not applicable -->
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<link type="text/plain" rel="author" href="humans.txt" />
<link rel="stylesheet" href="css/reset.css" media="screen" />
<link rel="stylesheet" href="css/960.css" media="screen" />
<link rel="stylesheet" href="css/text.css" media="screen" />
<link rel="stylesheet" href="css/grid.css" media="screen" />
<link rel="stylesheet" href="css/layout.css" media="screen" />
<link rel="stylesheet" href="css/nav.css" media="screen" />
<link rel="stylesheet" href="css/default.css" media="screen" />
<link rel="stylesheet" href="css/print.css" media="print" />
<!-- If there's no access to the online jquery repo, use a local copy -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js">\x3C/script>')</script>
<script src="js/modernizr-2.5.3.min.js"></script>
<script src="js/selectivizr-min.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" media="all" href="css/ie6.css" />
<![endif]-->
</head>
<body id="index" class="home">
<div class="container_12">
<nav id="tns" class="grid_12">
<ul>
<li><a href="#">Sitemap</a></li>
</ul>
</nav>
<header class="grid_12">
<h1 class="grid_5"><img class="logo" alt="Logo" title="Logo" /></h1>
<fieldset class="search grid_5">
<legend class="vh">Search form</legend>
<form action="search">
<input type="text" name="search" id="search" placeholder="Search" />
<input type="submit" name="submit" id="submit" value="Go" />
</form>
</fieldset>
</header>
<nav id="gns" class="grid_12">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Latest News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<section id="main-content" class="grid_12">
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">GrandParent</a></li>
<li><a href="#">Parent</a></li>
<li><a href="#">Child</a></li>
</ul>
<div class="block"> <!-- Allows you to decide to position the lns nav before or after the content in mobile -->
<nav id="lns" class="grid_3">
<ul>
<li><a href="#">Sub page 1</a>
<ul>
<li><a href="#">Subsub page 1</a></li>
<li><a href="#">Subsub page 2</a></li>
<li><a href="#">Subsub page 3</a></li>
<li><a href="#">Subsub page 4</a></li>
</ul></li>
<li><a href="#">Sub page 2</a></li>
<li><a href="#">Sub page 3</a></li>
<li><a href="#">Sub page 4</a></li>
</ul>
</nav>
<article class="content grid_9">
<header>
<h2 class="page-title">Page title goes here</h2>
</header>
<img src="imgs/pagebanner.jpg" alt="Content Page Banner image" title="Content Page Banner image" />
<p>This block of code and content contains pretty much, all the elements you may include in your Wordpress blog. It's by no means comprehensive, but it has the main elements. When you are working on the styling of your blog (but after you have it installed), copy all the content of this page and paste it into an empty blog post, under the HTML tab (not the Visual), and click preview. This will show you the primary elements available to you that you can style. Also, every element has been included in an accessible and up to date (HTML5) manner, especially the table and the form. Try and keep the structure of that in place. If you're not sure how to make tables accessible, check out this <a href="http://www.456bereastreet.com/archive/200410/bring_on_the_tables/">fantastic article on 456 Berea St.</a> I've also put small tips in the content as you go along, to indicate what is good practise or better for accessibility.</p>
<p>Become familiar with the content, so you know what's there to style (e.g. if you use <a href="http://meyerweb.com/eric/tools/css/reset/">Eric Meyer's Reset CSS</a>, you won't see the strong or em tags in the next paragraph). This is a work in progress, so hope it helps. So let's begin!</p>
<h1>Really, you shouldn't have a h1 in your body text, but here's a style for it anyway</h1>
<p>A h1 should wrap the logo and be the primary header on the page. A page should only have one h1. This is both semantically better and more accessible to your users. Ideally, wrap a logo, with proper alt and title attributes in a h1 and have this at the top of the page. Now for some filler text from <a href="http://www.blindtextgenerator.com">Blind Text Generator</a>: <br />
<strong>Far far away,</strong> behind the word mountains, far from the countries <em>Vokalia</em> and <em>Consonantia</em>, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<figure id="screenshot">
<img src="https://github.com/tadywankenobi/Content-Starter/raw/master/screenshot.jpg" alt="Screenshot of a desktop" title="Screenshot of a desktop" />
<figcaption for="screenshot">This is a screenshot!</figcaption>
<small>© Copyright of me 2011</small>
</figure>
<h2>A h2 style is more appropriate as the first header in content</h2>
<p>I personally don't like to use horizontal rules (<hr>'s), but you might feel it's something you'd like to use. You might add a "back to top" graphic to it or something. I'm not sure. Either way, there's a horizontal rule between this paragraph and the next header for you to style up should you so wish.</p>
<hr />
<h3>A h3 style should follow suit</h3>
<p>More Blind Text: The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. Of course an example of an <a href="http://www.google.com" title="Link to Google">inline link</a> is always handy to have too. Set the focus outline in the stylesheet (notice I said "Set" not "Turn it on"). Also, where you provide a :hover, provide an :active and a :focus. This will keep your links accessible.</p>
<h4>Really, I personally can't think of a reason...</h4>
<p>... why you would need more than 3 header levels for your content, in the same way that you shouldn't have more than 3 typefaces on a page. How and ever, that's for you to decide. So for that reason, there's no h5 or h6 styles here. Lists, on the other hand, can be a pain. The main thing to watch out for with lists is if you float them and then, give the items widths with padding and margins, they add up and push out to the right very quickly.</p>
<ul>
<li>There are a number of things lists are used for.</li>
<li>Lists...</li>
<li><a href="#">Link lists, often in a block style</a></li>
<li>Really long blocks of content to be shown in sequential order. It doesn't often work to do this and if the content is really that long and <em>still</em> needs to go into an unordered list, then really, you have too much content and no one is going to read it. It's an unfortunate fact, but it's true. Think about how much you read on websites yourself. Are you really going to go through all that content? Maybe you would; I won't.</li>
<li><ul>
<li>Then of course, there's lists in lists.</li>
<li>I think rules of competitions and guidelines are really the only things myself I can see lists in lists being used for.</li>
<li>Or addresses in lists, that might make sense</li>
<li>Whatever the reason, they should be catered for. Ramble, ramble, ramble.</li>
</ul></li>
<li>I'm not going to write new stuff out for the ol, I'll just repeat this content</li>
</ul>
<ol>
<li>There are a number of things lists are used for.</li>
<li>Lists...</li>
<li><a href="#">Link lists</a></li>
<li>Really long blocks of content to be shown in sequential order. It doesn't often work to do this and if the content is really that long and <em>still</em> needs to go into an unordered list, then really, you have too much content and no one is going to read it. It's an unfortunate fact, but it's true. Think about how much you read on websites yourself. Are you really going to go through all that content? Maybe you would; I won't.</li>
<li><ul>
<li>Then of course, there's lists in lists.</li>
<li>I think rules of competitions and guidelines are really the only things myself I can see lists in lists being used for.</li>
<li>Or addresses in lists, that might make sense</li>
<li>Whatever the reason, they should be catered for</li>
</ul></li>
</ol>
<p>Let's look at some lesser known, but important to have elements catered for by the Wordpress editor, primarily the blockquote and the code tags. Note that the Wordpress editor has no "cite" tag, you'll have to add this yourself and should add it to keep your blockquote both relevant and accessible.</p>
<blockquote>Now is the winter of our discontent
Made glorious summer by this sun of York;
And all the clouds that lour'd upon our house
In the deep bosom of the ocean buried.</blockquote>
<cite>Richard III Act 1 Sc. 1 - <em>William Shakespeare</em></cite>
<code>
$(function(){
$('#hello').append('World');
});
</code>
<p>Finally, let's look at table layout. First off, tables are for data. Should you use tables for layout? Absolutely not. This is a bygone era, one we have long since passed. If you don't know enough about CSS to not use tables for layout, get someone who does to help you! The following table is fully accessible too. The caption tag here is shown, though normally, I would have it hidden to sighted users, unless absolutely necessary.</p>
<table border="0" cellpadding="0" cellspacing="0" summary="This text should describe what the data in this table is trying to convey (e.g. This table shows the sales of apples and oranges for the month of April 2011)">
<caption>Optional text that would indicate the table, like the figure text below an image (e.g. Table 1. - April 2011 Sales)</caption>
<thead>
<tr>
<th id="type-of-fruit" scope="col">Fruit</th>
<th id="europe-sales" scope="col">EU</th>
<th id="usa-sales" scope="col">USA</th>
</tr>
</thead>
<tbody>
<tr>
<th headers="type-of-fruit" id="apples" scope="row">Apples</th>
<td headers="europe-sales apples">130,000</td>
<td headers="usa-sales apples">250,000</td>
</tr>
<tr>
<th headers="type-of-fruit" id="oranges" scope="row">Oranges</th>
<td headers="europe-sales oranges">90,000</td>
<td headers="usa-sales oranges">350,000</td>
</tr>
</tbody>
</table>
<p>The final, most common element we need to include in a blog post is a form (like those produced by the Contact Form 7 plugin). Most form plugins don't format the content of the form correctly (e.g. no labels). I'd recommend you fix this with the following layout:</p>
<fieldset><legend>Contact Form</legend>
<form action="#" method="post" id="form">
<p>Text marked in the <span class="req">following colour</span> is required</p>
<ol>
<li class="req"><label for="firstname">First name</label><input type="text" name="firstname" id="firstname" class="text" placeholder="First name" required /></li>
<li class="req"><label for="lastname">Last name</label><input type="text" name="lastname" id="lastname" class="text" placeholder="Last name" required /></li>
<li class="req"><label for="email">Email address</label><input type="email" name="firstname" id="firstname" class="text" placeholder="[email protected]" required/></li>
<li><label for="url">Website<span class="extra">http://</span></label><input type="url" name="url" id="url" class="text" placeholder="www.website.com" /></li>
<li><label for="phone">Phone</label><input type="tel" name="phone" id="phone" class="text" placeholder="087 1234567" /></li>
<li><label for="message">Message</label><textarea name="message" id="message" >Style these form elements using CSS. Don't use "size", "rows" or "cols" attributes.</textarea></li>
<li class="submit"><input type="submit" name="submit" id="submit" class="submit-button" value="Send details" /></li>
</ol>
</form>
</fieldset>
<p>And that's pretty much it. If you include all this in your blog posts and style it all up correctly, you're doing well!!!</p>
</article>
</div> <!-- ./block -->
<aside>
<!-- tbd -->
</aside>
</section>
<div class="clear"></div>
</div>
<footer class="mf">
<div class="container_12">
<address>
18 Herbert St., Dublin 2
</address>
<nav id="fns">
<ul>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Accessibility</a></li>
</ul>
</nav>
</div>
</footer>
</body>
<!-- Scripts -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!--[if lt IE 8]>
<script src="js/dd_belated.js"></script>
<script>
//DD_belatedPNG.fix('');
</script>
<![endif]-->
</html>