Hour 14 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Hour 14 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Listing 14.1

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="rwd code 14.4.css" rel="stylesheet">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
    <nav>
    	<ul>
        	<li>Home</li>
           <li>Products</li>
           <li>Services</li>
           <li>Support</li>
       </ul>
    </nav>
    <article>
      <h3>What is a Dandelion?</h3>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
  </body>
</html>

Listing 14.2

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC:900)
screen and (min-width: 500px);


h1, h2, h3 { font-family: 'Playfair Display SC', serif; }

Listing 14.3

/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC:900)
screen and (min-width: 500px);

* { font-size: 100%; }

h1, h2, h3 { font-family: 'Playfair Display SC', serif; }

h1 { font-size: 2.5em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.2em; }

Listing 14.4

/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC:900)
screen and (min-device-width: 400px);
/* styles for all browser widths */
* { font-size: 100%; }

h1, h2, h3 { font-family: 'Playfair Display SC', serif; }

h1 { font-size: 2.2em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.3em; }
p, ul, ol, dl { font-size: 1em; }

/* styles for smartphones and tablets */
@media screen and (min-device-width: 400px) {
	h1 { font-size: 3em; }
	h2 { font-size: 2em; }
	h3 { font-size: 1.5em; }
}

Listing 14.5

/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC:900)
screen and (min-width: 400px);
/* styles for all browser widths */
/* very basic reset */
* { font-size: 100%; }
*, *:before, *:after { 
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body { margin: 0 0.2em; }
h1, h2, h3 { font-family: 'Playfair Display SC', serif; line-height: 1.2; }

h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.3em; }
p, ul, ol, dl { font-size: 1em; line-height: 1.275; }

/* nav bar */
nav {
  width: 100%;
  margin: auto;  
}
nav ul {
  list-style: none;
  overflow: hidden;
  background: #000;
}
nav li a {
  display: block;
  float: left;
  width: 14.28%; 
  padding: 10px;
  background: #000;
  border-right: 1px solid #fff;
  color: #fbd91f;  
  font: 400 13px/1.4 bitstream_vera_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
/* small text */
nav small {
  color: #aaa;  
  font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
  text-transform: none;
}

/* default to smallest browser size */ 
nav ul { display: none; }
nav select { display: inline-block; margin: 0.5em 0; }

/* styles for smartphones and tablets */
@media screen and (min-width: 400px) {
	h1 { font-size: 3em; }
	h2 { font-size: 2em; }
	h3 { font-size: 1.5em; }
}
/* change to full nav for larger screens */ 
@media screen and (min-width: 481px) {
  nav ul { display: block; }
  nav select { display: none; }
}

Listing 14.5 HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Dandylions</title>
    <link href="rwd code 14.5.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
<nav>
    <ul id="navigation">
        <li><a href="#">Home<br> 
        <small>Where Dandelions roam free</small></a></li>
        <li><a href="#">Products<br> 
        <small>These flowers will grow on you</small></a></li>
        <li><a href="#">Services<br> 
        <small>We care for the flowers you have</small></a></li>
        <li><a href="#">Support<br> 
        <small>We love to help with dandelions</small></a></li>
        <li><a href="#">About<br> 
        <small>Why we love dandelions so much</small></a></li>
        <li><a href="#">Reading<br> 
        <small>Read more about this wondrous plant</small></a></li> 
        <li><a href="#">Contact<br> 
        <small>Ask us about your dandelion needs</small></a></li>
    </ul>
    <select id="mobileNav">
    	<option value="">Go to...</option>
    	<option value="/home">Home</option>
       <option value="/products">Products</option>
       <option value="/services">Services</option>
       <option value="/support">Support</option>
       <option value="/about">About</option>
       <option value="/articles">Reading</option>
       <option value="/contact">Contact</option>
    </select>
</nav>    <article>
      <h3>What is a Dandelion?</h3>
      <p><span class="pronounce"><strong><em>Taraxacum</em></strong>
      <em>/təˈræksəkʉm/</em></span> is a large genus of flowering plants in the
      family Asteraceae. They are native to Eurasia and North and South America,
      and two species, T. officinale and T. erythrospermum, are found as weeds
      worldwide. Both species are edible in their entirety. The common name
      <span class="pronounce"><strong>dandelion</strong>
      <em>/ˈdændɨlaɪ.ən/</em></span> (dan-di-ly-ən, from French dent-de-lion,
      meaning "lion's tooth") is given to members of the genus, and like other
      members of the Asteraceae family, they have very small flowers collected
      together into a composite flower head. Each single flower in a head is
      called a floret. Many <em>Taraxacum</em> species produce seeds asexually
      by apomixis, where the seeds are produced without pollination, resulting
      in offspring that are genetically identical to the parent plant.</p>
    </article>
    <aside>
      <img src="images/dandy.jpg" width="400" height="300" alt=""/>
    </aside>
    <footer>
      <p>Text from 
      <a href="http://en.wikipedia.org/wiki/Dandelion">Wikipedia</a></p>
    </footer>
    </div>
	<script>
    $(function() {
        $("nav select").change(function() {
            window.location = $(this).find("option:selected").val();
        });
    });
    </script>
  </body>
</html>

Listing 14.6

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Relative Font Sizes</title>
<style>
* { font-size: 100%; }
body { font-size: 1.5rem; }
article { font-size: 1.3rem; }
div { font-size: 1.2rem; }
p { font-size: 1.1rem; }
</style>
</head>

<body>
body text
<article>
article text
	<div>
    div text
    	<p>paragraph text</p>
    </div>
</article>
</body>
</html>

Listing 14.7

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Relative Font Sizes Using Rems</title>
<style>
* { font-size: 100%; }
body { font-size: 1.5rem; }
article { font-size: 1.3rem; }
div { font-size: 1.2rem; }
p { font-size: 1.1rem; }
</style>
</head>

<body>
body text
<article>
article text
	<div>
    div text
    	<p>paragraph text</p>
    </div>
</article>
</body>
</html>

Leave a Reply

Your email address will not be published.