Permalink
Browse files

tests page for a visual view of boilerplate normalization.

  • Loading branch information...
shichuan authored and paulirish committed Sep 8, 2010
1 parent 6af1777 commit e10e662a48f51486ca10e56180e21be832aa47d9
Showing with 410 additions and 35 deletions.
  1. +1 −5 css/style.css
  2. +11 −30 demo/elements.html
  3. +85 −0 demo/hack.css
  4. +32 −0 demo/hack2.css
  5. +281 −0 demo/tests.html
View
@@ -64,9 +64,6 @@ hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em
input, select { vertical-align:middle; }
-/* remove default outline in Firefox */
-* {outline:none;}
-
/* END RESET CSS */
@@ -281,5 +278,4 @@ button { width: auto; overflow: visible; }
/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
j.mp/textsizeadjust
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
-}
-
+}
View
@@ -31,9 +31,7 @@
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
<script src="../js/modernizr-1.5.min.js"></script>
- <style>
- .wrapper {width:200px; border:1px solid red;}
- </style>
+
</head>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
@@ -46,12 +44,10 @@
<div id="container">
<header>
- <h1>Vertical Scroll Bar</h1>
- <hr />
- <a href="#" id="scrollbar">click here</a> to see how we always force a scrollbar in non-IE.<br /><br /><br />
+
</header>
- <div id="main" style="display:block;">
+ <div id="main">
<!-- demo content lovingly lifted from the azbuka project
http://code.google.com/p/azbuka/
@@ -62,21 +58,9 @@ <h1>Vertical Scroll Bar</h1>
and peter beverloo
http://peter.sh/examples/?/html/meter-progress.html
-->
- <h1>Pre Wrapping</h1>
- <hr />
- with wrapping:<br /><br />
- <div class="wrapper">
- <pre>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre>
- </div><br />
- without wrapping:<br /><br />
- <div class="wrapper">
- aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
- </div><br /><br />
-
- <h1>Image Text Replacement</h1>
- <hr />
- <div class="ir" style="background:url('../apple-touch-icon.png'); width:57px; height:57px;">Apple Touch Icon</div>
- <br /><br />
+
+
+
<h1>Title 01 Heading</h1>
<hr />
<h3>Level 03 Heading</h3>
@@ -379,8 +363,8 @@ <h3>What is Lorem Ipsum?</h3>
<div><label for="f3">Checkbox input:</label><input type="checkbox" id="f3" /></div>
<div><label for="f4">Select field:</label><select id="f4"><option>Option 01</option><option>Option 02</option></select></div>
- <div><label for="f5">Textarea:</label><textarea id="f5" cols="30" rows="5" >Textarea text</textarea> Prevent default scrollbar in IE </div>
- <div><label for="f6">Input Button:</label> <input type="button" id="f6" value="button text" /> Show hand cursor</div>
+ <div><label for="f5">Textarea:</label><textarea id="f5" cols="30" rows="5" >Textarea text</textarea></div>
+ <div><label for="f6">Input Button:</label> <input type="button" id="f6" value="button text" /></div>
<div><label for="f7">Submit Button:</label> <input type="submit" id="f7" value="button text" /></div>
@@ -513,6 +497,7 @@ <h3>&lt;meter&gt;</h3>
<img src="internet_explorer.png" alt="IE is so awesome" />
</div>
<footer>
+
</footer>
</div> <!--! end of #container -->
@@ -522,12 +507,8 @@ <h3>&lt;meter&gt;</h3>
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="../js/jquery-1.4.2.min.js"><\/script>')</script>
- <script>
- $('#scrollbar').click(function() {
- $('#main').toggle();
- return false;
- });
- </script>
+
+
<script src="../js/plugins.js?v=1"></script>
<script src="../js/script.js?v=1"></script>
View
@@ -0,0 +1,85 @@
+/*
+ style.css contains a reset, font normalization and some base styles.
+
+ credit is left where credit is due.
+ additionally, much inspiration was taken from these projects:
+ yui.yahooapis.com/2.8.1/build/base/base.css
+ camendesign.com/design/
+ praegnanz.de/weblog/htmlcssjs-kickstart
+*/
+
+/*
+ html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
+ v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
+ html5doctor.com/html-5-reset-stylesheet/
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+ margin:0;
+ padding:0;
+ border:0;
+ outline:0;
+ font-size:100%;
+ vertical-align:baseline;
+ background:transparent;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display:block;
+}
+
+nav ul { list-style:none; }
+
+blockquote, q { quotes:none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after { content:''; content:none; }
+
+a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
+
+ins { background-color:#ff9; color:#000; text-decoration:none; }
+
+mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
+
+del { text-decoration: line-through; }
+
+abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
+
+/* tables still need cellspacing="0" in the markup */
+table { border-collapse:collapse; border-spacing:0; }
+
+hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
+
+input, select { vertical-align:middle; }
+/* END RESET CSS */
+
+
+/* fonts.css from the YUI Library: developer.yahoo.com/yui/
+ Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
+
+ There are three custom edits:
+ * remove arial, helvetica from explicit font stack
+ * we normalize monospace styles ourselves
+ * table font-size is reset in the HTML5 reset above so there is no need to repeat
+*/
+body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
+
+select, input, textarea, button { font:99% sans-serif; }
+
+/* normalize monospace sizing
+ * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
+ */
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
View
@@ -0,0 +1,32 @@
+body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
+ body, select, input, textarea {
+ /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
+ color: #444;
+ /* set your base font here, to apply evenly
+ /* font-family: Georgia, serif; */
+ }
+
+ /* Headers (h1,h2,etc) have no default font-size or margin,
+ you'll want to define those yourself. */
+ h1,h2,h3,h4,h5,h6 { font-weight: bold; }
+
+ select, input, textarea, button { font:99% sans-serif; }
+
+ /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
+ a:hover, a:active { outline: none; }
+
+ a, a:active, a:visited { color: #607890; }
+ a:hover { color: #036; }
+ .wrapper {width:200px; border:1px solid red;}
+
+ dl {margin:0 auto; width:900px;}
+ dt {background-color:#ccc; margin-bottom:20px; cursor:pointer; cursor:hand; padding:5px; font-weight:bold; }
+ dd {display:none; margin-bottom:30px;}
+
+#clear-demo {width:500px; border:1px solid black;}
+#clear-demo-l {width:200px; border:1px solid black; float:left;}
+#clear-demo-r {width:200px; border:1px solid black; float:right;}
+#clear-demo-b {width:200px; border:1px solid black;}
+
+header {text-align:center;}
+.show, .hide {color: #607890; cursor:pointer; cursor:hand;}
Oops, something went wrong.

0 comments on commit e10e662

Please sign in to comment.