HTML and CSS Reference
In-Depth Information
the future. You can use any hierarchical naming convention other than that
related to casinos and playing cards.
NOTE:
This is simply a naming convention that I have adopted to
make it easier for me and other developers to understand the structure
of my applications. This also makes it semantically clear when writing
CSS and JavaScript to hook into the functionality of the mobile web
application. You can use any IDs or classes you wish, or you can
follow suite and use mine. Just make sure that they are meaningful.
You will notice that the CSS doesn't link to
mobile.scss
. This is because the
SCSS file will need to be compiled and converted to CSS by SASS. Once the
compilation is complete, the
mobile.css
file will appear. Open the
mobile.scss
file and press Shift + CMD + R and then press 1. This will compile the SASS file
into a CSS file. (SASS will be covered in Chapter 5.)
It's time to create the header for the application. The code shown in Listing 4-12
should be added just inside the
<div id="shoe">
element but just before the
<div id="deck">
element.
Listing 4-12.
Header Code
<header id="taskbar">
<h1 class="branding">Mo Memo</h1>
<form method="post">
<input type="text" name="query" placeholder="enter your movie
name…" />
<input type="submit" value="ADD" />
</form>
</header>
This will simply create a title and form for the user to search, as shown in Figure
4-7. Using CSS, this will be placed at the top of the screen.
