Baseline Grid Project

00-Baseline Grid Project

Use these snippets of code to complete the baseline grid project

01-CSS Reset.css

/********** Reset CSS Script **********/

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/********* End RESET **********/

02-Body rule.css

body {
    font-family: Cambria, Georgia, "Times New Roman", Times, serif;
    background:fff;
    color:#333;
}

03-Content Rule.css

#content {
    width:940px;
    padding:0 10px;
    min-height:500px;
    margin:auto;
    background:url(images/grid-01.png) center top repeat-y;
}

04-Header Rules.css

h1, h2, h3, p {
    margin-bottom: 24px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

05-Expanded Header Rules.css

h1 {
    font-size: 2em; /* 32px --> 32 · 16 = 2 */
    line-height: .75em; /* 24px --> 24 · 32 = 0.75 */
}

h2 {
    font-size: 1.5em; /* 24px --> 24 · 16 = 1.5 */
    line-height: 1em; /* 24px --> 24 · 24 = 1 */
}

h3 {
    font-size: 1.375em; /* 22px --> 22 · 16 = 1.375 */
    line-height: 1.0909em; /* 24px --> 24 · 22 = 1.0909 */
}

h4 {
    font-size: 1.25em; /* 20px --> 20 · 16 = 1.25 */
    line-height: 1.2em; /* 24px --> 24 · 20 = 1.2 */
}

h5 {
    font-size: 1.125em; /* 18px --> 18 · 16 = 1.125 */
    line-height: 1.333em; /* 24px --> 24 · 18 = 1.333 */
}

h6 {
    font-size: 1em; /* 16px --> 16 · 16 = 1 */
    line-height: 1.5em; /* 24px --> 24 · 16 = 1.5 */
}

06-Page Content.html

<h1>All About Llamas</h1>

<p>The llama (Lama glama) is a South American camelid, widely used as a meat and pack animal by Andean cultures since pre-Hispanic times.</p>

<p>The height of a full-grown, full-size llama is 1.7 to 1.8 m (5.5 to 6.0 ft) tall at the top of the head, and can weigh between 130 to 200 kilograms (280 to 450 lb). At birth, a baby llama (called a cria) can weigh between 9 and 14 kilograms (20 and 30 lb). Llamas can live for a period of about 20–30 years depending on how well they are taken care of.[citation needed] Llamas are very social animals and live with other llamas as a herd. The wool produced by a llama is very soft and lanolin-free. Llamas are intelligent and can learn simple tasks after a few repetitions. When using a pack, llamas can carry about 25% to 30% of their body weight for several miles.</p>

<h2>Classification</h2>

<p>Although early writers compared llamas to sheep, their similarity to the camel was soon recognized. They were included in the genus Camelus along with alpaca in the Systema Naturae (1758) of Linnaeus. They were, however, separated by Cuvier in 1800 under the name of llama along with the guanaco. Alpacas and vicu±as are in genus Vicugna. The genera Lama and Vicugna are, with the two species of true camels, the sole existing representatives of a very distinct section of the Artiodactyla or even-toed ungulates, called Tylopoda, or "bump-footed", from the peculiar bumps on the soles of their feet. The Tylopoda consists of a single family, the Camelidae, and shares the order Artiodactyla with the Suina (pigs), the Tragulina (chevrotains), the Pecora (ruminants), and the Cetancodonta (hippos and cetaceans, which belong to Artiodactyla from a cladistic, if not traditional, standpoint). The Tylopoda have more or less affinity to each of the sister taxa, standing in some respects in a middle position between them, sharing some characteristics from each, but in others showing special modifications not found in any of the other taxa.</p>

07 - Additional Content.css

.column > p:first-of-type {
    font-size: 1.125em;
    line-height: 1.333em;
}

<img src="images/llama.jpg" alt="llama" class="photoright">

.photoright {
    float:right;
    margin: 0 0 0 16px;
}

08-Additional Content.html

<h4>Vertebrae:</h4>
<ul>
<li>cervical 7,</li>
<li>dorsal 12,</li>
<li>lumbar 7,</li>
<li>sacral 4,</li>
<li>caudal 15 to 20.</li>
</ul>

<h2>Reproduction</h2>

<p>Llamas have an unusual reproductive cycle for a large animal. Female llamas are induced ovulators. Through the act of mating, the female releases an egg and is often fertilized on the first attempt. Female llamas do not go into estrus (&ldquo;heat&rdquo;).</p>

<p>Like humans, llama males and females mature sexually at different rates. Females reach puberty at approximately 12 months old; males do not become sexually mature until approximately three years of age.</p>

09-JavaScript for Hyphenating

<script type="text/javascript" src="Hyphenator.js"></script>
<script type="text/javascript">
Hyphenator.run();
</script>

10-First Paragraph Rule.css

p+p {
    text-indent: 1em;
    margin-top: -24px;
}

11-Additional Content.html

<div class="column hyphenate">
<h3>Mating</h3>

<p>Llamas mate with the female in a kush (lying down) position, which is fairly unusual in a large animal. They mate for an extended period of time (20–45 minutes), also unusual in a large animal.</p>

<h3>Gestation</h3>

<p>The gestation period of a llama is 11½ months (350 days). Dams (female llamas) do not lick off their babies, as they have an attached tongue which does not reach outside of the mouth more than half an inch (1.3 cm). Rather, they will nuzzle and hum to their newborns.</p>

<h2>Pregnancy</h2>

<p>Llamas should be tested for pregnancy after breeding at two to three, six and at least 12 weeks.</p>
<p>For &ldquo;spit&rdquo; testing, bring the potentially pregnant dam to an intact male. If the stud attempts to mate with her and she lies down for him within a fairly short period of time, she is not pregnant. If she remains on her feet, spits, attacks him, or otherwise prevents his being able to mate, it is assumed she is probably pregnant. This test gets its name due to the dam spitting at the male if she <br>
is pregnant.</p>

<p>For progesterone testing, a veterinarian can test a blood sample for progesterone. A high level can indicate a pregnancy.</p>

<p>With palpation, the veterinarian or breeder manually feels inside the llama to detect a pregnancy. There are some risks to the llama, but it can be an accurate method for pregnancy detection.</p>

<p>Ultrasound is the most accurate method for an experienced veterinarian, who can do an exterior examination and detect a fetus as early as 45 days.</p>

<blockquote>
<h4>The Lama</h4>

<q>The one-l lama,<br>
He's a priest;<br>
The two-l llama,<br>
He's a beast.<br>
And I will bet<br>
A silk pajama<br>
There isn't any<br>
Three-l lllama.</q>
<footer>Ogden Nash</footer>
</blockquote>

</div><!-- end column -->

12-Auto Clearing.css

article:after,aside:after,div:after,form:after,header:after,nav:after,section:after,ul:after{clear:both;content:".";display:block;height:0;visibility:hidden;}

13-Blockquote Styles.css

blockquote {
    margin-left:60px;
}

blockquote q {
    display:block;
    text-indent:-0.4em;
}

blockquote q:before {
    content: "\201C";
}

blockquote q:after {
    content: "\201D";
}

blockquote footer:before {
    content: "\2014";
}

blockquote footer {
    font-style:italic;
}