The following are guides for creating templates with the Zurb Foundation and Twitter Bootstrap frameworks. At the beginning of each guide, there is a sample template zip file that you can download and follow for reference. Relevant blog posts from the Soholaunch company blog are at the bottom. The guides assume you have some familiarity with HTML and CSS.
Zurb Foundation Templates
This is a guide for building responsive templates with Zurb Foundation responsive framework. The guide will use the CSS version of the Zurb Foundation 5 (as opposed to the Sass version). 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
1. Download Zurb Foundation
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
at the beginning of that link so it is applied. Look at the link to the default Foundation style sheet in the head section of the sample index.html file.
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 Template Reference 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.htmlThere is a point when the sample code begins building out the menu with unordered lists (i.e. ul and li).
In our Reponsive-elegant-pink template, 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
If you take a look at the sample template file "Responsive- Elegant-pink," you'll see our changes. 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.
Twitter Bootstrap Templates
The following is a guide for creating templates with the Twitter Bootstrap responsive framework. Here’s the complete working template file that this guide uses: http://site.soholaunch.com/media/bootstrap-basic-gray.zip Feel free to download it and use it.
Main getting started steps:
- Download the CSS version of bootstrap at: http://getbootstrap.com/ (that is, not the Less or Sass versions. You can use Less or Sass, but this guide covers using the CSS version for now)
- Put the zip in your template folder. Here’s the path: sohoadmin/program/modules/site_templates/pages . And extract the zip.
- Add an index.html file. As of this writing, a default index.html doesn’t come with the zip, but Bootstrap’s example templates are here, under “examples”: http://getbootstrap.com/getting-started/
- If using one of their templates, open one in your browser, view the source and copy and paste it into your index.html file and save it in your template folder. This guide uses the “Jumbotron” template.
- Add the #relative_template_path# pound variable to any links to Bootstrap’s default stylesheets.
- Add the pound variables, a custom.css file, and then start making your template.
The main things the menu needs are certain css classes added to different elements. Copy the pgm-auto_menu.php found inside the zip file at the top of this guide, and paste it into your template folder. We added the required classes to it to make the menu work (like collapse into the “hamburger” icon, and retain all the drop-down menu items). Add the #hmains# pound variable into the correct place in index.html for the menu. It’s usually where the template starts building out the menu with unordered list items (i.e. ul’s and li’s).
Our index.html and commentary
If you take a look at the index.html file in our template zip, you'll see we made a few changes. We had to change a few things from the Jumbotron template code that we copied and pasted. Below are the main highlights so you don’t miss anything:
- There is no “jumbotron.css” stylesheet in the default download zip, so we just deleted that link in our index.html and it didn’t seem to matter.
- We commented out any forms that came with the template. Soholaunch lets you drag and drop login and search boxes already in the page editor.
- Wrapped our content and box pound variables in the column classes like it's recommended as part of using Bootstrap's grid.
Related Blog Posts
Below are posts about template development from the Soholaunch company blog.
- Integrating and Uploading Custom Templates into Soholaunch
- Why Foundation 5 With Sass is Hard to Install - Explains setting up the Sass version of Foundation.
- Design for Programmers: Start Here
- 4 Invaluable Tools for Template Design & Web Development
- Ultra's New Template Features
- Create a Custom Blog Display
- Teach an Old Site New Tricks: How to Make It Responsive