├── .DS_Store ├── README.markdown ├── audio ├── .DS_Store ├── Tromboon-sample.ogg ├── arnie.wav └── example.ogg ├── css └── screen.css ├── images └── header │ ├── .svn │ ├── all-wcprops │ ├── entries │ ├── format │ ├── prop-base │ │ └── logo.png.svn-base │ └── text-base │ │ └── logo.png.svn-base │ └── logo.png ├── index.html └── video ├── 320x240.m4v └── 320x240.ogg /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shapeshed/html5-css.framework/3ddf64e44ff8bd997aa4be645f0cecbe5d527f28/.DS_Store -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | # HTML5 Framework 2 | 3 | **Author**: [George Ornbo][] 4 | **Source Code**: [Github][] 5 | 6 | ## License 7 | 8 | HTML5 Framework is free for personal and commercial use. 9 | 10 | If you use it commercially use a donation of $10 is suggested. You can send [donations here](http://pledgie.com/campaigns/5834). 11 | 12 | HTML5 Framework is licensed under a [Open Source Initiative - BSD License][] license. 13 | 14 | ## Name 15 | 16 | HTML5 Framework 17 | 18 | ## Synopsis 19 | 20 | A framework for creating layouts using HTML5 21 | 22 | ## Description 23 | 24 | HTML5 Framework is just what you think it might be - a framework for creating layouts in HTML5. 25 | 26 | The base file includes HTML5 elements and has a CSS file that styles these elements. 27 | 28 | Authors can use the framework as a starting point for creating layouts in HTML5. 29 | 30 | Issues are tracked at [Lighthouse][]. 31 | 32 | [George Ornbo]: http://shapeshed.com/ 33 | [Github]: http://github.com/shapeshed/html5.framework/ 34 | [Open Source Initiative - BSD License]: http://opensource.org/licenses/bsd-license.php 35 | [Lighthouse]: http://shapeshed.lighthouseapp.com/projects/36182-html5-css-framework -------------------------------------------------------------------------------- /audio/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shapeshed/html5-css.framework/3ddf64e44ff8bd997aa4be645f0cecbe5d527f28/audio/.DS_Store -------------------------------------------------------------------------------- /audio/Tromboon-sample.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shapeshed/html5-css.framework/3ddf64e44ff8bd997aa4be645f0cecbe5d527f28/audio/Tromboon-sample.ogg -------------------------------------------------------------------------------- /audio/arnie.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shapeshed/html5-css.framework/3ddf64e44ff8bd997aa4be645f0cecbe5d527f28/audio/arnie.wav -------------------------------------------------------------------------------- /audio/example.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shapeshed/html5-css.framework/3ddf64e44ff8bd997aa4be645f0cecbe5d527f28/audio/example.ogg -------------------------------------------------------------------------------- /css/screen.css: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------------------------------- 2 | [client] Screen Stylesheet 3 | 4 | version: 1.0 5 | date: 01/03/07 6 | author: [your name] 7 | email: [you at domain dot com] 8 | 9 | website: [your domain] 10 | 11 | -----------------------------------------------------------------------------*/ 12 | 13 | /* Reset 14 | Based on http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ 15 | Removed elements not supported in HTML5 16 | -----------------------------------------------------------------------------*/ 17 | html, body, div, span, object, iframe, 18 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 19 | a, abbr, address, cite, code, 20 | del, dfn, em, img, ins, kbd, q, samp, 21 | small, strike, strong, sub, sup, var, 22 | b, i, 23 | dl, dt, dd, ol, ul, li, 24 | fieldset, form, label, legend, 25 | table, caption, tbody, tfoot, thead, tr, th, td { 26 | margin: 0; 27 | padding: 0; 28 | border: 0; 29 | outline: 0; 30 | font-size: 100%; 31 | vertical-align: baseline; 32 | background: transparent; 33 | } 34 | 35 | /* 36 | Trigger the new block level elements in to the correct content flow 37 | -----------------------------------------------------------------------------*/ 38 | article, aside, dialog, figure, 39 | footer, header, hgroup, menu, 40 | nav, section { 41 | display: block; 42 | } 43 | 44 | /* Set up the document 45 | -----------------------------------------------------------------------------*/ 46 | body 47 | { 48 | font: 75%/1.5 Helvetica, Arial, "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; 49 | background: #ccc; 50 | color: #000; 51 | text-align:center; 52 | } 53 | #wrapper 54 | { 55 | width: 960px; /* Set page width here - you can also use percentage */ 56 | text-align:left; 57 | margin-left:auto; 58 | margin-right:auto; 59 | margin-top: .75em; 60 | margin-bottom: 1.5em; 61 | padding: 10px; 62 | background: #FFFFFF; 63 | } 64 | /* Typography 65 | -----------------------------------------------------------------------------*/ 66 | /* 67 | This sets up a vertical rhythm for the page typography 68 | Image replacement technique for the logo 69 | Change the dimensions on the H1 to the dimensions of your logo 70 | */ 71 | h1 72 | { 73 | font-size: 1em; 74 | margin-bottom: 1.5em; /* margin-bottom = 18pt */ 75 | } 76 | h2 { 77 | font-size: 1.6666666666666667em; /* 20 pt */ 78 | line-height: 0.9em; /* 20 * line-height = 18pt */ 79 | margin-bottom: 0.9em; /* 20 * margin-bottom = 18pt */ 80 | } 81 | h3 { 82 | clear: left; 83 | font-size: 1.5em; /* 18 pt */ 84 | line-height: 1em; /* 18 * line-height = 18pt */ 85 | margin-bottom: 1em; /* 18 * margin-bottom = 18pt */ 86 | } 87 | h4 { 88 | font-size: 1.3333333333333333em; /* 16 pt */ 89 | line-height: 1.125em; /* 18 * line-height = 18pt */ 90 | margin-bottom: 1.125em; /* 18 * margin-bottom = 18pt */ 91 | } 92 | h5 { 93 | font-size: 1.1666666666666667em; /* 14 pt */ 94 | line-height: 1.2857142857142858em; /* 18 * line-height = 18pt */ 95 | margin-bottom: 1.2857142857142858em; /* 18 * margin-bottom = 18pt */ 96 | } 97 | h6 { 98 | font-size:1em; /* 12 pt */ 99 | line-height: 1.5em; /* 18 * line-height = 18pt */ 100 | margin-bottom: 1.5em; /* 18 * margin-bottom = 18pt */ 101 | } 102 | p, q, cite, address 103 | { 104 | font-size:1em; /* 12 pt */ 105 | line-height: 1.5em; /* 18 * line-height = 18pt */ 106 | margin-bottom: 1.5em; /* 18 * margin-bottom = 18pt */ 107 | } 108 | ul, ol, dl 109 | { 110 | font-size: 1em; /* Equivalent to 12pt */ 111 | margin-bottom: 1.5em; /* margin-bottom = 18pt */ 112 | } 113 | li, dd, dt 114 | { 115 | font-size: 1em; /* Equivalent to 12pt */ 116 | } 117 | a 118 | { 119 | text-decoration: underline; 120 | color: #3333cc; 121 | outline:none; 122 | } 123 | a:hover 124 | { 125 | text-decoration: none; 126 | } 127 | code, samp, dfn, kbd, var, acronym, ins, del 128 | { 129 | 130 | } 131 | abbr { 132 | speak: spell-out; 133 | } 134 | 135 | acronym { 136 | speak: normal; 137 | } 138 | /* Header / Navigation 139 | -----------------------------------------------------------------------------*/ 140 | #skip-links { 141 | height: 0; 142 | width: 0; 143 | display: none; 144 | } 145 | 146 | nav 147 | { 148 | clear: both; 149 | } 150 | nav ul 151 | { 152 | list-style: none; 153 | } 154 | nav ul li 155 | { 156 | display: inline; 157 | margin-right: 0.75em; 158 | 159 | } 160 | 161 | 162 | /* Footer 163 | -----------------------------------------------------------------------------*/ 164 | footer{ 165 | clear:both; 166 | } 167 | 168 | /* Forms 169 | -----------------------------------------------------------------------------*/ 170 | #content form 171 | { 172 | margin-bottom: 1.5em; 173 | } 174 | 175 | #content fieldset 176 | { 177 | border: 1px solid #ccc; 178 | padding: 0.25em; /* 3px */ 179 | } 180 | 181 | #content label 182 | { 183 | width: 200px; 184 | clear: left; 185 | float: left; 186 | margin-bottom: 1.5em; 187 | } 188 | 189 | #content input.button, #content input.checkbox, #content input.file, #content input.password, #content input.radio, #content input.reset,#content input.text,#content input.submit, #content textarea 190 | { 191 | float: left; 192 | } 193 | #content input.file, #content input.password, #content input.text 194 | { 195 | width: 200px; 196 | border: 1px solid #ccc; 197 | padding: 0.25em; 198 | } 199 | 200 | #content input.submit 201 | { 202 | clear: left; 203 | } 204 | 205 | #content textarea 206 | { 207 | width: 200px; 208 | border: 1px solid #ccc; 209 | } 210 | 211 | 212 | 213 | /* Tables 214 | -----------------------------------------------------------------------------*/ 215 | table 216 | { 217 | width: 100%; 218 | border-spacing: 0; 219 | border-collapse: collapse; 220 | border: 1px solid #ccc; 221 | } 222 | caption 223 | { 224 | text-align: left; 225 | font-size:1em; /* 12 pt */ 226 | line-height: 1.5em; /* 18 * line-height = 18pt */ 227 | } 228 | 229 | th 230 | { 231 | text-align: left; 232 | font-weight: bold; 233 | border: 1px solid #ccc; 234 | padding: .25em; /* 3px */ 235 | background: #ccc; 236 | } 237 | 238 | 239 | 240 | td 241 | { 242 | text-align: left; 243 | font-weight: normal; 244 | border: 1px solid #ccc; 245 | padding: .25em; /* 3px */ 246 | } 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | -------------------------------------------------------------------------------- /images/header/.svn/all-wcprops: -------------------------------------------------------------------------------- 1 | K 25 2 | svn:wc:ra_dav:version-url 3 | V 35 4 | /svn/!svn/ver/2/trunk/images/header 5 | END 6 | logo.png 7 | K 25 8 | svn:wc:ra_dav:version-url 9 | V 44 10 | /svn/!svn/ver/2/trunk/images/header/logo.png 11 | END 12 | -------------------------------------------------------------------------------- /images/header/.svn/entries: -------------------------------------------------------------------------------- 1 | 8 2 | 3 | dir 4 | 2 5 | https://shape-shed-css.googlecode.com/svn/trunk/images/header 6 | https://shape-shed-css.googlecode.com/svn 7 | 8 | 9 | 10 | 2008-09-30T23:34:16.695073Z 11 | 2 12 | gornbo 13 | 14 | 15 | svn:special svn:externals svn:needs-lock 16 | 17 | logo.png 18 | file 19 | 20 | 21 | 22 | 23 | 2008-05-25T15:56:39.000000Z 24 | d8dbd486070d76296a71799eb0788b33 25 | 2008-09-30T23:34:16.695073Z 26 | 2 27 | gornbo 28 | has-props 29 | 30 | -------------------------------------------------------------------------------- /images/header/.svn/format: -------------------------------------------------------------------------------- 1 | 8 2 | -------------------------------------------------------------------------------- /images/header/.svn/prop-base/logo.png.svn-base: -------------------------------------------------------------------------------- 1 | K 13 2 | svn:mime-type 3 | V 24 4 | application/octet-stream 5 | END 6 | -------------------------------------------------------------------------------- /images/header/.svn/text-base/logo.png.svn-base: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shapeshed/html5-css.framework/3ddf64e44ff8bd997aa4be645f0cecbe5d527f28/images/header/.svn/text-base/logo.png.svn-base -------------------------------------------------------------------------------- /images/header/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shapeshed/html5-css.framework/3ddf64e44ff8bd997aa4be645f0cecbe5d527f28/images/header/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Page Title 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 20 |
21 |

New HTML5 Elements

22 | 23 |

Article

24 |
25 |

Man bites dog
26 | A man has bitten a dog on his way to the shops...

27 |
28 | 29 |

Aside (within article)

30 |
31 |

Man bites dog
32 | A man has bitten a dog on his way to the shops...

33 | 36 |
37 | 38 |

Audio

39 | 43 | 44 |

Canvas

45 | 46 | 47 | 48 | 49 |

Command

50 | 51 | 52 |

Datagrid

53 | 54 | 55 | 56 | 57 |

Datalist

58 | 59 | 60 | 64 | 65 |

Data Template

66 | 67 | 68 | 69 | 70 |

Details

71 |
72 | 73 |

There's some more text here and it's good!

74 |
75 | 76 |
77 | 78 |

and you should be able to see this para!

79 |
80 | 81 |
82 |

This doesn't have a label

83 |
84 | 85 |
86 |
87 | 88 |
89 |

With a form

90 |
91 | 92 |

Dialog

93 | 94 |
Costello
95 |
Look, you gotta first baseman?
96 |
Abbott
97 |
Certainly.
98 |
Costello
99 |
Who's playing first?
100 |
Abbott
101 |
That's right.
102 |
Costello
103 |
When you pay off the first baseman every month, who gets the money?
104 |
Abbott
105 |
Every dollar of it.
106 | 107 | 108 |

Embed

109 | 110 | 111 | 112 | 113 |

Eventsource

114 | 115 | 116 | 117 | 118 |

Figure

119 |

In listing 4 we see the primary core interface 120 | API declaration.

121 |
122 | Listing 4. The primary core interface API declaration. 123 | 
interface PrimaryCore {
124 | 		  boolean verifyDataLine();
125 | 		  void sendData(in sequence<byte> data);
126 | 		  void initSelfDestruct();
127 | 		}
128 |
129 |

The API is designed to use UTF-8.

130 | 131 |

Footer

132 |
133 |

Footer content

134 |
135 | 136 |

Header

137 |
138 |
139 |

Dr. Strangelove

140 |

Or: How I Learned to Stop Worrying and Love the Bomb

141 |
142 |
143 | 144 |

Mark

145 |

I also have some kittens who are visiting me 146 | these days. They're really cute. I think they like my garden! Maybe I 147 | should adopt a kitten.

148 | 149 |

Meter

150 |
151 |
Radius:
12cm 152 |
Height:
2cm 153 |
154 | 155 |

Nav

156 | 163 | 164 |

Nest

165 | 166 | 167 | 168 |

Output

169 | This is the output of a calculation 170 | 171 |

Progress

172 |

Progress bar: 0 %

173 | 174 | 175 | 176 |

Section

177 |
178 |

This is a section

179 |

My section content

180 |
181 | 182 |

Source

183 |

See Video or Audio tag

184 | 185 |

Time

186 |

Our first date was .

187 | 188 |

Video

189 | 193 | 194 | 195 |
196 |

H1 Title

197 |

Recordari volo transactas foeditates meas, et carnales corruptiones animae meae, non quod eas amem, sed ut CAT te, deus meus. amore amoris tui facio istuc, recolens vias meas nequissimas in amaritudine recogitationis meae, ut tu dulcescas mihi, dulcedo non fallax, dulcedo felix et secura, et colligens me a dispersione, in qua frustatim discissus sum, dum ab uno te aversus in multa evanui. Exarsi enim aliquando satiari inferis in adulescentia, et silvescere ausus sum variis et umbrosis amoribus, et contabuit species mea, et conputrui coram oculis tuis, placens mihi et placere cupiens oculis hominum.

198 |

H2 Title

199 |

Recordari volo transactas foeditates meas, et carnales corruptiones animae meae, non quod eas amem, sed ut CAT te, deus meus. amore amoris tui facio istuc, recolens vias meas nequissimas in amaritudine recogitationis meae, ut tu dulcescas mihi, dulcedo non fallax, dulcedo felix et secura, et colligens me a dispersione, in qua frustatim discissus sum, dum ab uno te aversus in multa evanui. Exarsi enim aliquando satiari inferis in adulescentia, et silvescere ausus sum variis et umbrosis amoribus, et contabuit species mea, et conputrui coram oculis tuis, placens mihi et placere cupiens oculis hominum.

200 |

H3 Title

201 |

Definition: To define the meaning of a word, phrase or term. erat, quod me My abbreviation delectabat, nisi amare et amari? sed non tenebatur modus ab animo usque ad animum, quatenus est luminosus limes amicitiae, sed exhalabantur nebulae de limosa concupiscentia carnis et scatebra pubertatis, et obnubilabant atque obfuscabant cor meum, ut non discerneretur serenitas dilectionis a caligine libidinis. utrumque in confuso aestuabat et rapiebat inbecillam aetatem per abrupta cupiditatum

202 |

H4 Title

203 |

Et anno quidem illo intermissa erant studia mea, dum mihi reducto a Madauris, in qua vicina urbe iam coeperam litteraturae atque oratoriae percipiendae gratia peregrinari, longinquioris apud Karthaginem peregrinationis sumptus parabantur, animositate magis quam opibus patris, municipis Thagastensis admodum tenuis. cui narro haec? neque enim tibi, deus meus, sed apud te narro haec generi meo, generi humano, quantulacumque ex particula incidere potest in istas meas litteras. et ut quid hoc? ut videlicet ego et quisquis haec legit cogitemus, de quam profundo clamandum sit ad te. et quid

204 |
H5 Title
205 |

Furtum certe punit lex tua, domine, et lex scripta in cordibus hominum, quam ne ipsa quidem delet iniquitas: quis enim fur aequo animo furem patitur? nec copiosus adactum inopia. et ego furtum facere volui, et feci, nulla conpulsus egestate, nisi penuria et fastidio iustitiae et sagina iniquitatis. nam id furatus sum, quod mihi abundabat et multa melius; nec ea re volebam frui, quam furto appetebam, sed ipso furto et peccato.

206 |
H6 Title
207 |

Etenim deleted text inserted text est pulchris corporibus, et auro et argento et omnibus, et in contactu carnis congruentia valet plurimum, ceterisque sensibus est sua cuique accommodata modificatio corporum; habet etiam honor temporalis et imperitandi atque superandi potentia suum decus, unde etiam vindictae aviditas oritur: et tamen in cuncta haec adipiscenda non est egrediendum abs te, domine,

208 |

Type shapeshed.com into your browser address bar.

209 | 
This text has
210 | 			been formatted using
211 | 			   the HTML pre tag. The brower should
212 | 			      display all white space
213 | 			as it was entered.
214 |
215 |

And then she said like... whatever!

216 |

When you click the Delete button, you will be asked Are you sure you want to delete 9 to 5 job? Click Yes to continue.

217 |

The sub tag is used for subscript text

218 |

The sup tag is used for superscript text

219 |

The HTML tt tag renders teletype (or monospaced) text.

220 |

The program accepts the width parameter to determine the display width.

221 |
    222 |
  • List item 1
    • 223 |
  • List item 2
    • 224 |
  • List item 3
    • 225 |
226 |
    227 |
  1. List item 1
    2. 228 |
  2. List item 2
    3. 229 |
  3. List item 3
    4. 230 |
231 |
232 |
List item 1
233 |
List item 2
234 |
235 |
236 |

Mea, dum mihi reducto a Madauris, in qua vicina urbe iam coeperam litteraturae

237 |
238 |
239 | My address 240 |
241 | 242 | Some code 243 | 244 |
245 |
246 | My Fieldset Legend 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 |
277 |
278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 |
Table 1: Company data
Company NameNumber of EmployeesFoundation Year
ACME Inc10001947
XYZ Corp20001973
296 | 297 | 298 | 299 |
300 | 303 |
304 | 305 | -------------------------------------------------------------------------------- /video/320x240.m4v: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shapeshed/html5-css.framework/3ddf64e44ff8bd997aa4be645f0cecbe5d527f28/video/320x240.m4v -------------------------------------------------------------------------------- /video/320x240.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shapeshed/html5-css.framework/3ddf64e44ff8bd997aa4be645f0cecbe5d527f28/video/320x240.ogg --------------------------------------------------------------------------------