Skip to content

Commit d018962

Browse files
author
mrmrs
committed
Merge branch 'master' into gh-pages
Conflicts: index.html
2 parents eb8f3f1 + 7720098 commit d018962

35 files changed

+5850
-71
lines changed

‎.htaccess

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# GZIP the assets that should be gzipped. This file goes in your root directory
2+
# if you're serving up your site via APACHE. http://httpd.apache.org/docs/2.2/mod/mod_deflate.html
3+
4+
AddOutputFilterByType DEFLATE text/plain
5+
AddOutputFilterByType DEFLATE text/html
6+
AddOutputFilterByType DEFLATE text/xml
7+
AddOutputFilterByType DEFLATE text/css
8+
AddOutputFilterByType DEFLATE application/xml
9+
AddOutputFilterByType DEFLATE application/xhtml+xml
10+
AddOutputFilterByType DEFLATE application/rss+xml
11+
AddOutputFilterByType DEFLATE application/javascript
12+
AddOutputFilterByType DEFLATE application/x-javascript

‎README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
Checkout [ht-ml.cc](http://ht-ml.cc "HTML - Common patterns for reuse")
2+
3+
# HTML - Work in Progress
4+
5+
#### Common Markup Patterns
6+
7+
Common markup patterns useful for developing prototypes or creating new themes.
8+
9+
# Features
10+
11+
* Modular file structure - add your own patterns, or delete the ones you don't like.
12+
* Semantic markup examples for common design patterns.
13+
* 100% responsive :)
14+
* Thoroughly commented code (Useful comments and reference links for new HTML developers)
15+
16+
# Getting started
17+
18+
* Create a new repo for your project on Github
19+
* In terminal run
20+
```bash
21+
git clone git@github.com:mrmrs/html.git [yourNewRepoName]
22+
cd [yourNewRepoName]
23+
git remote rm origin
24+
git remote add origin git@github.com:[yourUserName]/[yourNewRepoName].git
25+
git remote -v
26+
```
27+
28+
* git remote -v will allow you to check that you have changed the remote origin correctly. The output should look like:
29+
```bash
30+
origin git@github.com:[yourUserName]/[yourNewRepoName].git (fetch)
31+
origin git@github.com:[yourUserName]/[yourNewRepoName].git (push)
32+
```
33+
34+
* Once you add & commit files you are ready to publish run:
35+
```bash
36+
git push -u origin master
37+
```
38+
39+
Now your set up to use this in a new project.
40+
41+
# Author
42+
[MRMRS](http://mrmrs.cc "Adam Morse - Designer Developer")
43+
44+
# Reference
45+
[Mozilla HTML element list](http://https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list "Mozilla HTML element list")
46+
47+
# License
48+
This work is licensed under a [Creative Commons Attribution 3.0 Unported
49+
License](http://creativecommons.org/licenses/by/3.0/ "Creative Commons
50+
License").

‎Rakefile

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
require "rubygems"
2+
require 'rake'
3+
4+
desc "Automatically generate site at :4000 for local dev"
5+
task :dev do
6+
system "jekyll serve --watch"
7+
end # task :dev
8+
9+
desc "Start Sass so that is compiles to css upon file save"
10+
task :sass do
11+
system "sass --watch _sass:css"
12+
end # task :sass
13+
14+
desc "Start Sass so that is minifies and compiles to nkd/css/i.css upon file save"
15+
task :minify do
16+
system "sass --watch _sass:css --style compressed"
17+
end # task :minify
18+
19+
desc "Remove _site from directory before committing"
20+
task :clean do
21+
system "rm -rf _site"
22+
end # task :clean
23+

‎_config.yml

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# This will be the first part of the title tag for your site
2+
# <title> {{site.name}} </title>
3+
# ============================================================
4+
name: "HTML5 Patterns"
5+
6+
# Populates the meta description for the site. Should be under 150 characters for best SEO results.
7+
# ============================================================
8+
description: "Common HTML5 patterns I use."
9+
10+
# Owner (organization or individual) of site content - You'll want to change this from mrmrs :)
11+
# ============================================================
12+
author: "mrmrs"
13+
14+
# Chance this when you generate your site for production to your production URL i.e http://mrsjxn.com
15+
# ============================================================
16+
#url: "http://ht-ml.cc
17+
url: "http://localhost:4000"
18+
19+
# Publish future posts or not option.
20+
# ============================================================
21+
future: true
22+
23+
# "A list of directories (including trailing slash) and files to exclude from the conversion"
24+
# I normally exclude _sass, README*, and .gitignore
25+
# Directories that start with an underscore _ are not copied over by default. Still like to include _sass anyways.
26+
# ============================================================
27+
exclude: [README.md, Rakefile]

‎_includes/_article.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<section>
2+
<article>
3+
<h1>Title</h1>
4+
<p class="intro">
5+
Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod
6+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
7+
quis nostrud <em>exercitation ullamco laboris nisi ut aliquip ex ea commodo
8+
consequat</em>. Duis aute irure dolor in reprehenderit in voluptate velit esse
9+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
10+
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
11+
</p>
12+
<blockquote>
13+
<p>
14+
This is a GREAT pull quote.
15+
</p>
16+
<a href="#">- Author</a>
17+
</blockquote>
18+
<p>
19+
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
20+
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
21+
ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
22+
veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
23+
ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
24+
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
25+
qui dolorem eum fugiat quo voluptas nulla pariatur?"
26+
</p>
27+
<p>
28+
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
29+
praesentium voluptatum deleniti atque corrupti quos dolores et quas
30+
molestias excepturi sint occaecati cupiditate non provident, similique sunt
31+
in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
32+
fuga. Et harum quidem rerum facilis est et expedita distinctio.
33+
</p>
34+
</article>
35+
</section>

‎_includes/_code.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<section>
2+
<code>
3+
<pre>
4+
sudo ipfw pipe 1 config bw 256KByte/s
5+
sudo ipfw add 1 pipe 1 src-port 3000
6+
</pre>
7+
</code>
8+
</section>

‎_includes/_figure.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<section>
2+
<figure>
3+
<img src="/img/figure-example.jpg" alt="Figure Example">
4+
<figcaption>
5+
Photo of the sky at night. Original by <a href="http://flickr.com/photos/heyitsadam/">@mrmrs</a>
6+
</figcaption>
7+
</figure>
8+
</section>

‎_includes/_footer.html

Whitespace-only changes.

‎_includes/_form.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<section>
2+
<form>
3+
<fieldset>
4+
<!--
5+
Every fieldset must contain a legend. IE barfs if it's not there.
6+
It's no fun.
7+
-->
8+
<legend>Legend Example</legend>
9+
10+
<div>
11+
<label>Text Input Label</label>
12+
<input type="text"/>
13+
<p>Helper text if necessary.</p>
14+
</div>
15+
16+
<div>
17+
<label>Password</label>
18+
<input type="password" />
19+
<p>Error messages when appropriate.</p>
20+
</div>
21+
22+
<div>
23+
<label for="email">Email</label>
24+
<input type="email" id="email" class="form-text" />
25+
</div>
26+
27+
<div>
28+
<label for="gender">Dropdown</label>
29+
<select>
30+
<option>Option 1</option>
31+
<option>Option 2</option>
32+
<option>Option 3</option>
33+
</select>
34+
</div>
35+
36+
<div>
37+
<label>Radio Buttons</label>
38+
<ul>
39+
<li><label><input type="radio" /> Label 1</label></li>
40+
<li><label><input type="radio" /> Label 2</label></li>
41+
<li><label><input type="radio" /> Label 3</label></li>
42+
</ul>
43+
</div>
44+
45+
<div>
46+
<label for="url">URL Input</label>
47+
<input type="url" placeholder="http://mrmrs.cc" />
48+
</div>
49+
50+
<div>
51+
<label>Text area</label>
52+
<textarea></textarea>
53+
</div>
54+
55+
<div>
56+
<label><input type="checkbox" /> This is a checkbox.</label>
57+
</div>
58+
59+
<div>
60+
<input type="submit" value="Submit" />
61+
</div>
62+
63+
</fieldset>
64+
</form>
65+
</section>

‎_includes/_head.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<head>
2+
<meta charset="utf-8">
3+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
4+
5+
<title> {{site.name}} </title>
6+
<meta name="author" content="{{site.author}}">
7+
<meta name="description" content="{{site.description}}">
8+
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
11+
<link rel="stylesheet" href="css/i.css">
12+
13+
<!-- Favicons and Touch Device Icons -->
14+
<link rel="shortcut icon" href="favicon.ico">
15+
<link rel="apple-touch-icon" href="touch-icon-iphone-precomposed.png">
16+
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-precomposed.png">
17+
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina-precomposed.png">
18+
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina-precomposed.png">
19+
</head>

‎_includes/_headings_copy.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<section>
2+
<h1>Headings &amp; Copy</h1>
3+
<h1 class="h1">First Header h1</h1>
4+
<p>
5+
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
6+
praesentium voluptatum deleniti atque corrupti quos.
7+
</p>
8+
<h2 class="h2">Second header h2</h2>
9+
<p>
10+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
11+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
12+
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
13+
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
14+
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
15+
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
16+
</p>
17+
<h3 class="h3">Third header h3</h3>
18+
<p>
19+
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
20+
praesentium voluptatum deleniti atque corrupti quos dolores et quas
21+
molestias excepturi sint occaecati cupiditate non provident, similique sunt
22+
in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
23+
fuga. Et harum quidem rerum facilis est et expedita distinctio.
24+
</p>
25+
<h4 class="h4">Fourth header h4</h4>
26+
<p>
27+
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
28+
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
29+
ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
30+
veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
31+
ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
32+
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
33+
qui dolorem eum fugiat quo voluptas nulla pariatur?"
34+
</p>
35+
<h5 class="h5">Fifth header h5</h5>
36+
<p>
37+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
38+
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
39+
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
40+
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
41+
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
42+
</p>
43+
<h6 class="h6">Sixth header h6</h6>
44+
<p>
45+
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
46+
praesentium voluptatum deleniti atque corrupti quos.
47+
</p>
48+
</section>

‎_includes/_js_includes.html

Whitespace-only changes.

‎_includes/_links.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<section>
2+
<h1>Links</h1>
3+
<a href="#" class="link" title="Sample text link">Sample text link</a>
4+
<a href="#" class="link btn" title="Sample button link">Sample button link</a>
5+
</section>

‎_includes/_lists.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<section>
2+
<h1 class="h1">Lists</h1>
3+
<ul class="list-horizontal">
4+
<li>List Item 1</li>
5+
<li>List Item 2</li>
6+
<li>List Item 3</li>
7+
<li>List Item 4</li>
8+
<li>List Item 5</li>
9+
<li>List Item 6</li>
10+
</ul>
11+
<ul class="list-vertical">
12+
<li>List Item 1</li>
13+
<li>List Item 2</li>
14+
<li>List Item 3</li>
15+
<li>List Item 4</li>
16+
<li>List Item 5</li>
17+
<li>List Item 6</li>
18+
</ul>
19+
<dl class="list-stats">
20+
<dt class="list-stats-label">
21+
Kick
22+
</dt>
23+
<dd class="list-stats-stat">
24+
808
25+
</dd>
26+
<dt class="list-stats-label">
27+
Snare
28+
</dt>
29+
<dd class="list-stats-stat">
30+
909
31+
</dd>
32+
</dl>
33+
<dl class="list-pairs">
34+
<dt class="list-pairs-key">
35+
Maine
36+
</dt>
37+
<dd class="list-pairs-value">
38+
Augusta
39+
</dd>
40+
<dt class="list-pairs-key">
41+
California
42+
</dt>
43+
<dd class="list-pairs-value">
44+
Sacremento
45+
</dd>
46+
<dt class="list-pairs-key">
47+
Oregon
48+
</dt>
49+
<dd class="list-pairs-value">
50+
Salem
51+
</dd>
52+
<dt class="list-pairs-key">
53+
New York
54+
</dt>
55+
<dd class="list-pairs-value">
56+
Albany
57+
</dd>
58+
</dl>
59+
<dl class="list-defintions">
60+
<dt class="list-definitions-term">
61+
Ascender
62+
</dt>
63+
<dd class="list-definitions-description">
64+
The part of certain lowercase letters that extends above the x-height of a font.
65+
</dd>
66+
<dt class="list-definitions-term">
67+
Font
68+
</dt>
69+
<dd class="list-definitions-description">
70+
Traditionally, a complete set of characters for one typeface at one particular type size. Often used more loosely as a synonym for "typeface".
71+
</dd>
72+
<dt class="list-definitions-term">
73+
Golden Section
74+
</dt>
75+
<dd class="list-definitions-description">
76+
The ideal proportion according to the ancient Greeks. It is visualized as the
77+
division of a line into two unequal segments in such a way that the ratio of the
78+
smaller segment to the larger segment is equal to the ratio of the larger to the
79+
whole. It is usually defined as 21:34, that is, 21/34 and 34/(21+34) both equal
80+
approximately 0.618. A rectangle whose sides are of this proportion is called a
81+
"golden rectangle". Golden rectangles can be found in the proportions of the
82+
Parthenon and many medieval manuscripts.
83+
</dd>
84+
</dl>
85+
</section>

0 commit comments

Comments
 (0)