Skip to content

Instantly share code, notes, and snippets.

View edwinwright's full-sized avatar

edwinwright

2 followers · 15 following
View GitHub Profile
@edwinwright
edwinwright / html5-design-patterns-forms.md
Last active August 29, 2015 13:57
Semantic HTML markup for forms

HTML5 Design Patterns - Forms

Basic pattern

This is the most semantic and accessible way to markup a form.

<form>
  <p>Please complete the form below. Mandatory fields marked <em>*</em></p>
  <fieldset>
@edwinwright
edwinwright / html5-design-patterns-main-page.md
Last active August 29, 2015 13:57

HTML5 Design Patterns - Main Page

Basic pattern

<body>
  <header role="banner">
    [...]
  </header>
  <main role="main">
@edwinwright
edwinwright / html5-design-patterns-navigation.md
Last active August 29, 2015 13:57

HTML5 Design Patterns - Navigation

Basic pattern

<nav role="navigation">
  <ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About us</a></li>
 <a href="contact.html">Contact us</a>
@edwinwright
edwinwright / html5-design-patterns-section.md
Last active August 29, 2015 13:57

HTML5 Design Patterns - Sections

<section role="region" aria-labelledby="heading">
  <h1 id="heading">Weather report</h1>
  [...]
</section>
@edwinwright
edwinwright / html5-design-patterns-details.md
Last active August 29, 2015 13:57

HTML5 Design Patterns - Details

<details role="group">
  <summary role="button" aria-expanded="false">Course schedule</summary>
  <table>
    <tr>
      <th>Start date</th>
      <th>End date</th>
 Duration
@edwinwright
edwinwright / html5-design-patterns-figure.md
Last active August 29, 2015 13:57

HTML5 Design Patterns - Figure

<a href="#fig1">Figure 1</a>
[...]
<figure id="fig1" role="group" aria-labelledby="caption">
  <figcaption id="caption">Code example</figcaption>
  <pre>
    [...]
@edwinwright
edwinwright / umd-script-boilerplate.js
Last active August 29, 2015 14:27 — forked from cferdinandi/umd-script-boilerplate.js
A simple boilerplate for UMD JS modules.
(function (root, factory) {
if ( typeof define === 'function' && define.amd ) {
define([], factory(root));
} else if ( typeof exports === 'object' ) {
module.exports = factory(root);
} else {
root.myPlugin = factory(root);
}
})(typeof global !== "undefined" ? global : this.window || this.global, function (root) {
@edwinwright
edwinwright / README.md
Created June 21, 2013 10:05 — forked from necolas/README.md

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name
@edwinwright
edwinwright / gist:6069328
Created July 24, 2013 09:57

Header 1

Header 2

Header 3 ### (Hashes on right are optional)

Header 4

Header 5

Markdown plus h2 with a custom ID ## {#id-goes-here}

Link back to H2

This is a paragraph, which is text surrounded by whitespace. Paragraphs can be on one

@edwinwright
edwinwright / full.html
Last active January 1, 2016 07:19
Templates for social media meta tags.
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">
<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters.">
<!-- Google Authorship and Publisher Markup -->
<link rel="author" href="https://plus.google.com/[Google+_Profile]/posts">
<link rel="publisher" href="https://plus.google.com/[Google+_Page_Profile]">