simonpadbury / fst

ZURB Foundation Starter Theme, for WordPress

#FST - A ZURB Foundation Starter Theme for WordPress

Version 2.2.1

FST is a simple WordPress starter theme loaded with ZURB Foundation 5.5.2.

https://github.com/SimonPadbury/fst

This theme has been built for use as a starter theme and as a learning aid for people who wish to get into WordPress theme design.

MIT licence (open source).

Note: in January 2015 this theme had a major re-build, bringing its base files in line with BST, my Bootstrap Starter Theme for WordPress. Now users of either theme will feel 'at home' in the other.

---

##Features of FST

1. Simple, intuitive, clean code – CSS, JS, functions, template includes and loops are organized into different folders.
2. ZURB Foundation 5.5.2 – CSS and JS enqueued in functions/enqueues.php.
3. jQuery 2.1.4 enqueued – from the foundation/vendors/ folder.
4. Normalize 3.0.3 enqueued – from the foundation folder.
5. Foundation icon fonts included – http://zurb.com/playground/foundation-icon-fonts-3. These are used in various places throughout this theme.
6. Two WordPress menu positions in the Foundation top-bar – left and right.
7. Optional search form built into the top-bar
8. Foundation pagination for blog index and category pages
9. A starter CSS theme – css/fst.css (Don't put your own styles in style.css.)
10. Visual editor stylesheet – into which the same Foundation and starter CSS theme are preloaded by @import, so that what you see in the visual editor is (mostly!) what you get at the front end (WYSI(M!)WYG). E.g. you will see the theme's typography in the WordPress Post/Page editor, but its width will not be the same as your article column width in the front end.

---

##Customizing foundation.css

You can simply swap the default Foundation files (included) for a custom made Foundation CSS generated by the customizer (http://foundation.zurb.com/develop/download.html), and this theme will still work.

###Notes:

1. You will still need to include the button styles and form styles in the customized foundation.css build.
2. If in the customizer you change the humber of grid columns (from the default 12), you will need to adapt the grid layout in 404.php, category.php, index.php, page.php, single.php and ``search.php`.

---

##Using SCSS

You will need to:

1. Get the latest Foundation SCSS files from http://foundation.zurb.com/docs/sass.html and place them in a scss/ folder in the root directory of this theme;
2. Set up your pre-processor so that it outputs your CSS files in the theme's css/ folder;
3. Then you can modify scss/foundation/_settings.css and you can create your own scss/fst.scss file. Note: be sure to copy my original content of css/fst.css into your SCSS file before your pre-processor overwrites it.

Alternatively, you may prefer to combine all into one CSS file, by putting @import "foundation/settings"; and @import "foundation"; at the top of your scss/fst.scss.

If you do this, then remember to remove the register and enqueue for "foundation.min.css" from functions/enqueues.php as it is no longer required. Also, you will then need to remove @import url("foundation.min.css"); from css/editor-style.css.

---

##Make this theme your own

You can easily make this theme your own by following these steps:

1. Rename the root folder from fst/ to yourtheme/.
2. Rename css/fst.css to css/yourtheme.css.
3. Rename js/fst.js to js/yourtheme.js.
4. In your code editor, do a global search-and-replace ("Replace in files...") to rename ... fst => your-theme – everywhere in the theme's code.
5. Modify the comments in style.css.

Do all that correctly, and this WordPress theme will still work!