Skip to content

dimaursu/dimaursu.net

Repository files navigation

FoundationPress

This is the theme used for my site, dimaursu.net. It's a heavily modified foundationPress starter theme, and it requires Timber in order to work. Beside that, it uses turbolinks, the stuff used in Rails to make page loading really fast (it basically replaces the content of the webpage, whithout reloading the CSS/JS).

Contributions are welcome!

Requirements

You'll need to have the following items installed before continuing.

  • Node.js: Use the installer provided on the NodeJS website.
  • Grunt: Run [sudo] npm install -g grunt-cli
  • Bower: Run [sudo] npm install -g bower

Quickstart

cd my-wordpress-folder/wp-content/themes/
git clone git@github.com:olefredrik/FoundationPress.git
mv FoundationPress your-theme-name
cd your-theme-name
npm install && bower install

While you're working on your project, run:

grunt

And you're set!

Check for Foundation Updates? Run: foundation update (this requires the foundation gem to be installed in order to work. Please see the docs for details.)

Stylesheet Folder Structure

  • style.css: Do not worry about this file. (For some reason) it's required by WordPress. All styling are handled in the Sass files described below

  • scss/app.scss: Sass imports for global config, foundation and site structure

  • scss/config/_variables.scss: Your custom variables

  • scss/config/_colors.scss: Your custom color scheme

  • scss/config/_settings.scss: Original Foundation 5 base settings

  • scss/site/_structure: Your custom site structure

  • css/app.css: All Sass files are minified and compiled to this file

Script Folder Strucutre

  • bower_components/: This is the source folder where all Foundation scripts are located. foundation update will check and update scripts in this folder
  • js/: jQuery, Modernizr and Foundation scripts are copied from bower_components/ to this directory, where they are minified and concatinated and enqueued in WordPress
  • Please note that you must run grunt in your terminal for the scripts to be copied. See Gruntfile.js for details

How to get started with Foundation

Learn how to use WordPress

Demo