In this tutorial you will learn how to create a responsive Governor Theme.
Before Getting Started
Governor Account
A note about framework
Governor is completely front-end framework agnostic. With Governor you can use any framework you like, or none at all. For the purposes of this tutorial Materialize is used.
You can find Materialize at http://materializecss.com.
For tutorials on creating themes with Bootstrap visit: Bootstrap Tutorial
For tutorials on creating themes with Foundation visit: Foundation Tutorial
Setting up your themes structure
For help setting up Theme Structure check out Creating a Governor Theme.
Master
Once your theme structure is ready you can move on to creating a master.html.
The master.html communicates the structure of the document that does not change between pages such as, headers, footers or navigation.
Start with the basic HTML structure.
Example: master.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
Next, tell Governor where you would like your page templates to start with the gv-content tag.
Example: master.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div gv-content></div>
</body>
</html>
You can now add the rest of your static markup.
Example: master.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Build a Responsive Website with Governor and Materialize</title>
<meta name="keywords" content="HTML,CSS,Governor,Materialize">
<meta name="description" content="Governor and Materialize Tutorial">
<meta name="author" content="Governor.io">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/materialize.css"> <!--adding Materialize to this theme is as simple as referencing it from the assets folder.-->
</head>
<body>
<div>
<div class="logo col s12 m6 l4">
<img src="..." alt="logo" />
</div>
<nav class="navigation col s12 m6 l8">
<ul>
<li>
<a href="#">...</a>
</li>
</ul>
</nav>
</div>
<div gv-content></div>
</body>
</html>
Meta tags
Governor allows you to empower your users to dynamically set titles and meta tags per page.
Using the previous example, replace the title and meta data with the Govtags: gv-title, and gv-meta.
Example: master.html
<!DOCTYPE html>
<html lang="en">
<head>
<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/materialize.css">
</head>
<body>
<div>
<div class="logo col s12 m6 l4">
<img src="..." alt="logo" />
</div>
<nav class="navigation col s12 m6 l8">
<ul>
<li>
<a href="#">...</a>
</li>
</ul>
</nav>
</div>
<div gv-content></div>
</body>
</html>
Includes
To help organize you can break off pieces of code into smaller sizes. Create a new file named head.html, and place it inside of the includes folder. Copy and paste all of the information between the head tags into head.html. Please note when Governor places content, and includes it removes the div that contains the tag.
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/materialize.css">
Replace the information with a gv-includes tag inside of master.html.
Example: master.html
<!DOCTYPE html>
<html lang="en">
<head>
<div gv-includes="head.html"></div>
</head>
<body>
<div>
<div class="logo col s12 m6 l4">
<img src="..." alt="logo" />
</div>
<nav class="navigation col s12 m6 l8">
<ul>
<li>
<a href="#">...</a>
</li>
</ul>
</nav>
</div>
<div gv-content></div>
</body>
</html>
Governor knows to look inside of the includes folder and find head.html. Includes can be named anything you wish as long as it is inside the includes folder.
Navigation
Using the same method as above, move the navigation element into a file named nav.html inside the includes folder.
Example: nav.html
<div>
<div class="logo col s12 m6 l4">
<img src="..." alt="logo" />
</div>
<nav class="navigation col s12 m6 l8">
<ul>
<li>
<a href="#">...</a>
</li>
</ul>
</nav>
</div>
Remove the <li>, and <a> tags, and add the gv-menu tag to the <ul>.
Example: nav.html
<div>
<div class="logo col s12 m6 l4">
<img gv-img -label="logo" />
</div>
<nav class="navigation col s12 m6 l8">
<ul gv-menu -label="main">
</ul>
</nav>
</div>
The gv-menu tag automatically creates the li/a structure allowing users to create menu items from the Governor app.
Next place an include inside the master.html for nav.
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>
</body>
</html>
For more advanced and complex menus take a look at: gv-menu
Pages
Finally, this website needs a homepage. Create a file named index.html in the pages directory inside of your project. This template will be used as the homepage, remember to only include HTML you want to be inserted into the master.html's gv-content area.
Example: index.html
<div id="index-banner" class="parallax-container" -section="Hero">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h1 class="header center teal-text text-lighten-2" gv-text -label="Hero Title"></h1>
<div class="row center">
<h5 class="header col s12 light" gv-text -label="Hero Subtitle"></h5>
</div>
<div class="row center">
<a gv-link -label="call to action button" class="btn-large waves-effect waves-light teal lighten-1"></a>
</div>
<br><br>
</div>
</div>
<div class="parallax"><img gv-img -label="parallax image" src="@src" alt="@alt"></div>
</div>
<div class="container">
<div class="section" -section="Three call outs">
<!-- Icon Section -->
<div class="row" >
<div class="col s12 m4" -block="Call out one">
<div class="icon-block">
<h2 class="center brown-text"><i gv-text -label="Font awesome icon name" class="fa fa-@text"></i></h2>
<h5 class="center" gv-text -label="Title"></h5>
<p class="light" gv-textarea -label="Text"></p>
</div>
</div>
<div class="col s12 m4" -block="Call out two">
<div class="icon-block">
<h2 class="center brown-text"><i gv-text -label="Font awesome icon name" class="fa fa-@text"></i></h2>
<h5 class="center" gv-text -label="Title"></h5>
<p class="light" gv-textarea -label="Text"></p>
</div>
</div>
<div class="col s12 m4" -block="Call out three">
<div class="icon-block">
<h2 class="center brown-text"><i gv-text -label="Font awesome icon name" class="fa fa-@text"></i></h2>
<h5 class="center" gv-text -label="Title"></h5>
<p class="light" gv-textarea -label="Text"></p>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper" -section="Second Parallax">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light" gv-text -label="Title"></h5>
</div>
</div>
</div>
<div class="parallax"><img gv-img -label="Parallax Image" src="@src" alt="@alt"></div>
</div>
<div class="container">
<div class="section" -section="Contact us">
<div class="row">
<div class="col s12 center">
<h3><i gv-text -label="Font awesome icon name" class="fa fa-@text"></i></h3>
<h4 gv-text="title"></h4>
<p class="left-align light" gv-textarea -label="Text"></p>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper" -section="Third Parallax">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light" gv-text -label="Title"></h5>
</div>
</div>
</div>
<div class="parallax"><img gv-img -label="Parallax Image" src="@src" alt="@alt"></div>
</div>
All files within pages can be used as a template. Creating several page templates is as easy as creating static pages with a few Govtags.
Now that you have completed your Responsive Governor Theme learn how to upload your Governor Theme.