Static Site to Ember rc1 Step 1

Just a simple page that loads content using javascript.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<header>
    
    <h1>Our New Shop</h1><!-- this text would be static, so we can leave it -->
    
    <nav><!--The nav items should be dynamic, as things may be added or removed -->
        <ul>
            <li id="home">Home</li>
            <li id="monitors">Monitors</li>
            <li id="ram">RAM</li>
            <li id="hdd">HDD</li>
        </ul>
    </nav>
</header>

<section id="page_body">    
    <section id="cart"><!-- The cart will be it's own view -->
        <h1>Cart</h1>
        <ul>
            <li>Item 1</li><!-- Cart items will absolutely need to be dynamic -->
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </section>
    <div id="page_content"><!-- Page content will also need to be dynamic -->
        <h1 id="page_title">Home Page</h1>
        <article id="content">This is the home page</article>
    </div>
    
</section>
<footer>
    Copywrong blah blah blah<!-- We'll seporate the footer too -->
</footer>

CSS

* :not(article) :not(ul) :not(header) :not(nav){
    border-radius:4px;
    background-color: rgba(237, 237, 237, .35);
    border:solid 1px gray;
}
html, body {
    height:100%;
}
header h1 {
    font-weight:bold;
    font-size:3em;
    text-align:center;
}
nav ul {
    list-style-type:none;
}

nav ul li {
    list-style-type:none;
    display:inline-block;
    height: 25px;
    line-height:25px;
    border-right: solid 1px black;
    padding-left: 5px;
    padding-right:5px;
    text-align:center;
    width: 75px;
}
#page_body {
    position:relative;
    padding:2px;
    margin-bottom:25px;
    border:solid 1px black;
    width: 500px;
    /*min-height:100%;*/
    margin-left:auto;
    margin-right:auto;
}
#page_body:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#page_title {
    text-align:center;
    text-decoration:underline;
    font-weight:bold;
    font-size:2em;
}
#cart {
    float:right;
    clear:right;
    border:solid 1px black;
    width: 98px;
    min-height: 100px;
}
#page_content {
    float:left;
    clear:left;
    width: 398px;
}
footer {
    clear: both;
    border:solid 1px black;
    width: 100%;
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    line-height:25px;
    background-color:gray;
}

JavaScript

//There are only 2 things this script does:
//define data, and create the click events

// We have an object of "page" data as might be returned from the server
var page_data = {
    home:{
        title:"Home Page",
        content:"This is the Home Page."
    },
    monitors:{
        title:"Monitors",
        content:"We could list monitors here."
    },
    ram:{
        title:"RAM",
        content:"RAM!"
    },
    hdd:{
        title:"Hard Drives",
        content:"High Density Content."
    }
};

// For each nav button we set an on click to set the title and content of the page 
$('#home').click(function(){
    $("#page_title").html(page_data.home.title);
    $("#content").html(page_data.home.content);
});
$('#monitors').click(function(){
    $("#page_title").html(page_data.monitors.title);
    $("#content").html(page_data.monitors.content);
})
$('#ram').click(function(){
    $("#page_title").html(page_data.ram.title);
    $("#content").html(page_data.ram.content);
})

$('#hdd').click(function(){
    $("#page_title").html(page_data.hdd.title);
    $("#content").html(page_data.hdd.content);
})