HTML and CSS Reference
In-Depth Information
Marking this up in HTML is quite simple. First, create a folder in the root of your
project called
application
. Within that folder, create three more called
css
,
img
,
and
js
. The
css
folder will store your CSS/SASS,
img
will store all of your images
and sprites, and
js
will store all of your library and application JavaScript.
You will also need to create two folders called
lib
and
app
within
js
, a file in the
js/app/
folder called
bootstrap.js
, and a file in the
css
folder called
mobile.scss
.
Create a new file called
index.html
within the
application
folder; the code in
Listing 4-11 will help to bootstrap the application.
Listing 4-11.
Initial Bootstrap HTML
<!DOCTYPE html>
<html lang="en-GB" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi;"/>
<title>Mo Memo</title>
<link rel="stylesheet" type="text/css" href="css/mobile.css" />
<link rel="apple-touch-icon-precomposed" href="img/home-screen-icon.png">
</head>
<body>
<div id="shoe">
<div id="deck">
</div>
</div>
<!-- This script will instantiate any JavaScript necessary -->
<script src="js/app/bootstrap.js"></script>
</body>
</html>
As you can see, there is a
div
that surrounds the deck called
shoe
. This will help
to contain the global elements that appear on every page, such as the top
taskbar, and it will hold multiple decks should the application need to expand in
