Update CSS to incorporate latest work from normalize.css, use equivalent of 16px font-size default, set ::selection highlight to behave like default OS X text selection. Update demo to include more tests and more obvious clearfix test.

necolas · necolas · commit b1e640cc8e73 · 2011-08-13T02:46:12.000+01:00
diff --git a/css/default.css b/css/default.css
@@ -1,4 +1,4 @@
-/* LE BOILERPLATE, Nicolas Gallagher 2011-07-15T17:39 UTC · http://github.com/necolas/le-boilerplate */
+/* 2011-08-13T01:25 UTC · http://github.com/necolas/le-boilerplate */
 
 /* 
  * ALL MEDIA
@@ -7,62 +7,62 @@
  * PRINT
  */
 
-/* ============================================================================================================= ALL */
 
-/*
- * Styles affecting all viewport widths and print (keep linear and fluid)
- */
+/* ============================================================================ HTML5 ELEMENT DISPLAY */
 
-/* ============================================================================= HTML5 ELEMENT DISPLAY */
-
-header, 
-section, 
-article, 
-aside, 
+article,
+aside,
+details,
+figcaption,
+figure,
 footer,
-nav, 
-menu, 
-hgroup, 
-figure, 
-figcaption, 
-details, 
-summary {
+header,
+hgroup,
+nav,
+section {
     display: block;
 }
 
-audio[controls],
+audio,
 canvas,
 video {
     display: inline-block;
     *display: inline;
     *zoom: 1;
 }
 
+audio:not([controls]) {
+    display: none;
+}
+
+[hidden] {
+    display: none;
+}
+
 
-/* ============================================================================= BASE */
+/* ============================================================================ BASE */
 
 /*
  * 1. Prevent text resizing oddly in IE6/7 when body font-size is set using em units
  * 2. Keep page centred in all browsers regardless of content height
- * 3. Remove Android and iOS tap highlight color; prevent entire container being highlighted
- * 4. Remove iOS text size adjust without disabling user zoom
+ * 3. Remove iOS text size adjust without disabling user zoom
  */
 
 html {
     font-size: 100%; /* 1 */
     overflow-y: scroll; /* 2 */
-    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 3 */
-    -webkit-text-size-adjust: 100%; /* 4 */
-    -ms-text-size-adjust: 100%; /* 4 */
+    -webkit-text-size-adjust: 100%; /* 3 */
+    -ms-text-size-adjust: 100%; /* 3 */
 }
 
 /*
- * N.B.  Add a max-width to body/container as a fallback in certain desktop environments
+ * N.B. Add a max-width to body/container as a fallback in desktop environments with
+ * no Media Query support or polyfill
  */
 
 body {
     margin: 0;
-    font-size: 0.875em; /* 14px */
+    font-size: 1em; /* 16px */
     line-height: 1.4;
     background: #fff;
 }
@@ -78,22 +78,21 @@ textarea {
 
 /*
  * Remove selection highlight text-shadow to ensure readability is not compromised
+ * Set selection highlight background to match OSX default
  */
 
 ::-moz-selection { 
     text-shadow: none;
-    color: #fff; 
-    background: #ff5e99;
+    background: #b3d4fc;
 }
 
 ::selection { 
     text-shadow: none;
-    color: #fff; 
-    background: #ff5e99;
+    background: #b3d4fc;
 }
 
 
-/* ============================================================================= LINKS */
+/* ============================================================================ LINKS */
 
 a, 
 a:visited { 
@@ -122,7 +121,7 @@ a:active {
 }
 
 
-/* ============================================================================= TYPOGRAPHY */
+/* ============================================================================ TYPOGRAPHY */
 
 h1 {}
 h2 {}
@@ -139,7 +138,7 @@ dl {
     margin: 1.4em 0;
 }
 
-/* ............................................................................. Lists */
+/* ............................................................................ Lists */
 
 ul, 
 ol { 
@@ -164,7 +163,7 @@ nav li {
     margin: 0; 
 }
 
-/* ............................................................................. Inline */
+/* ............................................................................ Inline */
 
 abbr[title] {
     border-bottom: 1px dotted;
@@ -219,8 +218,8 @@ pre,
 code, 
 kbd, 
 samp { 
-    font-family: monospace, monospace; 
-    _font-family: 'Courier New', monospace;
+    font-family: monospace, serif; 
+    _font-family: 'Courier New', serif;
     font-size: 1em;
 }
 
@@ -239,7 +238,6 @@ small {
 
 /*
  * Prevent sub and sup affecting line-height in all browsers
- * gist.github.com/413930
  */
 
 sup, 
@@ -259,12 +257,11 @@ sub {
 }
 
 
-/* ============================================================================= EMBEDDED CONTENT */
+/* ============================================================================ EMBEDDED CONTENT */
 
 /*
  * 1. Remove border when inside 'a' element in IE6/7/8/9
  * 2. Improve image quality when scaled in IE7
- *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
  */
 
 img {
@@ -281,7 +278,14 @@ svg:not(:root) {
 }
 
 
-/* ============================================================================= FORMS */
+/* ============================================================================ FORMS */
+
+figure {
+    margin: 0;
+}
+
+
+/* ============================================================================ FORMS */
 
 form {
     margin: 0;
@@ -300,26 +304,28 @@ legend {
 
 /*
  * 1. Remove extra inner space from 'input' and 'button' in IE6/7
- * 2. Remove margins from form elements
- * 3. Make font-size equal to ancestor's
- * 4. Have all browsers use the same line-height.
- * 5. Remove :focus outline offset in WebKit 
- * 6. Standardise vertical-align
+ * 2. Make font-size equal to ancestor's
+ * 3. Have all browsers use the same line-height.
+ * 4. Standardise vertical-align
  */
 
 button,
 input,
 select,
 textarea {
     overflow: visible;  /* 1 */
-    margin: 0; /* 2 */
-    font-size: 100%; /* 3 */
-    line-height: normal; /* 4 */
-    outline-offset: 0; /* 5 */
-    vertical-align: baseline; /* 6 */
+    margin: 0;
+    font-size: 100%; /* 2 */
+    line-height: normal; /* 3 */
+    vertical-align: baseline; /* 4 */
     *vertical-align: middle;
 }
 
+table button,
+table input {
+    *overflow: auto;
+}
+
 /*
  * 1. Display hand cursor for submission elements
  * 2. Fix inability to style clickable 'input' types in iOS
@@ -340,18 +346,21 @@ input[type="submit"] {
 input[type="checkbox"],
 input[type="radio"] {
     box-sizing: border-box;
+    padding: 0;
 }
 
 /*
- * 1. Fix ability to fully style search inputs in WebKit browsers
+ * 1. Fix inability to fully style search inputs in WebKit browsers
  * 2. Fix box sizing set to border-box in S5, Chrome
+ * 3. Set outline offset to match other textfields
  */
 
 input[type="search"] {
     -webkit-appearance: textfield; /* 1 */
     -moz-box-sizing: content-box;
     -webkit-box-sizing: content-box; /* 2 */
     box-sizing: content-box;
+    outline-offset: -2px; /* 3 */
 }
 
 /*
@@ -385,7 +394,7 @@ textarea {
 }
 
 
-/* ============================================================================= TABLES */
+/* ============================================================================ TABLES */
 
 /* 
  * Remove most spacing between table cells
@@ -406,13 +415,12 @@ td {
 }
 
 
-/* ============================================================================= HELPER CLASSES */
+/* ============================================================================ HELPER CLASSES */
 
-/* ............................................................................. Clearfix */
+/* ............................................................................ Clearfix */
 
 /*
  * Clear an element's floated children using generated content
- * nicolasgallagher.com/micro-clearfix-hack/
  */
 
 .cf { 
@@ -429,7 +437,7 @@ td {
     clear: both; 
 }
 
-/* ............................................................................. Hidden */
+/* ............................................................................ Hidden */
 
 /*
  * Hide visually and for screenreaders
@@ -441,7 +449,7 @@ td {
 }
 
 
-/* ============================================================================= COMPONENTS */
+/* ============================================================================ COMPONENTS */
 
 
 
@@ -452,12 +460,12 @@ td {
 
 
 
-/* ============================================================================================================= SCREEN (480+) */
+/* ========================================================================================================== SCREEN (480+) */
 
 @media screen and (min-width: 480px) {
 
 /*
- * Screen-only style adjustmenets for viewport widths 480px to 780px
+ * Screen-only style adjustmenets for viewport widths 480px to 768px
  */
 
 
@@ -467,7 +475,7 @@ td {
 
 
 
-/* ============================================================================================================= SCREEN (768+) */
+/* ========================================================================================================== SCREEN (768+) */
 
 @media screen and (min-width: 768px) {
 
@@ -482,7 +490,7 @@ td {
 
 
 
-/* ============================================================================================================= PRINT */
+/* ========================================================================================================== PRINT */
 
 @media print {
 
diff --git a/demo.html b/demo.html
@@ -12,7 +12,7 @@
 
     <div>
         
-        <header>
+         <header>
             <hgroup>
                 <h1>Grouped Heading 1</h1>
                 <h2>Grouped Heading 2</h2>
@@ -32,6 +32,8 @@ <h3>Heading 3</h3>
         <h4>Heading 4</h4>
         <h5>Heading 5</h5>
         <h6>Heading 6</h6>
+
+        <p hidden>This should be hidden in all browsers, apart from IE6</p>
         
         <section>
             <h1>Section Heading 1</h1>            
@@ -47,12 +49,12 @@ <h1>Text-level semantics</h1>
 
         <p>
         The <a href="#">a element</a> example<br>
-        The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> example<br>
+        The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples<br>
         The <b>b element</b> example<br>
         The <cite>cite element</cite> example<br>
         The <code>code element</code> example<br>
         The <del>del element</del> example<br>
-        The <dfn>dfn element</dfn> example<br>
+        The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br>
         The <em>em element</em> example<br>
         The <i>i element</i> example<br>
         The img element <img src="http://placekitten.com/16/16" alt=""> example<br>
@@ -309,7 +311,7 @@ <h1>Forms</h1>
             </fieldset>
         </form>
 
-        <div class="cf" style="margin-top:20px; background:#ddd;">
+        <div class="cf" style="margin-top:20px; background:yellow;">
             <h3>clearfix test</h3>
             <div style="float:left; width:48%; height:100px; margin:0 1% 0 20px; background:#ccc;">float</div>
             <div style="height:50px; background:#aaa;">non-float</div>
@@ -320,8 +322,5 @@ <h3>clearfix test</h3>
     <!-- jQuery CDN and fallback -->
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
     <script>window.jQuery || document.write('<script src="/js/libs/jquery-1.6.2.min.js">\x3C/script>')</script>
-    <!-- scripts concatenated and minified via ant build script-->
-    <script src="/js/helpers.js"></script>
-    <!-- end scripts-->
 </body>
 </html>
