Toshio's Teriyaki Style Guide

Naming

The title tag naming convention follows this format: "page title | Toshio's Teriyaki | Seattle, WA"

Code

The PHP includes files are header.php, footer.php, and titles.php
to create a new page just make a new php file and include the header.php and footer.php files. Your content goes in between your PHP includes.
The titles.php file controls the page title where it checks if the current page is equal to file name then it echos the page title.
EXAMPLE:
$name = "| Toshio's Teriyaki | Seattle, WA";
$japan = 'Japanese Restaurant ';
$page = '';
if(basename($_SERVER['PHP_SELF']) =='index.php') {
$page = 'Japanese Food ' . $name;
}

jQuery

The gallery page uses jQuery for the click event to generate the large image view.
If you want to add more images just add a new li tag with a nested img tag but make sure you add the alt value because the jQuery code gets that value and writes it to the page.
EXAMPLE:
li img src="images/beef-teriyaki.jpg" alt="beef teriyaki"

Layout

Toshio's Teriyaki uses the 960 grid with 10px padding all around. Each column is 60px and there is a 20px gutter between each columns.
To see the column layout of each template please click on the links below:

• Home Page
• About Page
• Restaurant Page
• Reviews Page
• Menu Page
• Gallery Page
• Services Page
• Location Page

Back to top of page

Typography

font-size: 100%;
line-height: 150%;
font-family: Arial, Helvetica, sans-serif;
color: #000;

Back to top of page

Navigation

.nav-wrapper { overflow: hidden; background: #000; }
nav { max-width: 960px; padding: 10px; margin: auto; }
nav ul { overflow: hidden; padding: 0px; }
nav ul li { width: 140px; float: left; margin-right: 20px; }
nav li:hover .submenu { display: block; }
nav ul li a { font-size: 1.5em; display: block; color: #fff; }
nav ul li a:hover, nav ul li a:focus { color: #c30215; }

/*----SUBMENU------*/
.submenu { position: absolute; background: #fff; border: 1px solid #000; z-index: 1000000; padding: 10px; display: none; list-style-type: none; }
.submenu li { float: none; }
.submenu a { color: #000; display: block; }
Back to top of page

HTML Elements

h1 { font-size: 2em; margin-bottom: 10px; }
h2 { font-size: 1.5em; margin-bottom: 10px; }
h3 { font-size: 1.125em; margin-bottom: 10px; }
p, ul, address { margin-bottom: 10px; }
ul, ol { padding: 0em 2em; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
a { color: #c30215; font-weight: bold; text-decoration: none; }
a img { border: 3px solid #c30215; }
a img:hover { border: 3px solid #f7941d; }
a:hover, a:focus { color: #f7941d; }
img, embed, object, video, iframe { max-width: 100%; }
blockquote { font-style: italic; padding: 1.5em; }
Back to top of page

Media

Image size on home page:

Menu image & map image link width: 300px;

Image size on about, restaurant, reviews, menu, and location page:

width: 460px;

Image size on gallery page:

icons width: 58px;
main view image width: 460px;

Back to top of page