HTML Structure
This template is based on 960 grid system (fluid version). Main template parts are "The header" and "The content".
Here is the HTML structure for a single page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
HEAD SCRIPTS AND STYLES
</head>
<body>
<section id="layout">
<div class="logo_profile container_12">
<div class="grid_6 logo_img">
<img src="images/logo.png" alt="Logo" />
</div>
<div class="grid_6 profile_meta">
PROFILE META
</div>
</div>
<div class="clear"></div>
</div>
<section id="top">
<section id="top_bar">
<section id="main_menu">
MAIN MENU
<div class="clear"></div>
</section><!-- End of #main_menu -->
</section><!-- End of #top_bar -->
<div class="clear"></div>
<section class="top_in">
<section id="second_top_bar">
QUICK TASK ICONS MENU
</section><!-- End of #second_top_bar -->
</section><!-- End of .top_in -->
</section><!-- End of #top -->
<section id="container" class="container_12">
MAIN CONTENT
</section><!-- End of #container -->
</section><!-- End of #layout -->
<div class="clear"></div>
<section id="footer_bar">
FOOTER CONTENT
</section>
OTHER SCRIPTS AND STYLES
</body>
</html>
What's that?
OK. The code above can look a bit strange, so, let me explain every element.
I think you know what must be included between <head></head>
, so, I will not stay here to explain. I will start directly at <body>. Anyway, I will explain for every plugin/script/element if require or not some code to be included between <head> tags.
We have "top part", "middle part", and "bottom part". These parts include:
- top part: logo, current user meta, main menu and quick tast icons.
- middle part: all content.
- bottom part: currently only a copyright notice. You can add everything you want here (for ex.: another menu.)
NOTE:
- "top part" and "middle part" are included into a section* whith class "layout"
- "bottom part" come after this section
* you can use div tag instead of section. Section tag is specific for HTML5.
Top part
"Top part" consists of two main elements:
Logo and user profile meta
<div class="logo_profile container_12">
<div class="grid_6 logo_img">
<img src="images/logo.png" alt="Logo" />
</div>
<div class="grid_6 profile_meta">
PROFILE META
</div>
</div>
<div class="clear"></div>
</div>Main menu and quick task icons
These two elements must be included into a section(or div) with ID "top"
<section id="top"> <!-- Here will be the menu and quick task icons --> </section>
Main menu structure:
<section id="top_bar"> <section id="main_menu"> MAIN MENU <div class="clear"></div> </section><!-- End of #main_menu --> </section><!-- End of #top_bar --> <div class="clear"></div>
The menu is based on SuperFish script.
- http://users.tpg.com.au/j_birch/plugins/superfish/ - Superfish plugin official website
It require to include these lines in template <head>
<script type="text/javascript" src="js/global_plugins_scripts.js"></script> <script type="text/javascript" src="js/head_scripts.js"></script>
global_plugins_scripts.js - contain the plugin script and other required scripts.
head_scripts.js - contain a piece of code which initialize the menu. Below is shown how this code look:
/*
---------------------------------
Main Menu
---------------------------------
*/
$(document).ready(function(){
$("ul.sf-menu").supersubs({
minWidth: 15, // minimum width of sub-menus in em units
maxWidth: 20, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish({
delay: 0, //delay on mouseout, in miliseconds (1 sec = 1000 miliseconds)
animation: {height:'show'} //the animation. This will slide down. For fade-in use this -> opacity:'show'
});
});The menu structure looks like this:
<ul class="sf-menu"> <li><a href="index.html">Dashboard</a></li> <li><a href="#">Item 1 level 1</a></li> <li><a href="#">Item 2 level 1</a></li> <li><a href="#">Item 3 level 1</a> <ul> <li><a href="#">Item 1 level 2</a></li> <li><a href="#">Item 2 level 2</a></li> <li><a href="#">Item 3 level 2</a> <ul> <li><a href="#">Item 1 level 3</a></li> <li><a href="#">Item 2 level 3</a></li> <li><a href="#">Item 3 level 3</a></li> </ul> </li><!-- End of item 3 level 2 --> </ul> </li><!-- End of item 3 level 1 --> </ul><!-- End of .sf-menu -->
Middle part
"Middle part" is the most important part. Here is show all content from a specific page. His structure looks so:
<section id="container" class="container_12"> MAIN CONTENT </section><!-- End of #container -->
Fig. 1.1. Box details.
Fig. 1.0. Content box.
id="container" - add 20px margin to top and 10px margin to bottom. Also it has a minimum height of 400px to make sure that template will not be destroyed if here are only a few lines of content.
class="container_12" - enable support for 960 grid system. Now once you have added this class your template is fully compatible with 960gs.
All content is recomended(but is not required) to include in "boxes". (Click Fig. 1.0)
Box HTML structure:
<section class="grid_4"> <div class="box"> <div class="title">Title</div> <div class="inside"> <div class="in"> HERE IS ALL CONTENT </div> </div> </div> </section>
So what's that: (Click Fig. 1.1)
- Use 960 grid system to arange the box on page and define the width:
<section class="grid_4"> ... </section> - Next create the box itself:
<div class="box"> ... </div> - The box will have a title:
<div class="title">Title</div>and a div with class"inside"and that in its turn another div with class"in"
NOTE: <div class="in"> here is the content </div> - creates a 10px space around the content. If you wish to have a box without inner space, don't use this div.
- http://960.gs/ - 960 grid system official website
- http://www.designinfluences.com/fluid960gs/ - fluid 960 grid system official website
Bottom part
"Bottom part" is a simple addition for you, to have a ready-made footer, if you want to add something to end of a page.
HTML Structure:
<section id="footer_bar"> <div class="copyr">Copyright © Smartik 2012</div> </section>
Forms