/
test-page.html
195 lines (173 loc) · 14.5 KB
/
test-page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>BaCSS · A Base Stylesheet For Your Project</title>
<!-- All you need to use BaCSS in your project is the following line -->
<script src="http://github.com/sambowler/bacss/raw/master/latest.min.js"></script>
<!-- -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function() {
$('#test-content').hide();
$('#show-test-content').click(function() { $('#test-content').slideToggle(); return false; });
});
</script>
</head>
<body>
<header>
<h1><a href="test-page.html">BaCSS</a></h1>
<nav>
<ul>
<li><a href="#">This</a></li>
<li><a href="#">Is</a></li>
<li><a href="#">The</a></li>
<li><a href="#">Top</a></li>
<li><a href="#">Navigation</a></li>
</ul>
</nav>
</header>
<div id="main">
<h2>Huh, what?!</h2>
<p>BaCSS (pronounced “base”) is a stylesheet that is just that, a base set of styling for anything you’re building. It will add basic styling to anything and everything. “Why?” You may ask. Because nobody wants to show clients default browser styling. <strong>This page is using it.</strong></p>
<p class="success"><a href="http://github.com/downloads/sambowler/bacss/bacss-0.1.zip">Download it here.</a></p>
<h2>Jus' like 'at</h2>
<h3>If you need IE support</h3>
<p>You can include the JavaScript version of BaCSS. This will pull in the latest CSS as well as <a href="http://code.google.com/p/ie7-js/">ie7-js</a> which is required for CSS3 selector support.</p>
<pre><script src="http://github.com/sambowler/bacss/raw/master/latest.js"></script></pre>
<h3>If IE support is no biggy</h3>
<p>Just include the CSS or download to customise to your needs (you can <a href="mailto:sam@sambowler.com">drop me an email</a> if there's something that you feel should be included and other people would benefit from).</p>
<pre><link rel="stylesheet" href="http://github.com/sambowler/bacss/raw/master/latest.css" media="screen"></pre>
<h2><a id="show-test-content" href="#test-content">Take A Look At It In Action →</a></h2>
<section id="test-content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="error">Houston, we have a problem (a paragraph with the class “error”).</p>
<p class="success">Houston, we fixed it (a paragraph with the class “success”).</p>
<h1>Inline elements (this is a h1)</h1>
<p>Pellentesque <abbr title="Unabbreviated">abbreviation</abbr> tristique <b>bold text</b> et netus et <strong>strong text</strong> ac turpis egestas. <em>emphasised text</em> qua, Sit amet, ante. <i>italic text</i> sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Sub and sup: <sup>1</sup>/<sub>4</sub> amet est et ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<hr />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<h2>Blockquote (this is a h2)</h2>
<blockquote>
<p>“No, Mr. Bond. I expect you to die”</p>
</blockquote>
<h3>Button (this is a h3)</h3>
<p>Here’s <button>a button</button>.</p>
<h4>Unordered list (this is a h4)</h4>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
<li>Morbi in <code>some code</code> sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ul>
<p><cite>A citation.</cite></p>
<h5>Ordered list (this is a h5)</h5>
<ol>
<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
</ol>
<h6>Definition list (this is a h6)</h6>
<dl>
<dt>Defining</dt>
<dd>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</dd>
<dt>Various</dt>
<dd>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</dd>
<dt>Things</dt>
<dd>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</dd>
</dl>
<h2>Form</h2>
<form action="" method="POST">
<fieldset>
<legend>Fieldset & legend</legend>
<p><label for="text">Text input</label> <input type="text" name="text" id="text" value="Default value"></p>
<p><label for="text2">Text input with placeholder</label> <input type="text" name="text2" id="text2" placeholder="Placeholder value"></p>
<p>
<label for="select">Select</label>
<select id="select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</p>
<p>
<label for="select2">Multiple select</label>
<select id="select2" size="2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
</select>
</p>
<p><label for="textarea">Textarea</label> <textarea id="textarea" cols="50" rows="10">A textarea</textarea></p>
<p><label for="checkbox">Checkboxes & radio buttons</label><input type="checkbox" id="checkbox" /><input type="radio" id="radio" /></p>
<p><input type="submit" value="A submit button"></p>
</fieldset>
</form>
<h2>Images (floated left by default)</h2>
<a href="http://www.flickr.com/photos/yjv/4952742057/in/pool-26241990@N00/#"><img src="images/le_valais_by_yago1com.jpg" alt="Le Valais - By yago1.com on Flickr" /></a>
<p><cite><a href="http://www.flickr.com/photos/yjv/4952742057/in/pool-26241990@N00/#">Le Valais by yago1.com on Flickr</a></cite></p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<img class="right" src="images/swiss_alps_by_yago1com.jpg" alt="Swiss Alps - By yago1.com on Flickr" />
<p><cite><a href="http://www.flickr.com/photos/yjv/4952169992/in/pool-26241990@N00/">Swiss Alps by yago1.com on Flickr.</a></cite></p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<h2>Pre And Code</h2>
<pre>
# This is code in a pre tag</pre>
<p>There are also the following related elements:</p>
<ul>
<li><code><code></code></li>
<li><samp><samp></samp></li>
<li><kbd><kbd></kbd></li>
<li><var><var></var></li>
</ul>
</section><!-- end #test-content -->
</div><!-- end #main -->
<aside id="sidebar">
<h3>Hello From The Sidebar!</h3>
<ul>
<li><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="aninnovativeweb">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
<li><script type="text/javascript">(function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })();</script><a class="DiggThisButton DiggCompact"></a></li>
<li style="margin-top: 7px"><script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script></li>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, <a href="#">tempor sit amet</a>, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</aside><!-- end #sidebar -->
<footer>
<nav>
<ul>
<li><a href="#">An</a></li>
<li><a href="#">Unordered</a></li>
<li><a href="#">List</a></li>
<li><a href="#">In</a></li>
<li><a href="#">The</a></li>
<li><a href="#">Footer</a></li>
<li><a href="#">With</a></li>
<li><a href="#">Lots</a></li>
<li><a href="#">Of</a></li>
<li><a href="#">Links</a></li>
</ul>
</nav>
<p>BaCSS is a project by <a href="http://sambowler.com">Sam Bowler</a>. You can find the source on <a href="http://github.com/sambowler/bacss">Github</a>. I'd love to hear any and all feedback you have—catch me on <a href="http://twitter.com/aninnovativeweb">Twitter</a>.</p>
</footer>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6873982-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>