Building a Foundation responsive template

From Sohowiki
(Difference between revisions)
Jump to: navigation, search
(Created page with "This is a guide for building responsive templates in Soholaunch. The guide will use the CSS version of the Zurb Foundation 5 framework (as opposed to the Sass version). Most o...")
 
m (Protected "Building a Foundation responsive template" ([edit=sysop] (indefinite) [move=sysop] (indefinite)))

Revision as of 08:05, 23 June 2014

This is a guide for building responsive templates in Soholaunch. The guide will use the CSS version of the Zurb Foundation 5 framework (as opposed to the Sass version). Most of the process transfers over to other frameworks like Twitter Bootstrap. Here is the complete working template file that the sample code in this wiki comes from: http://site.soholaunch.com/media/Responsive-Elegant-pink.zip . Feel free to download it and use it for reference.

Contents

1. Download Zurb Foundation at: http://foundation.zurb.com/develop/download.html

Download either the default CSS or make your own custom CSS package. Either way, it will give you a .zip file to download. Save it to your computer.

2. Extract the zip in your project folder

Go to the template folder in your Soholaunch installation: /sohoadmin/program/modules/site_templates/pages

Make a folder for your template. Put the zip file inside of it and extract it. You should have some folders like css/js/img and an index.html file. The folder structure will look sort of like this:

http://site.soholaunch.com/media/folder-structure-extracted.jpg

3. Add the relative template path variable

Open index.html in your code editor. In the head section, you will have a link to the core foundation.css file. You need to add #relative_template_path# at the beginning of that link so it is applied. It should look something like this:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#title#</title>
<link rel="stylesheet" href="#relative_template_path#/css/foundation.css" /> <!- Must add #relative_template_path# -->
<script src="js/vendor/modernizr.js"></script>
</head>

4. Build and style your template

Create a custom.css in your template folder. Add your own custom css to it. This is instead of adding it to the foundation.css so things are a little more organized. No need to link custom.css in your html as long as you keep the file name custom.css exactly. (Soholaunch already links it on its own).

Add the pound variables in your index.html. Put them inside of the column classes of the grid like they are actual content.

See more about the pound variables at the Custom_Templates wiki page.

More about the menu

Soholaunch developers have found that responsive frameworks have pesky menus - Foundation included. As a general rule, you usually need to follow the framework’s documentation and sample code very closely, or the menu may not function right.

Below is a rundown of how the Soholaunch developers have implemented the Foundation 5 menu to use Soholaunch’s menu system. This lets the menu toggle into the “hamburger” / “pancake” icon for mobile devices and retain all drop-down menu items.

First, we copied the sample menu code from the Foundation Top Bar doc and pasted it into our index.html. Here’s the link to the doc we used:

http://foundation.zurb.com/docs/components/topbar.html

There is a point when the sample code begins building out the menu with unordered lists (i.e. ul and li). That is where you should add the Soholaunch menu pound variable instead. To illustrate, here is what our code looks like:

<nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true" role="primary"> <!--Begin navigation structure-->
  <ul class="title-area">
    <li class="name"> 
      <h1></h1> <!--Have to have this to make menu work, even if it's empty -->
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
    <div class="nav-bar">#hmains#</div><!--This is where we added hmains instead of the list items-->      
  </section> 
</nav>  <!--End of navigation structure-->

You’ll see we added #hmains# where the sample code builds out the menu links with unordered lists. The hmains pound variable will add those links for you and let you use the Soholaunch menu manager.

Here's the PHP file we made that turns hmains into list items and applies the drop-down classes that Foundation 5 needs:

http://site.soholaunch.com/media/pgm-auto_menu.txt

Copy and paste it into your editor and then save it as a .php file. Then put it in your template folder.

Note: To style the top bar, we had to work off of (fight) the default css classes that Foundation applies to it (use your browser’s code inspector to see what classes are getting applied). Or we added our own classes.

Final folder structure (for reference)

In the end, a bare minimum folder structure will look something like this:

http://site.soholaunch.com/media/final-folder-structure.jpg

Here are the things that are different:

  • Deleted the original Foundation zip file (don’t need it anymore. Keep it if you want)
  • Deleted robots.txt and humans.txt (these aren’t necessary in the template folder)
  • Added screenshot.jpg, which will show in the Soholaunch template manager

Sample index.html file and commentary

Here you’ll see a sample index.html using the Foundation framework. These are the highlights that the developer did in this sample:

  • Wrapped the main content areas like box1 and content and the footer in their own Foundation column classes i.e. large-12, large-4. This follows the same process recommended by Foundation’s documentation about the grid. Read more about the grid here: http://foundation.zurb.com/docs/components/grid.html
  • Added my own css classes outside of Foundation’s when I needed to, like “box”, and styled them in my custom.css file.
  • Used Ultra’s built-in #jquery# pound variable and added my own custom jQuery scripts (at the bottom). Deleted the jQuery link that comes with the default index.html. You can add jQuery however you prefer.
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>#title#</title>
    <link rel="stylesheet" href="#relative_template_path#/css/foundation.css" />
    <script src="#relative_template_path#/js/vendor/modernizr.js"></script>
  </head>
<body>
<div class="wrapper">
<div class="logo-banner">
	<h1 class="logo">#logo#-alt#logoimg#</h1>
</div>  
<div class="slogan-banner">
	<h2 class="slogan">#slogan#</h2>
</div>
<section class="bar-nav">
  <div class="row">  
  	<div class="large-12 columns">  
    	<nav class="top-bar" data-topbar data-options="mobile_show_parent_link: true" role="primary"> <!--Begin navigation structure-->
				<ul class="title-area">
					<li class="name"> 
						<h1></h1> <!--Have to have this to make menu work, even if it's empty -->
					</li>
					<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
				</ul>
			<section class="top-bar-section">
				<div class="nav-bar">#hmains#</div>      
			</section> 
	</nav>  <!--End of navigation structure-->
	</div> 
</div>   
</section>   
<div class="row">
	<div class="large-8 columns middle">
		<div class="row">
			<div class="callout panel content">
				#content#
				  <!--Helps keep the sidebar in place-->
			</div>
		</div>
	</div>    
	<div class="large-4 columns">		             
		<div id="box-one" class="panel box">
			#BOX1#       
		</div>
	</div>
<div class="push"></div>
</div>
</div>
<section class="footer">
		<div class="row">
			<div class="large-12 columns">
				#copyright#	
			</div>
		</div>
</section>	
#jquery#
<script>
   	/* Remove the slogan div cleanly if it's not in use */
   $(function () {
   if($(".slogan").html().length === 0) {
   	$(".slogan").remove();
  	}
  	/* Expand the content area out if the sidebar isn't in use */
  	if (!$("#box-one").text().trim().length){
		$(".middle").addClass("large-12").removeClass("large-8");
		$(".box").remove();
		}
  });
</script>
   <script src="js/foundation.min.js"></script>
   <script>
     $(document).foundation();
   </script>
</body>
</html>
Personal tools