Created
September 25, 2015 08:46
-
-
Save ethyde/bfc6c44b73614c3e366d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Kitchen sink</title> | |
<style> | |
body { margin: 0 5%; } | |
.colA { width: 45%; float: left; margin-right: 5%; } | |
.colB { width: 45%; float: left; } | |
</style> | |
</head> | |
<body> | |
<div class="colA"> | |
<p> | |
Also, here's another paragraph. An mass system spawned an feedback active theory vector developer extension line. Serial transaction solid limiter solution for line transport logarithmic services design infrared. | |
</p> | |
<h1>Typebase.css Specimen Sheet</h1> | |
<h2>Showing off Typebase.css abilities</h2> | |
<p class="lead"> | |
Typebase.css works best when normalize.css (or another sufficiently modern reset-er type thing) is being used. Host basic text rules are overridden. This is also the leading block. | |
</p> | |
<p> | |
This is a raw paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
</p> | |
<p> | |
Also, here's another paragraph. An mass system spawned an feedback active theory vector developer extension line. Serial transaction solid limiter solution for line transport logarithmic services design infrared. | |
</p> | |
<p> | |
Tation nostrud haero capto. Secundum lobortis aliquam velit autem fatua vel dignissim gilvus nullus letalis. Iaceo appellatio multo appellatio volutpat refero eligo diam velit dolore eros paratus. Nonummy vel ullamcorper. Dignissim molior odio tincidunt esca ne feugiat vel gravis mos. | |
</p> | |
<h1>Heading Level One</h1> | |
<h2>Heading Level Two</h2> | |
<h3>Heading Level Three</h3> | |
<h4>Heading Level Four</h4> | |
<h5>Heading Level Five</h5> | |
<h6>Heading Level Six</h6> | |
<h1>Equal length of text</h1> | |
<h2>Equal length of text</h2> | |
<h3>Equal length of text</h3> | |
<h4>Equal length of text</h4> | |
<h5>Equal length of text</h5> | |
<h6>Equal length of text</h6> | |
<h1>Heading Level One with Paragraph</h1> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h2>Heading Level Two with Paragraph</h2> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h3>Heading Level Three with Paragraph</h3> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h4>Heading Level Four with Paragraph</h4> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h5>Heading Level Five with Paragraph</h5> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h6>Heading Level Six with Paragraph</h6> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h1>Lists</h1> | |
<ul> | |
<li>The first item in a list</li> | |
<li>Hey, it's the second!</li> | |
<li>What have you heard about the third?</li> | |
<li>Well everone has heard that the third is the word</li> | |
</ul> | |
<ol> | |
<li>How many ways can we list?</li> | |
<li>Let us numerate the ways</li> | |
<li>Yarp</li> | |
</ol> | |
<ul> | |
<li>Don't nest me bro</li> | |
<li> | |
Oh ya? | |
<ul> | |
<li>Can you even</li> | |
<li>handle this?</li> | |
</ul> | |
</li> | |
<li>Probably not. Just leave.</li> | |
</ul> | |
<h1>Blockquotes</h1> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
</p> | |
<blockquote> | |
Wow, this quote is so wonderful. I hope cheese quickly zaps a large mule. | |
</blockquote> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
</p> | |
<article> | |
<header> | |
<h1> | |
This is header inside an <code>article</code>. | |
</h1> | |
</header> | |
<p> | |
And a <code>paragraph</code> following the header | |
</p> | |
</article> | |
<section> | |
<header> | |
<h1> | |
This is <code>header</code> inside <code>section</code>. | |
</h1> | |
</header> | |
<p> | |
And a <code>paragraph</code> following the header | |
</p> | |
</section> | |
<table> | |
<tr> | |
<th>Col A</th> | |
<th>Col B</th> | |
<th>Col C</th> | |
</tr> | |
<tr> | |
<td>Row 1 A</td> | |
<td>Row 1 B</td> | |
<td>Row 1 C</td> | |
</tr> | |
<tr> | |
<td>Long text in this row to test wrapping on small screens. </td> | |
<td>Row 1 B</td> | |
<td>Row 1 C</td> | |
</tr> | |
<tr> | |
<td>Tables </td> | |
<td>Row 1 B</td> | |
<td>Row 1 C</td> | |
</tr> | |
<tr> | |
<td>Some text</td> | |
<td>Some more text that is quite longer than the current cells. </td> | |
<td>Row 1 C</td> | |
</tr> | |
</table> | |
<h3>Heading Level Three with Paragraph</h3> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
</div> | |
<div class="colB"> | |
<p> | |
Also, here's another paragraph. An mass system spawned an feedback active theory vector developer extension line. Serial transaction solid limiter solution for line transport logarithmic services design infrared. | |
</p> | |
<article> | |
<header> | |
<h1> | |
This is header inside an <code>article</code>. | |
</h1> | |
</header> | |
<p> | |
And a <code>paragraph</code> following the header | |
</p> | |
</article> | |
<section> | |
<header> | |
<h1> | |
This is <code>header</code> inside <code>section</code>. | |
</h1> | |
</header> | |
<p> | |
And a <code>paragraph</code> following the header | |
</p> | |
</section> | |
<table> | |
<tr> | |
<th>Col A</th> | |
<th>Col B</th> | |
<th>Col C</th> | |
</tr> | |
<tr> | |
<td>Row 1 A</td> | |
<td>Row 1 B</td> | |
<td>Row 1 C</td> | |
</tr> | |
<tr> | |
<td>Long text in this row to test wrapping on small screens. </td> | |
<td>Row 1 B</td> | |
<td>Row 1 C</td> | |
</tr> | |
<tr> | |
<td>Tables </td> | |
<td>Row 1 B</td> | |
<td>Row 1 C</td> | |
</tr> | |
<tr> | |
<td>Some text</td> | |
<td>Some more text that is quite longer than the current cells. </td> | |
<td>Row 1 C</td> | |
</tr> | |
</table> | |
<h3>Heading Level Three with Paragraph</h3> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<p> | |
Also, here's another paragraph. An mass system spawned an feedback active theory vector developer extension line. Serial transaction solid limiter solution for line transport logarithmic services design infrared. | |
</p> | |
<h1>Typebase.css Specimen Sheet</h1> | |
<h2>Showing off Typebase.css abilities</h2> | |
<p class="lead"> | |
Typebase.css works best when normalize.css (or another sufficiently modern reset-er type thing) is being used. Host basic text rules are overridden. This is also the leading block. | |
</p> | |
<p> | |
This is a raw paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
</p> | |
<p> | |
Also, here's another paragraph. An mass system spawned an feedback active theory vector developer extension line. Serial transaction solid limiter solution for line transport logarithmic services design infrared. | |
</p> | |
<p> | |
Tation nostrud haero capto. Secundum lobortis aliquam velit autem fatua vel dignissim gilvus nullus letalis. Iaceo appellatio multo appellatio volutpat refero eligo diam velit dolore eros paratus. Nonummy vel ullamcorper. Dignissim molior odio tincidunt esca ne feugiat vel gravis mos. | |
</p> | |
<h1>Heading Level One</h1> | |
<h2>Heading Level Two</h2> | |
<h3>Heading Level Three</h3> | |
<h4>Heading Level Four</h4> | |
<h5>Heading Level Five</h5> | |
<h6>Heading Level Six</h6> | |
<h1>Equal length of text</h1> | |
<h2>Equal length of text</h2> | |
<h3>Equal length of text</h3> | |
<h4>Equal length of text</h4> | |
<h5>Equal length of text</h5> | |
<h6>Equal length of text</h6> | |
<h1>Heading Level One with Paragraph</h1> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h2>Heading Level Two with Paragraph</h2> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h3>Heading Level Three with Paragraph</h3> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h4>Heading Level Four with Paragraph</h4> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h5>Heading Level Five with Paragraph</h5> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h6>Heading Level Six with Paragraph</h6> | |
<p> | |
Repertoire cruise is the best charity investments dynasty wine diamond. In blissfull using manor. Housekeeping silver saphire brokerage gentlemen travel. Is the best silver salon cocktail upper. Rich tailored is the best using handmade. | |
</p> | |
<h1>Lists</h1> | |
<ul> | |
<li>The first item in a list</li> | |
<li>Hey, it's the second!</li> | |
<li>What have you heard about the third?</li> | |
<li>Well everone has heard that the third is the word</li> | |
</ul> | |
<ol> | |
<li>How many ways can we list?</li> | |
<li>Let us numerate the ways</li> | |
<li>Yarp</li> | |
</ol> | |
<ul> | |
<li>Don't nest me bro</li> | |
<li> | |
Oh ya? | |
<ul> | |
<li>Can you even</li> | |
<li>handle this?</li> | |
</ul> | |
</li> | |
<li>Probably not. Just leave.</li> | |
</ul> | |
<h1>Blockquotes</h1> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
</p> | |
<blockquote> | |
Wow, this quote is so wonderful. I hope cheese quickly zaps a large mule. | |
</blockquote> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
</p> | |
</div> | |
<br clear="all" /> | |
<script> | |
// Baseliner helps debug. | |
// From http://keyes.ie/things/baseliner/ | |
(function(){ | |
var _grid_height=33; // This is the space between "baselines". | |
if(window.baseliner){baseliner.toggle();}else{var _already_loaded=document.getElementById('baseliner-script');if(_already_loaded){return;};var _baseliner=document.createElement('script');_baseliner.id='baseliner-script';_baseliner.type='text/javascript';_baseliner.src='http://files.keyes.ie/things/baseliner/baseliner-latest.min.js';document.getElementsByTagName('body')[0].appendChild(_baseliner);var loadFunction=function(evt){if(window.baseliner){return;};baseliner=new Baseliner(_grid_height);baseliner.toggle();};_baseliner.onreadystatechange=loadFunction;_baseliner.onload=loadFunction;};})(); | |
</script> | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment