|
| 1 | +<!doctype html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <title>CSS Chassis - Typography</title> |
| 6 | + <meta name="description" content="Typography skeleton for styling"> |
| 7 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 8 | + <link rel="stylesheet" href="../dist/css/chassis.css"> |
| 9 | + <link rel="stylesheet" href="demos.css"> |
| 10 | + <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet"> |
| 11 | +</head> |
| 12 | +<body> |
| 13 | + |
| 14 | +<h1>CSS Chassis</h1> |
| 15 | + |
| 16 | +<hr> |
| 17 | + |
| 18 | +<h1>Heading 1 <h1></h1> |
| 19 | +<h2>Heading 2 <h2></h2> |
| 20 | +<h3>Heading 3 <h3></h3> |
| 21 | +<h4>Heading 4 <h4></h4> |
| 22 | +<h5>Heading 5 <h5></h5> |
| 23 | +<h6>Heading 6 <h6></h6> |
| 24 | + |
| 25 | +<hr> |
| 26 | + |
| 27 | +<h1>Heading 1 <h1></h1> |
| 28 | +<p>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p> |
| 29 | + |
| 30 | +<h2>Heading 2 <h2></h2> |
| 31 | +<p>It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn"t feel like a giant. I felt very, very small.</p> |
| 32 | + |
| 33 | +<h3>Heading 3 <h3></h3> |
| 34 | +<p>The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space.</p> |
| 35 | + |
| 36 | +<h4>Heading 4 <h4></h4> |
| 37 | +<p>To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more?</p> |
| 38 | + |
| 39 | +<h5>Heading 5 <h5></h5> |
| 40 | +<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p> |
| 41 | + |
| 42 | +<h6>Heading 6 <h6></h6> |
| 43 | +<p>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p> |
| 44 | + |
| 45 | +<hr> |
| 46 | + |
| 47 | +<h2>Block-level elements</h2> |
| 48 | + |
| 49 | +<p>Here"s a paragraph <p> filled with some <a href="http://spaceipsum.com/">Space Ipsum</a>. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman"s earth, if free men make it, will be truly round: a globe in practice, not in theory.</p> |
| 50 | + |
| 51 | +<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p> |
| 52 | + |
| 53 | +<div>Here"s a div <div>. A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That"s how I felt seeing the Earth for the first time. I could not help but love and cherish her |
| 54 | +</div> |
| 55 | + |
| 56 | +<article> |
| 57 | + <h3>This is an article <article> with a paragraph</h3> |
| 58 | + <p>We want to explore. We’re curious people. Look back over history, people have put their lives at stake to go out and explore … We believe in what we’re doing. Now it’s time to go.</p> |
| 59 | + <p>End of the article.</p> |
| 60 | +</article> |
| 61 | + |
| 62 | +<blockquote>Let"s light this fire one more time, Mike, and witness this great nation at its best. <blockquote> via <a href="http://spaceipsum.com/">Space Ipsum</a></blockquote> |
| 63 | + |
| 64 | +<p>We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.</p> |
| 65 | + |
| 66 | +<pre> |
| 67 | +* { |
| 68 | + font-family: "Comic Sans MS", "Comic Sans", "Marker Felt" !important; |
| 69 | +} |
| 70 | +<pre> |
| 71 | +</pre> |
| 72 | + |
| 73 | +<p>Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.</p> |
| 74 | + |
| 75 | +<address> |
| 76 | + <strong>Sherlock Holmes</strong><br> |
| 77 | + 221B Baker Street<br> |
| 78 | + London, United Kingdom <address> |
| 79 | +</address> |
| 80 | + |
| 81 | +<hr> |
| 82 | + |
| 83 | +<h2>Lists <li></h2> |
| 84 | +<p>The regret on our side is, they used to say years ago, we are reading about you in science class. Now they say, we are reading about you in history class.</p> |
| 85 | + |
| 86 | +<ul> |
| 87 | + <li>Unordered list <ul></li> |
| 88 | + <li>List element</li> |
| 89 | + <li>Across the sea of space, the stars are other suns.</li> |
| 90 | + <li>Science cuts two ways, of course; its products can be used for both good and evil. But there"s no turning back from science. The early warnings about technological dangers also come from science.</li> |
| 91 | +</ul> |
| 92 | + |
| 93 | +<p>It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn"t feel like a giant. I felt very, very small.</p> |
| 94 | + |
| 95 | +<ol> |
| 96 | + <li>Ordered list <ol></li> |
| 97 | + <li>List element</li> |
| 98 | + <li>The dreams of yesterday are the hopes of today and the reality of tomorrow.</li> |
| 99 | + <li>Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.</li> |
| 100 | +</ol> |
| 101 | + |
| 102 | +<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p> |
| 103 | + |
| 104 | +<dl> |
| 105 | + <dt>Definition term <dt></dt> |
| 106 | + <dd>Definition <dd></dd> |
| 107 | + <dt>Earth</dt> |
| 108 | + <dd>A kick-ass planet.</dd> |
| 109 | + <dt>Pluto</dt> |
| 110 | + <dd>A kick-ass former planet.</dd> |
| 111 | + <dt>Space Ipsum</dt> |
| 112 | + <dd>NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.</dd> |
| 113 | +</dl> |
| 114 | + |
| 115 | +<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p> |
| 116 | + |
| 117 | +<hr> |
| 118 | + |
| 119 | +<h2>Text-level elements</h2> |
| 120 | + |
| 121 | +<ul> |
| 122 | + <li><a href="#">anchor link</a> <a></li> |
| 123 | + <li>abbreviation: <abbr title="Syntactically Awesome Stylesheets">SASS</abbr> <abbr></li> |
| 124 | + <li>citation: <cite>A Study in Scarlet</cite> <cite></li> |
| 125 | + <li>Here"s the <code><code></code> element</li> |
| 126 | + <li>deleted text: <del>Episodes I, II, III</del> <del></li> |
| 127 | + <li>definition: The <dfn>definition element</dfn> is the element being defined inline. <dfn></li> |
| 128 | + <li><em>emphasis</em> <em></li> |
| 129 | + <li><ins>inserted text</ins> <ins></li> |
| 130 | + <li>keyboard input: <kbd>control + space</kbd> <kbd></li> |
| 131 | + <li><mark>mark element</mark> <mark></li> |
| 132 | + <li>meter: <meter min="200" max="500" value="423">awesomeness</meter> <meter></li> |
| 133 | + <li>progress: <progress value="90" max="100">70 %</progress> <progress></li> |
| 134 | + <li>quotation (short): <q>You just gotta believe!</q> <q></li> |
| 135 | + <li>quotation within a quotation (short): <q>Yo dawg, I heard you like quotes so I put <q>this quote</q> within this quote.</q> <q></li> |
| 136 | + <li>strikethough: <s>Lance Armstrong remains steroid-free.</s> <s></li> |
| 137 | + <li>sample text: <samp>Error</samp> <samp></li> |
| 138 | + <li>small: <small>Hydrogen</small> <small></li> |
| 139 | + <li>small within small: <small>Hydrogen <small>Hydrogen</small></small> <small></li> |
| 140 | + <li>strong: <strong>The Hammer</strong> <strong></li> |
| 141 | + <li>subscript: <sub>Lower</sub> 0<sub>1<sub>2<sub>3</sub></sub></sub> <sub></li> |
| 142 | + <li>superscript: I need a good <sup>superman</sup> joke to go here. 0<sup>1<sup>2<sup>3</sup></sup></sup> <sup></li> |
| 143 | + <li>time: <time datetime="1985-12-09 19:00">Dec 9</time> <time></li> |
| 144 | + <li>underline: Never underline <u>anything</u>. <u></li> |
| 145 | + <li>variable: <var>cat</var> + <var>dog</var> = <var>catdog</var> <var></li> |
| 146 | +</ul> |
| 147 | +<hr> |
| 148 | + |
| 149 | +</body> |
| 150 | +</html> |
0 commit comments