Skip to content

Commit e10e662

Browse files
chuanxshipaulirish
chuanxshi
authored and
paulirish
committed
tests page for a visual view of boilerplate normalization.
1 parent 6af1777 commit e10e662

File tree

5 files changed

+410
-35
lines changed

5 files changed

+410
-35
lines changed

‎css/style.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,6 @@ hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em
6464

6565
input, select { vertical-align:middle; }
6666

67-
/* remove default outline in Firefox */
68-
* {outline:none;}
69-
7067
/* END RESET CSS */
7168

7269

@@ -281,5 +278,4 @@ button { width: auto; overflow: visible; }
281278
/* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
282279
j.mp/textsizeadjust
283280
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
284-
}
285-
281+
}

‎demo/elements.html‎

Lines changed: 11 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,7 @@
3131

3232
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
3333
<script src="../js/modernizr-1.5.min.js"></script>
34-
<style>
35-
.wrapper {width:200px; border:1px solid red;}
36-
</style>
34+
3735
</head>
3836

3937
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
@@ -46,12 +44,10 @@
4644

4745
<div id="container">
4846
<header>
49-
<h1>Vertical Scroll Bar</h1>
50-
<hr />
51-
<a href="#" id="scrollbar">click here</a> to see how we always force a scrollbar in non-IE.<br /><br /><br />
47+
5248
</header>
5349

54-
<div id="main" style="display:block;">
50+
<div id="main">
5551

5652
<!-- demo content lovingly lifted from the azbuka project
5753
http://code.google.com/p/azbuka/
@@ -62,21 +58,9 @@ <h1>Vertical Scroll Bar</h1>
6258
and peter beverloo
6359
http://peter.sh/examples/?/html/meter-progress.html
6460
-->
65-
<h1>Pre Wrapping</h1>
66-
<hr />
67-
with wrapping:<br /><br />
68-
<div class="wrapper">
69-
<pre>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre>
70-
</div><br />
71-
without wrapping:<br /><br />
72-
<div class="wrapper">
73-
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
74-
</div><br /><br />
75-
76-
<h1>Image Text Replacement</h1>
77-
<hr />
78-
<div class="ir" style="background:url('../apple-touch-icon.png'); width:57px; height:57px;">Apple Touch Icon</div>
79-
<br /><br />
61+
62+
63+
8064
<h1>Title 01 Heading</h1>
8165
<hr />
8266
<h3>Level 03 Heading</h3>
@@ -379,8 +363,8 @@ <h3>What is Lorem Ipsum?</h3>
379363
<div><label for="f3">Checkbox input:</label><input type="checkbox" id="f3" /></div>
380364
<div><label for="f4">Select field:</label><select id="f4"><option>Option 01</option><option>Option 02</option></select></div>
381365

382-
<div><label for="f5">Textarea:</label><textarea id="f5" cols="30" rows="5" >Textarea text</textarea> Prevent default scrollbar in IE </div>
383-
<div><label for="f6">Input Button:</label> <input type="button" id="f6" value="button text" /> Show hand cursor</div>
366+
<div><label for="f5">Textarea:</label><textarea id="f5" cols="30" rows="5" >Textarea text</textarea></div>
367+
<div><label for="f6">Input Button:</label> <input type="button" id="f6" value="button text" /></div>
384368

385369
<div><label for="f7">Submit Button:</label> <input type="submit" id="f7" value="button text" /></div>
386370

@@ -513,6 +497,7 @@ <h3>&lt;meter&gt;</h3>
513497
<img src="internet_explorer.png" alt="IE is so awesome" />
514498
</div>
515499
<footer>
500+
516501
</footer>
517502
</div> <!--! end of #container -->
518503

@@ -522,12 +507,8 @@ <h3>&lt;meter&gt;</h3>
522507
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
523508
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
524509
<script>!window.jQuery && document.write('<script src="../js/jquery-1.4.2.min.js"><\/script>')</script>
525-
<script>
526-
$('#scrollbar').click(function() {
527-
$('#main').toggle();
528-
return false;
529-
});
530-
</script>
510+
511+
531512
<script src="../js/plugins.js?v=1"></script>
532513
<script src="../js/script.js?v=1"></script>
533514

‎demo/hack.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/*
2+
style.css contains a reset, font normalization and some base styles.
3+
4+
credit is left where credit is due.
5+
additionally, much inspiration was taken from these projects:
6+
yui.yahooapis.com/2.8.1/build/base/base.css
7+
camendesign.com/design/
8+
praegnanz.de/weblog/htmlcssjs-kickstart
9+
*/
10+
11+
/*
12+
html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
13+
v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
14+
html5doctor.com/html-5-reset-stylesheet/
15+
*/
16+
17+
html, body, div, span, object, iframe,
18+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
19+
abbr, address, cite, code,
20+
del, dfn, em, img, ins, kbd, q, samp,
21+
small, strong, sub, sup, var,
22+
b, i,
23+
dl, dt, dd, ol, ul, li,
24+
fieldset, form, label, legend,
25+
table, caption, tbody, tfoot, thead, tr, th, td,
26+
article, aside, canvas, details, figcaption, figure,
27+
footer, header, hgroup, menu, nav, section, summary,
28+
time, mark, audio, video {
29+
margin:0;
30+
padding:0;
31+
border:0;
32+
outline:0;
33+
font-size:100%;
34+
vertical-align:baseline;
35+
background:transparent;
36+
}
37+
38+
article, aside, details, figcaption, figure,
39+
footer, header, hgroup, menu, nav, section {
40+
display:block;
41+
}
42+
43+
nav ul { list-style:none; }
44+
45+
blockquote, q { quotes:none; }
46+
47+
blockquote:before, blockquote:after,
48+
q:before, q:after { content:''; content:none; }
49+
50+
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
51+
52+
ins { background-color:#ff9; color:#000; text-decoration:none; }
53+
54+
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
55+
56+
del { text-decoration: line-through; }
57+
58+
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
59+
60+
/* tables still need cellspacing="0" in the markup */
61+
table { border-collapse:collapse; border-spacing:0; }
62+
63+
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
64+
65+
input, select { vertical-align:middle; }
66+
/* END RESET CSS */
67+
68+
69+
/* fonts.css from the YUI Library: developer.yahoo.com/yui/
70+
Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
71+
72+
There are three custom edits:
73+
* remove arial, helvetica from explicit font stack
74+
* we normalize monospace styles ourselves
75+
* table font-size is reset in the HTML5 reset above so there is no need to repeat
76+
*/
77+
body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
78+
79+
select, input, textarea, button { font:99% sans-serif; }
80+
81+
/* normalize monospace sizing
82+
* en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
83+
*/
84+
pre, code, kbd, samp { font-family: monospace, sans-serif; }
85+

‎demo/hack2.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
2+
body, select, input, textarea {
3+
/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
4+
color: #444;
5+
/* set your base font here, to apply evenly
6+
/* font-family: Georgia, serif; */
7+
}
8+
9+
/* Headers (h1,h2,etc) have no default font-size or margin,
10+
you'll want to define those yourself. */
11+
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
12+
13+
select, input, textarea, button { font:99% sans-serif; }
14+
15+
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
16+
a:hover, a:active { outline: none; }
17+
18+
a, a:active, a:visited { color: #607890; }
19+
a:hover { color: #036; }
20+
.wrapper {width:200px; border:1px solid red;}
21+
22+
dl {margin:0 auto; width:900px;}
23+
dt {background-color:#ccc; margin-bottom:20px; cursor:pointer; cursor:hand; padding:5px; font-weight:bold; }
24+
dd {display:none; margin-bottom:30px;}
25+
26+
#clear-demo {width:500px; border:1px solid black;}
27+
#clear-demo-l {width:200px; border:1px solid black; float:left;}
28+
#clear-demo-r {width:200px; border:1px solid black; float:right;}
29+
#clear-demo-b {width:200px; border:1px solid black;}
30+
31+
header {text-align:center;}
32+
.show, .hide {color: #607890; cursor:pointer; cursor:hand;}

0 commit comments

Comments
 (0)