In this tutorial, we will learn how to make your own responsive Governor theme using Foundation.
Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable.
Like any other framework, Foundation is completely compatible and easy to use with Governor.
Before getting started
Governor Account
CSS
In the head of your document add a link to Foundation's css file.
Example: head.html
<meta charset="utf-8">
<title gv-title></title>
<meta gv-meta="keywords">
<meta gv-meta="description">
<meta gv-meta="author">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/foundation.css">
Remember, if using the include head.html it should be placed within the includes folder and you have referenced it using gv-includes="head.html" in your master.html.
Javascript
To take advantage of all the javascript plugins foundation offers you will need to add foundations initializing script to the bottom of your document.
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>
<script src="assets/js/vendor/jquery.js"></script>
<script src="assets/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Adding the script to the bottom of the master.html insures it will work on every page.
Foundation Example
Example: index.html
<div class="row" -block="Block One">
<div class="large-4 columns">
<img gv-img -label="Image"/>
</div>
<div class="large-8 columns">
<h4 gv-text -label="title"></h4>
<div class="row">
<div class="large-6 columns">
<p gv-textarea -label="Text"></p>
<a gv-link -label="Foundation Expanded Link button" class="button expand"></a>
</div>
<div class="large-6 columns">
<p gv-textarea -label="Text"></p>
<a gv-link -label="Foundation Tiny Button" class="tiny button"></a>
</div>
</div>
</div>
</div>
<div class="row" -block="Block Two">
<div class="large-8 columns">
<ul class="clearing-thumbs" data-clearing>
<li gv-img><a href="@@src"><img src="@@src" alt="@@alt"></a></li>
<li gv-img><a href="@@src"><img src="@@src" alt="@@alt"></a></li>
<li gv-img><a href="@@src"><img src="@@src" alt="@@alt"></a></li>
</ul>
</div>
<div class="large-4 columns">
<img gv-img -label="Image">
</div>
</div>
Summary
In just two easy steps Foundation is installed and ready to use with your Governor Theme. For more information on foundation please visit, foundation.zurb.com/