The new code we're going to add will result in the following core experience that we will fold in all sorts of CSS3 features in the next chapter:
The first bits of the following code will be the conditional styles we mentioned earlier, as well as declaring the new HTML5 document type:
<!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head>
Now, we declare the character set for the page and also tell IE to use the latest version of its rendering engine available. Furthermore, we give our page a brief meta description as shown in the following code snippet:
<meta charset="utf-8"> <!-- Force IE to use the latest version of its rendering engine --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Getting Started with Modernizr</title> <meta name="description" content="A Modernizr test page.">
Linking to the stylesheet and Modernizr library, as well as making a call to include Google web fonts in the document, is shown in the following code snippet:
<link href='http://fonts.googleapis.com/css?family=Fredoka+One|Squada+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<!-- Modernizr will be included in the head of the page. We'll need it do do some light lifting before the DOM tree renders load feature detection and shimming -->
<script src="modernizr-2.5.3.js"></script>
</head>
<body>
<header>
<!--- The page navigation -->
<div id="navbar">
<div id="logo"></div>
<div id="nav">
<nav>
<a href="#frame-1">1</a>
<a href="#frame-2">2</a>
<a href="#frame-3">3</a>
<a href="#frame-4">4</a>
<a href="#frame-5">5</a>
</nav>
</div>
</div>
</div>
</header>
<div id="main" role="main">Now we set up a series of frames beginning of course with frame one, and increasing until five frames are reached. Each frame will hold a new series of features, often building off of the previous frame's contents. For the first frame, a title and subtitle are what we will begin with. The other frames will be elaborated on a bit later in the book. For now, the focus is on getting a structure into place. Beyond the frames, there is the footer and a call out to include the jQuery library on the page as well as a call out to custom script.js page where the heavy lifting for JavaScript will occur as shown in the following code snippet:
<div id="frame-1" class="frame">
<hgroup>
<h1 class"title">Modernizr</h1>
<h2 class="subtitle">The Feature detection library.</h2>
</hgroup>
</div>
<div id="frame-2" class="frame ">Section Two</div>
<div id="frame-3" class="frame">Section Three</div>
<div id="frame-4" class="frame ">Section Four</div>
<div id="frame-5" class="frame">Section Five</div>
</div>
<footer>
<div class="foot">Footer</div>
</footer>
<!-- JavaScript at the bottom for fast page loading →
<!-- jQuery via Google CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>This naturally wouldn't be complete without the CSS paint, so here's that as well. This first part handles the basic styles for all of our header tags. Nothing too complex, yet beyond the custom Google font. The HTML is as follows:
/* Zero out page margins and pad the top of the page to compensate for the header */
body{
padding-top: 50px;
margin: 0;
background: #eee;
}
/* Header Elements */
h1, h2{
display: block;
margin: 0 auto;
text-align: center;
}
/* A title for the first section as well as styling with the Google web fonts */
h1{
font-family: 'Fredoka One', cursive;
padding-top: 10%;
font-size: 4em;
color: #D91E76;
}
/* Style the subtitle as well, also using a google web font */
h2{
font-family: 'Squada One', cursive;
color: #333;
}Next we style the navigational elements. The navigational elements consist of the navigation bar, logo, and anchor elements. We will also add in a hover state style for the section links using the following code snippet:
/* Navigation */
#navbar{
width: 100%;
height: 50px;
text-align: center;
position: fixed;
top: 0;
padding: 0;
background: url( images/stripe-header.png ) 0 0 #333;
border-bottom: solid 1px white;
z-index: 10;
}
/* The logo png, in the next chapter we'll enhance this and make it entirely css based */
#navbar #logo{
position: absolute;
width: 70px;
height: 110px;
background: url( images/logo.png );
top: -5px;
left: 10%;
}
/* Apply some very basic styling to the anchor tags in the navigation */
#nav a{
margin: 0 5px;
line-height: 3em;
color: white;
font-size: 3em;
text-decoration: none;
font-family: 'Fredoka One', cursive;
background: url( images/link-tabs.png ) no-repeat 0px 0 transparent;
display: inline-block;
height: 138px;
width: 75px;
text-align: center;
}
/* Hover states for the nav links. */
#nav a:hover{
color: black;
background-position: -75px 0;
}Last, we style the main page frame that wraps the sections of the page. We also give each frame a general styling including the height and the bottom footer a black background using the following code snippet:
/* Decorative border for the top element */
#main{
border-top: solid 2px #333;
}
/* General styles for all the sections, i.e. frames */
#main .frame{
height: 700px;
position: relative;
border-bottom: dotted 5px #fff;
/* Image fallback, to be replaced by CSS3 hotness in chapter 3 */
background: url( images/grey-stripe.png );
}
/* Footer , basic black for now*/
.foot{
background: black;
height: 50px;
border-top: solid 5px #333;
}The JavaScript will remain the same for now. Let's sum up the fresh code. The majority of work has been done in paint, which is what I call the CSS, but there are some new things in the HTML.