Further reading: Optimizing Web Experiences for High Resolution Screens
" + }, + { + "el": "#nav", + "title" : "Navigation", + "comment": "Navigation for adaptive web experiences can be tricky. Top navigations are typical on desktop sites, but mobile screen sizes don't give us the luxury of space. We're dealing with this situation by creating a simple menu anchor that toggles the main navigation on small screens. This is just one method. Bagcheck and Contents Magazine add an anchor in the header that jumps users to the navigation which is placed in the footer. This solution works well because it doesn't require any Javascript in order to work. Other methods exist too. For example, ESPN's mobile navigation overlays the main content of the page.
The nav is only hidden when a certain level of javascript is supported in order to ensure that users with little/poor javascript support can still access the navigation. Once the screen size is large enough to accommodate the nav, we show the main navigation links and hide the menu anchor.
See also: Responsive Navigation Patterns
" + }, + { + "el": ".search-form", + "title" : "Search", + "comment": "Search is an incredibly important priority, especially for mobile. It is a great idea to give users the ability to jump directly to what they are looking for without forcing them to wade through your site's navigation. Check out the Burton and Yelp mobile sites for great examples of experiences that prioritize search.
We're also using the HTML5 search input type, which is great for mobile devices that can bring up the appropriate virtual keyboard for many smartphones. And like the main header navigation, we're hiding the search form on small screens to save space. Clicking the search anchor toggles the form.
" + }, + { + "el": ".article-header h1", + "title" : "Article Header", + "comment": "The article header should be no more than 140 characters.
" + }, + { + "el": ".block-hero", + "title" : "Hero", + "comment": "The hero area highlights one major story using a large image and a captivating headline.
" + } +] +}; \ No newline at end of file diff --git a/source/_patterns/00-atoms/00-meta/_00-head.mustache b/source/_patterns/00-atoms/00-meta/_00-head.mustache new file mode 100644 index 000000000..938c0d2db --- /dev/null +++ b/source/_patterns/00-atoms/00-meta/_00-head.mustache @@ -0,0 +1,16 @@ + + + +Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
+Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
+Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
+Secondary font: Georgia, Times, "Times New Roman", serif;
+Secondary font italic: Georgia, Times, "Times New Roman", serif;
+Secondary font bold: Georgia, Times, "Times New Roman", serif;
\ No newline at end of file diff --git a/source/_patterns/00-atoms/02-headings/00-headings.mustache b/source/_patterns/00-atoms/02-headings/00-headings.mustache new file mode 100644 index 000000000..43f648c7f --- /dev/null +++ b/source/_patterns/00-atoms/02-headings/00-headings.mustache @@ -0,0 +1,6 @@ +dl.
\ No newline at end of file
diff --git a/source/_patterns/00-atoms/04-images/01-landscape-4x3.mustache b/source/_patterns/00-atoms/04-images/01-landscape-4x3.mustache
new file mode 100644
index 000000000..cf874ee9d
--- /dev/null
+++ b/source/_patterns/00-atoms/04-images/01-landscape-4x3.mustache
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/source/_patterns/00-atoms/04-images/05-icons.mustache b/source/_patterns/00-atoms/04-images/05-icons.mustache
new file mode 100644
index 000000000..4e2512348
--- /dev/null
+++ b/source/_patterns/00-atoms/04-images/05-icons.mustache
@@ -0,0 +1,12 @@
+
\ No newline at end of file
diff --git a/source/_patterns/00-atoms/04-images/07-favicon.mustache b/source/_patterns/00-atoms/04-images/07-favicon.mustache
new file mode 100644
index 000000000..07e985d37
--- /dev/null
+++ b/source/_patterns/00-atoms/04-images/07-favicon.mustache
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/source/_patterns/00-atoms/05-forms/00-text-fields.mustache b/source/_patterns/00-atoms/05-forms/00-text-fields.mustache
new file mode 100644
index 000000000..644ab826c
--- /dev/null
+++ b/source/_patterns/00-atoms/05-forms/00-text-fields.mustache
@@ -0,0 +1,38 @@
+
\ No newline at end of file
diff --git a/source/_patterns/00-atoms/05-forms/01-select-menu.mustache b/source/_patterns/00-atoms/05-forms/01-select-menu.mustache
new file mode 100644
index 000000000..760c9199a
--- /dev/null
+++ b/source/_patterns/00-atoms/05-forms/01-select-menu.mustache
@@ -0,0 +1,12 @@
+
\ No newline at end of file
diff --git a/source/_patterns/00-atoms/05-forms/02-checkbox.mustache b/source/_patterns/00-atoms/05-forms/02-checkbox.mustache
new file mode 100644
index 000000000..017a8dc5c
--- /dev/null
+++ b/source/_patterns/00-atoms/05-forms/02-checkbox.mustache
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/source/_patterns/00-atoms/05-forms/03-radio-buttons.mustache b/source/_patterns/00-atoms/05-forms/03-radio-buttons.mustache
new file mode 100644
index 000000000..68c83eaeb
--- /dev/null
+++ b/source/_patterns/00-atoms/05-forms/03-radio-buttons.mustache
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/source/_patterns/00-atoms/05-forms/04-html5-inputs.mustache b/source/_patterns/00-atoms/05-forms/04-html5-inputs.mustache
new file mode 100644
index 000000000..99c22cce7
--- /dev/null
+++ b/source/_patterns/00-atoms/05-forms/04-html5-inputs.mustache
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/source/_patterns/00-atoms/06-buttons/00-buttons.mustache b/source/_patterns/00-atoms/06-buttons/00-buttons.mustache
new file mode 100644
index 000000000..bdbeec360
--- /dev/null
+++ b/source/_patterns/00-atoms/06-buttons/00-buttons.mustache
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/source/_patterns/00-atoms/07-tables/00-table.mustache b/source/_patterns/00-atoms/07-tables/00-table.mustache
new file mode 100644
index 000000000..53153d519
--- /dev/null
+++ b/source/_patterns/00-atoms/07-tables/00-table.mustache
@@ -0,0 +1,50 @@
+| Table Heading 1 | +Table Heading 2 | +Table Heading 3 | +Table Heading 4 | +Table Heading 5 | +
|---|---|---|---|---|
| Table Footer 1 | +Table Footer 2 | +Table Footer 3 | +Table Footer 4 | +Table Footer 5 | +
| Table Cell 1 | +Table Cell 2 | +Table Cell 3 | +Table Cell 4 | +Table Cell 5 | +
| Table Cell 1 | +Table Cell 2 | +Table Cell 3 | +Table Cell 4 | +Table Cell 5 | +
| Table Cell 1 | +Table Cell 2 | +Table Cell 3 | +Table Cell 4 | +Table Cell 5 | +
| Table Cell 1 | +Table Cell 2 | +Table Cell 3 | +Table Cell 4 | +Table Cell 5 | +
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
\ No newline at end of file diff --git a/source/_patterns/00-atoms/09-text/01-inline-elements.mustache b/source/_patterns/00-atoms/09-text/01-inline-elements.mustache new file mode 100644 index 000000000..47aaa8928 --- /dev/null +++ b/source/_patterns/00-atoms/09-text/01-inline-elements.mustache @@ -0,0 +1,41 @@ +Strong is used to indicate strong importance
+ +This text has added emphasis
+ +The b element is stylistically different text from normal text, without any special importance
+ +The i element is text that is set off from the normal text
+ +The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
+ +This text is deleted and This text is inserted
This text has a strikethrough
Superscript®
+ +Subscript for things like H2O
+ +This small text is small for for fine print, etc.
+ +Abbreviation: HTML
+ +Keybord input: Cmd
+ +This text is a short inline quotation
This is a citation + +
The dfn element indicates a definition.
+ +The mark element indicates a highlight
+ +This is what inline code looks like.
This is sample output from a computer program
+ +The variable element, such as x = y
++\ No newline at end of file diff --git a/source/_patterns/00-atoms/09-text/03-time.mustache b/source/_patterns/00-atoms/09-text/03-time.mustache new file mode 100644 index 000000000..26cecc136 --- /dev/null +++ b/source/_patterns/00-atoms/09-text/03-time.mustache @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_patterns/00-atoms/09-text/04-hr.mustache b/source/_patterns/00-atoms/09-text/04-hr.mustache new file mode 100644 index 000000000..1d6667d2e --- /dev/null +++ b/source/_patterns/00-atoms/09-text/04-hr.mustache @@ -0,0 +1 @@ +A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
+