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

Listing 11.1 CSS

@charset "UTF-8";

/* styles for all browsers */

/* here you would put your browser resets and any styles 
   you want to be on every version of the site
   Things like: colors, fonts, etc. */


/* you would then put in the styles specific to the smallest
   devices you will support. */
body {
	color: blue;
	font-family: "Handwriting - Dakota", "Lucida Calligraphy Italic", Papyrus;
}

/* First breakpoint browsers between 480 and 800px */
@media only screen and (min-width:480px) and (max-width:800px){
	/* put only styles specific to these browsers in here */ 
	body { color: red; }
}

/* Second breakpoint browsers bigger than 800px */
@media screen and (min-width:801px){
	/* put only styles specific to the largest browsers in here */
	body { color: green; }
}

Listing 11.1 HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Listing 11.1</title>
<style type="text/css">
body { 
  color: blue; 
  font-family: "Handwriting - Dakota", "Lucida Calligraphy Italic", Papyrus;
}
@media all and (min-width:480px) and (max-width:800px){
  body { color: red; }
}
@media screen and (min-width:801px){
  body { color: green; }
}
</style>
</head>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id purus nec 
eros semper luctus. Proin nisl lectus, ullamcorper ultrices leo in, tristique 
rutrum risus. Morbi congue diam tempor lorem semper, congue tempor turpis 
pretium. Nunc eget dui ut lorem auctor ornare. Vivamus lectus purus, vehicula eu 
velit eu, iaculis ultrices dui. Aliquam consectetur risus non ligula blandit, et 
gravida lectus bibendum. Etiam laoreet luctus nibh. Nulla sit amet lorem quis 
arcu accumsan mollis.</p>

</body>
</html>

Listing 11.2 CSS

@charset "UTF-8";

body { font-size: 62.5%; }
@font-face {
    font-family: 'bitstream_vera_serifbold';
    src: url('fonts/bitstreamveraserif_bold_macroman/VeraSerif-Bold-webfont.eot');
    src: url('fonts/bitstreamveraserif_bold_macroman/VeraSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitstreamveraserif_bold_macroman/VeraSerif-Bold-webfont.woff') format('woff'),
         url('fonts/bitstreamveraserif_bold_macroman/VeraSerif-Bold-webfont.ttf') format('truetype'),
         url('fonts/bitstreamveraserif_bold_macroman/VeraSerif-Bold-webfont.svg#bitstream_vera_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* resets 
   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###########################*/

/* standard colors */ 
body { background-color: #fff; color: #000; }
h1, h2, nav, nav a { color: #fbd91f;  /* yellow */ }
h3, h4, h5 { color #000; }

/* standard fonts */ 
h1, h2, h3, nav, nav a {
	font-family: bitstream_vera_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
}
h1 {
	text-shadow:2px 3px 3px #000000;
	-webkit-text-stroke: 1px black;
	margin-bottom: 0.5em;
}
h2 {
	text-shadow: 2px 2px 0 rgba(0,0,0,.5);
	margin-bottom: 0.5em;
}

/* backgrounds */ 
header {
	width: 100%;
	padding: 0.5em 0 3em 0.25em;	
	background-image: url(images/dandy-header-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0% 100%;
}

/* ######## mobile specific styles #################### */
/* headlines */
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }

/* navigation bar */
nav { width: 100%; background-color: #000; }
nav ul { padding-top: 0.15em; padding-bottom: 0.15em; }
nav ul li { margin: 0 0 0.5em 0.2em; }

/* article */
article { width: 100%; padding: 0.25em; }
article img { width: 100%; height: auto; }

/* aside */ 
aside { width: 100%; }
aside img { width: 100%; height: auto; }

/* ######## medium sized devices ######## */
@media only screen and (min-width: 481px) and (max-width: 800px) {

}

/* ######## large sized devices ######## */
@media only screen and (min-width: 801px) {

}

Listing 11.2 HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dandylions</title>
	<link href="rwd code 11.2.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <div id="main">
    <header>
    <h1>Dandylions</h1>
    <h2>Not Your Mother's Weed</h2>
    </header>
    <nav>
    	<ul>
        <li><a>Home</a></li>
        <li><a>Products</a></li>
        <li><a>Services</a></li>
        <li><a>Support</a></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 11.3

/* ######## mobile specific styles ######## */
/* headlines */
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }

/* navigation bar */
nav { width: 100%; background-color: #000; }
nav ul { padding-top: 0.15em; padding-bottom: 0.15em; }
nav ul li { margin: 0 0 0.5em 0.2em; }

/* article */
article { width: 100%; padding: 0.25em; }
article img { width: 100%; height: auto; }

/* aside */ 
aside { width: 100%; }
aside img { width: 100%; height: auto; }

Listing 11.4

/* ######## medium sized devices ######## */
@media only screen and (min-width: 481px) and (max-width: 800px) {

}

/* ######## large sized devices ######## */
@media only screen and (min-width: 801px) {

}

Listing 11.5

@charset "UTF-8";
/* ###### styles for all devices ###### */

/* ###### styles for devices <300px wide ###### */

/* ###### styles for devices 301-500px wide ###### */
@media screen and (min-width:301px) and (max-width:500px) { }

/* ###### styles for devices 501-1200px wide ###### */
@media screen and (min-width:501px) and (max-width:1200px) { }

/* ###### styles for devices >1201px wide ###### */
@media screen and (min-width:1201px) { }

Leave a Reply

Your email address will not be published.