├── .htaccess ├── README.md └── index.html /.htaccess: -------------------------------------------------------------------------------- 1 | #Gzip 2 | 3 | AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript 4 | 5 | #End Gzip 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | To view this unstyled markup visit [http://mrmrs.io/html](http://mrmrs.io/html) 2 | 3 | # HTML 4 | 5 | Common markup patterns I use for developing websites. 6 | 7 | # Features 8 | 9 | * All non-media elements in the HTML5 spec are included on one page and are ready to be styled. 10 | * Modular Structure - add your own patterns, or delete the ones you don't like. 11 | * Semantic and accessible markup examples for common design patterns. 12 | * Thoroughly commented code (notes and reference links for new HTML developers) 13 | 14 | # Getting the Code 15 | 16 | * Create a new repo for your project on Github 17 | * In terminal run 18 | ```bash 19 | git clone git@github.com:mrmrs/html.git yourNewRepoName 20 | cd [yourNewRepoName] 21 | git remote rm origin 22 | git remote add origin git@github.com:yourUserName/yourNewRepoName.git 23 | git remote -v 24 | ``` 25 | 26 | * git remote -v will allow you to check that you have changed the remote origin correctly. The output should look like: 27 | ```bash 28 | origin git@github.com:yourUserName/yourNewRepoName.git (fetch) 29 | origin git@github.com:yourUserName/yourNewRepoName.git (push) 30 | ``` 31 | 32 | Now you're set up to use this in a new project. 33 | 34 | # Getting Started 35 | 36 | ## The HTML 37 | * Open up index.html with your favorite text editor and hack away. It's that simple. 38 | * To preview changes at http://localhost:8000 - open up terminal.app and type 39 | ``` 40 | python -m SimpleHTTPServer 41 | ``` 42 | 43 | # Author 44 | [MRMRS](http://mrmrs.cc "Adam Morse - Designer Developer") 45 | 46 | # Reference 47 | [Mozilla HTML element list](http://https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list "Mozilla HTML element list") 48 | 49 | # MIT LICENSE 50 | Copyright (c) 2018 Adam Morse http://opensource.org/licenses/MIT 51 | 52 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 53 | 54 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 55 | 56 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 57 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HTML Patterns 9 | 10 | 11 | 12 | 13 | 14 | 24 | 25 | 26 | 27 | 28 |
29 |

HTML

30 |

Every html element in one place. Just waiting to be styled.

31 |
32 | 33 | 34 | 35 | 44 | 45 |
46 |

Site title

 47 | 56 |
57 | 58 |
59 |

Headings & Copy

60 |

First Header h1

61 |

62 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 63 | praesentium voluptatum deleniti atque corrupti quos. 64 |

65 |

Second header h2

66 |

67 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 68 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 69 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 70 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 71 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 72 | non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 73 |

74 |

Third header h3

75 |

76 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 77 | praesentium voluptatum deleniti atque corrupti quos dolores et quas 78 | molestias excepturi sint occaecati cupiditate non provident, similique sunt 79 | in culpa qui officia deserunt mollitia animi, id est laborum et dolorum 80 | fuga. Et harum quidem rerum facilis est et expedita distinctio. 81 |

82 |

Fourth header h4

83 |

84 | Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 85 | consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt 86 | ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 87 | veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi 88 | ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 89 | qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum 90 | qui dolorem eum fugiat quo voluptas nulla pariatur?" 91 |

92 |
Fifth header h5
93 |

94 | Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 95 | doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 96 | veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim 97 | ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia 98 | consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 99 |

100 |
Sixth header h6
101 |

102 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 103 | praesentium voluptatum deleniti atque corrupti quos. 104 |

105 |
106 |
107 |
108 |

Links

109 | Sample text link 110 | Sample button link 111 |
112 |
113 |
114 |

Lists

115 |

Unordered list

116 | 124 |

Ordered list

125 |
    126 |
  1. First
    2. 127 |
  2. Second
    3. 128 |
  3. Third
    4. 129 |
  4. Fourth
    5. 130 |
  5. Fifth
    6. 131 |
  6. Sixth
    7. 132 |
133 |

Definition list

134 |
135 |
136 | Kick 137 |
138 |
139 | 808 140 |
141 |
142 | Snare 143 |
144 |
145 | 909 146 |
147 |
148 |
149 |
Maine
150 |
Augusta
151 |
California
152 |
Sacremento
153 |
Oregon
154 |
Salem
155 |
New York
156 |
Albany
157 |
158 |
159 |
Ascender
160 |
The part of certain lowercase letters that extends above the x-height of a font.
161 |
Font
162 |
Traditionally, a complete set of characters for one typeface at 163 | one particular type size. Often used more loosely as a synonym for 164 | "typeface". 165 |
166 |
Golden Section
167 |
168 | The ideal proportion according to the ancient Greeks. It is visualized as the 169 | division of a line into two unequal segments in such a way that the ratio of the 170 | smaller segment to the larger segment is equal to the ratio of the larger to the 171 | whole. It is usually defined as 21:34, that is, 21/34 and 34/(21+34) both equal 172 | approximately 0.618. A rectangle whose sides are of this proportion is called a 173 | "golden rectangle". Golden rectangles can be found in the proportions of the 174 | Parthenon and many medieval manuscripts. 175 |
176 |
177 |
178 | 179 |
180 |

Forms

181 |
182 |
183 | 187 | Legend Example 188 | 189 |
190 | 191 | 192 |

Helper text if necessary.

193 |
194 | 195 |
196 | 197 | 198 |

Error messages when appropriate.

199 |
200 | 201 |
202 | 203 | 204 |
205 | 206 |
207 | 208 | 209 |
210 | 211 |
212 | 213 | 214 |
215 | 216 | 217 |
218 | 219 | 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 |
252 | 253 |
254 |
255 |
256 |
257 |

Buttons

258 | 259 | 260 | 261 |
262 |
263 |
264 |

An Example Article

265 |
266 |

Title

267 |

268 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 269 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 270 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 271 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 272 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 273 | non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 274 |

275 |
276 |

277 | This is a GREAT pull quote. 278 |

279 | - Author 280 |
281 |

282 | Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 283 | consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt 284 | ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 285 | veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi 286 | ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit 287 | qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum 288 | qui dolorem eum fugiat quo voluptas nulla pariatur?" 289 |

290 |

291 | At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 292 | praesentium voluptatum deleniti atque corrupti quos dolores et quas 293 | molestias excepturi sint occaecati cupiditate non provident, similique sunt 294 | in culpa qui officia deserunt mollitia animi, id est laborum et dolorum 295 | fuga. Et harum quidem rerum facilis est et expedita distinctio. 296 |

297 |
298 |
299 |
300 | 301 |
302 |

Code examples

303 | 304 | 
305 |       sudo ipfw pipe 1 config bw 256KByte/s
306 |       sudo ipfw add 1 pipe 1 src-port 3000
307 |
308 | 309 |
310 |
311 |
312 |

Footer

313 | 344 |
345 | 346 |
347 |

New hawtness

348 | 80 % 349 |

We are this close to the goal: $824.

350 |
351 | 352 |
353 |
354 |

Random Stuff

355 |
356 | This is for things like copyright info 357 | Content that isn't accurate or relevant anymore. 358 | Generic span wrapper 359 | HTML How to meet ladies 360 |

This is inline text with subscript and superscript elements.

361 |

362 | f(x) = a0 + a1x + 363 | a2x2, where a2 ≠ 0 364 |

365 | 366 |
367 | 368 |
369 |
370 | Figure Example 371 |
372 | Photo of the sky at night. Original by @mrmrs 373 |
374 |
375 |
376 | 377 |
378 | 381 | 382 | 
383 |           /Sites/html master  ☠ ☢
384 |           $  ls -gto
385 | 
386 |           total 104
387 |           -rw-r--r--   1   10779 Jun  5 16:24 index.html
388 |           -rw-r--r--   1    1255 Jun  5 16:00 _config.yml
389 |           drwxr-xr-x  11     374 Jun  5 15:57 _site
390 |           -rw-r--r--   1    1597 Jun  5 14:16 README.md
391 |           drwxr-xr-x   5     170 Jun  5 14:15 _sass
392 |           -rw-r--r--   1     564 Jun  4 15:59 Rakefile
393 |           drwxr-xr-x   6     204 Jun  4 15:59 _includes
394 |           drwxr-xr-x   4     136 Jun  4 15:59 _layouts
395 |           drwxr-xr-x   3     102 Jun  4 15:59 _resources
396 |           drwxr-xr-x   3     102 Jun  4 15:59 css
397 |           -rw-r--r--   1    1977 Jun  4 15:59 favicon.icns
398 |           -rw-r--r--   1    6518 Jun  4 15:59 favicon.ico
399 |           -rw-r--r--   1    1250 Jun  4 15:59 touch-icon-ipad-precomposed.png
400 |           -rw-r--r--   1    2203 Jun  4 15:59 touch-icon-ipad-retina-precomposed.png
401 |           -rw-r--r--   1    1046 Jun  4 15:59 touch-icon-iphone-precomposed.png
402 |           -rw-r--r--   1    1779 Jun  4 15:59 touch-icon-iphone-retina-precomposed.png
403 |
404 | 405 |
406 |
407 |

Tables

408 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 |
This is a caption for a table
IDNameDateAddress
Table footer info
#999-32acFirst Name13 May, 2013999 Spruce Lane, Somewhere, CA 94101
#888-32ddSample Name17 May, 1984999 Spruce Lane, Somewhere, CA 94101
456 |
457 |
458 |

Footer

459 | 463 |
464 | 465 | 466 | 467 | --------------------------------------------------------------------------------