Categories

HTML Structure

This template is built with Bootstrap 3, an HTML, CSS, and JS framework. Please visit Bootstrap site for the detailed documentation. Below is the basic structure of this template:

<!DOCTYPE html>
<html id="home-version-1" class="boxed-style flat-style">    
<head>

	<title>WarTa - News/Magazine Template</title>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	
	<!-- Warta Stylesheet -->        
	<link href="css/style.css" rel="stylesheet">
	
	<!-- Modernizr -->        
	<script src="js/modernizr.min.js"></script>

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<link href="css/ie8.css" rel="stylesheet">
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <script src="js/ie8.js"></script>     
	<![endif]-->
	
</head>
<body>

	<!-- HEADER --> 
	<header>
		
		<!-- Top navigation bar -->
		<nav class="navbar navbar-inverse hidden-xs hidden-sm" id="top-nav" role="navigation">
		</nav> 
		
		<!-- Main navigation bar -->
		<nav class="navbar navbar-default" id="main-nav" role="navigation">
		</nav>
		
		<!-- Page title -->
		<div id="title">
		</div>      
        
	</header>
	
	<!-- CONTENT -->
	<div id="content">  
		<div class="container">
			<div class="row">
			
				<!-- Main content -->
				<div id="main-content" class="col-md-8">
				</div>
				
				<!-- Sidebar -->
				<aside class="col-md-4">
				</aside>
				
			</div>
		</div>
	</div>
	
	<!-- FOOTER -->
	<footer>
	
		<!-- Main footer -->
		<div id="footer-main">
		</div>
		
		<!-- Footer bottom -->
		<div id="footer-bottom">
		</div>
		
	</footer>
	
	<!-- jQuery -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
	
	<!-- Warta Script -->
	<script src="js/script.js"></script>        
	<script src="js/initialize.js"></script>
	
</body>
</html>

Every page has an ID attribute in <html> tag and it is required for proper styling. Those IDs are:

  • #home-version-1 for home-version-1.html
  • #home-version-2 for home-version-2.html
  • #blog-version-1 for blog-version-1.html
  • #blog-version-2 for blog-version-2.html
  • #blog-detail for blog-detail.html, review-bar.html, review-star.html, gallery.html
  • #contact-page for contact.html
  • #sign-in for sign-in.html
  • #page-404 for 404.html

Add .boxed-style to <html> if you want to use boxed layout style. Add .flat-style to <html> if you want to use flat style design.

Leave a Reply