The master.html is a template that enables you to define common structure and markup elements for your website.
First, the basic html structure.
Example: master.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
These elements appear in all websites and do not change from page to page.
Now, tell Governor where you want your page content to be placed.
Example master.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div gv-content></div>
</body>
</html>
The gv-content tag tells Governor where to place the various page templates you will set up later.
Pro Tip:
Once you've placed gv-content inside a file named master.html your master is technically finished and will work for any Governor Theme. This tutorial shows more in depth, advanced master.html layouts below.
Next you can add some other static elements to your master, such as the head information, the navigation, and a footer.
Example: master.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Build a Responsive Website with Governor and Foundation</title>
<meta name="keywords" content="HTML,CSS,Governor,Foundation">
<meta name="description" content="Governor and Foundation Tutorial">
<meta name="author" content="Governor.io">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">
<a href="#">Right Button Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
<li class="active"><a href="#">Active link in dropdown</a></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><a href="#">Left Nav Button</a></li>
</ul>
</section>
</nav>
</nav>
<div gv-content></div>
<footer class="footer">
<div class="row full-width">
<div class="small-12 medium-3 large-4 columns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum maiores alias ea sunt facilis impedit fuga dignissimos illo quaerat iure in nobis id quos, eaque nostrum! Unde, voluptates suscipit repudiandae!</p>
</div>
<div class="small-12 medium-3 large-4 columns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit impedit consequuntur at! Amet sed itaque nostrum, distinctio eveniet odio, id ipsam fuga quam minima cumque nobis veniam voluptates deserunt!</p>
</div>
<div class="small-6 medium-3 large-2 columns">
<h4>Lorem Ipsum</h4>
<ul class="footer-links">
<li><a href="#">What I Do</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">FAQ's</a></li>
</ul>
</div>
<div class="small-6 medium-3 large-2 columns">
<h4>Dolar Set</h4>
<ul class="footer-links">
<li><a href="#">GitHub</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Dribbble</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
Now replace the head information inside the master.html with a gv-includes tag.
Example master.html
<!DOCTYPE html>
<html lang="en">
<head>
<div gv-includes="head.html"></div>
<!--replace the head information with gv-includes tag-->
</head>
<body>
...
Next place the navigation and footer markup into their own include files.
Place the navigation markup into a file named nav.html, and the footer markup into footer.html and moved both files into the includes folder.
Example master.html
<!DOCTYPE html>
<html lang="en">
<head>
<div gv-includes="head.html"></div>
</head>
<body>
<div gv-includes="nav.html"></div>
<div gv-content></div>
<div gv-includes="footer.html"></div>
</body>
</html>
Pro Tip:
The master.html leaves a lot of room for personal style. Pieces of markup can be broken into as many, or as few includes as you wish.
Some other examples.
Example master.html
<div gv-includes="head.html"></div>
<div gv-includes="nav.html"></div>
<div gv-content></div>
<div gv-includes="footer.html"></div>
Placing all of your HTML structure inside of your gv-includes.
Example: master.html
<div gv-content></div>
Note, a master.html with a gv-content tag is required to use Governor.