foundation-zurb-template
v1.0.0
Published
Official ZURB Template for Foundation for Sites.
Downloads
3
Readme
ZF Theme
Hi. I'm a starter theme called ZF Theme, which stands for either Zeeland Family or Zurb Foundation, whichever you prefer. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
My structure is 95% the same as _s by Automattic, but I integrate the Foundation Zurb Template.
Learn more about the Foundation framework by reading the Foundation docs.
- A just right amount of lean, well-commented, modern, HTML5 templates.
- A helpful 404 template.
- A custom header implementation in
functions/custom-header.php
just add the code snippet found in the comments offunctions/custom-header.php
to yourheader.php
template. - Custom template tags in
functions/template-tags.php
that keep your templates clean and neat and prevent code duplication. - Some small tweaks in
functions/extras.php
that can improve your theming experience. - The Foundation Framework (version 6.3) using the Foundation Zurb Template in the
_src
directory. - Licensed under GPLv2 or later. :) Use it to make something cool.
Getting Started
To personalise your theme, download zf-theme
from GitHub. The first thing you want to do is copy the zf-theme
directory and change the name to something else (like, say, megatherium
), and then you'll need to do a five-step find and replace on the name in all the templates.
- Search for
'humppacom'
(inside single quotations) to capture the text domain. - Search for
humppacom_
to capture all the function names. - Search for
Text Domain: zf-theme
in style.css. - Search for zf-theme (with a space before it) to capture DocBlocks.
- Search for
humppacom-
to capture prefixed handles.
OR
- Search for:
'humppacom'
and replace with:'megatherium'
- Search for:
humppacom_
and replace with:megatherium_
- Search for:
Text Domain: zf-theme
and replace with:Text Domain: megatherium
in style.css. - Search for: zf-theme and replace with: Megatherium
- Search for:
humppacom-
and replace with:megatherium-
Then, update the stylesheet header in style.css
and the links in footer.php
with your own information. Next, update or delete this readme.
There are two routes you can take for development, depending on whether you like Sass, Gulp and friends:
Development using CSS (without Sass or Gulp)
If you're not into Sass or Gulp, just delete the _src directory and remove the comment from the beginning of this line in functions/scripts-and-styles.php
:
// wp_enqueue_style( 'humppacom-custom-style', get_stylesheet_uri() );
You can then add your own custom styles into style.css
.
It is highly recommended that you create a custom version of the Foundation JS & CSS using the online configurator so you have only what you need and nothing else. This will save users' bandwidth, time, batteries, money, headaches and reduce CO2 emissions. If you do this however, you need to do a couple of things after extracting the custom download:
- Move
css/foundation.min.css
from the custom package intodist/assets/css/
and rename it toapp.css
. - Move
js/vendor/foundation.min.js
from the custom package intodist/assets/js/
and rename it toapp.js
.
If you have any custom JS, I suggest creating a new file in dist/assets/js
and enqueuing it the usual way in functions/scripts-and-styles.php
.
Development using Sass, Gulp and Panini templates
Requirements: Node, NPM and Bower. And a local WordPress development server (MAMP, XAMPP, Pressmatic, something else, it's your choice).
Set up a local WordPress development site, and take note of its URL, e.g. 'example.dev'. Drop your theme in the themes directory and activate it. Edit config.yml
and make sure the BROWSERSYNC options point to the right URL. This is also where you change options regarding which Foundation (and other) JS files should be concatenated, how the autoprefixer works etc.
Run npm install && bower install
in your theme directory. Go make a cup of tea while this is happening. Then run npm start
and start developing!
Compiling assets for production
Run npm run build
to compile compressed, production-ready CSS and JS.
Developing HTML mockups without a WordPress installation
If you prefer to start development by building HTML mockups, you can build your templates in _src/pages
and _src/partials
and change the BROWSERSYNC type setting in config.yml
to html
. Browsersync will start up a simple static file server at localhost:8000 and refresh every time you make a change to your Sass, JS or HTML template files. The benefit of this is you can get going faster without the overhead of a WP site running locally, and it's easier to include front-end devs in your team who might not have a local server setup or WordPress experience.
Read more about the Panini template language in the Panini docs on the Foundation site.
Styleguides!
You can build a styleguide within your theme in _src/styleguide/
, extremely handy when passing on development to new theme members. Instructions for how to edit the styleguide on the Foundation site. The BROWSERSYNC value in config.yml
needs to be set to html
and you can view your guide at localhost:8000/styleguide.html
.