Semantique

Building on Semantique by olefrederick, this is Wordpress theme takes Foundation's semantic sensibilities further by incorporating the Susy Grid Framework for layout, to provide a broader range of grid optoins, such as margin AND padding based gutters, row-less layouts, gallery mixins and a vast range of contextually set options.

Please fork, copy, modify, delete, share or do whatever you like with this.

Requirements

Semantique uses Sass (CSS with superpowers). In short, Sass is a CSS pre-processor that allows you to write styles more effectively and tidy.

YOu can use your preferred compiler, node or GUI apps such as Codekit or Prepros

If you have not worked with a Sass-based workflow before, I would recommend reading Semantique for beginners, a short blog post that explains what you need to know.

Quickstart

1. Clone the repository and install with npm

$ cd my-wordpress-folder/wp-content/themes/
$ git clone https://github.com/timoti/Semantique.git
$ cd Semantique
$ npm install

2. While you're working on your project, run:

$ npm run watch

If you want to take advantage of browser-sync (automatic browser refresh when a file is saved), simply open your Gulpfile.js and put your local dev-server address (e.g localhost) in this field var URL = ''; , save the Gulpfile and run

$ npm run watch

3. For building all the assets, run:

$ npm run build

Build all assets minified and without sourcemaps:

$ npm run production

Styles

• 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

• assets/scss/foundation.scss: Make imports for all your styles here

• assets/scss/global/*.scss: Global settings

• assets/scss/components/*.scss: Buttons etc.

• assets/scss/modules/*.scss: Topbar, footer etc.

• assets/scss/templates/*.scss: Page template spesific styling

Please note that you must run npm run build or npm run watch in your terminal for the styles to be copied and concatenated. See the Gulpfile.js for details

Scripts

• assets/javascript/custom: This is the folder where you put all your custom scripts. Every .js file you put in this directory will be minified and concatenated one single .js file. (This is good for site speed and performance)

Please note that you must run npm run build or npm run watch in your terminal for the scripts to be copied and concatenated. See Gulpfile.js for details

The main styles and scripts generated by the build

Version control on these files are turned off because they are automatically generated as part of the build process.

• assets/stylesheets/foundation.css: All Sass files are minified and compiled to this file

• assets/stylesheets/foundation.css.map: CSS source maps

• assets/javascript/vendor: Vendor scripts are copied from assets/components/ to this directory. We use this path for enqueing the vendor scripts in WordPress.

Check For WordPress Coding Standards

Foundation comes with everything you need to run tests that will check your theme for WordPress Coding Standards. To enable this feature you'll need to install PHP Codesniffer, along with the WordPress Coding Standards set of "Sniffs". You'll need to have Composer To install both run the following:

$ composer create-project wp-coding-standards/wpcs:dev-master --no-dev

When prompted to remove existing VCS, answer Yes by typing Y.

Once you have installed the packages, you can check your entire theme by running:

$ npm run phpcs

If there are errors that Code Sniffer can fix automatically, run the following command to fix them:

$ npm run phpcbf

Tutorials

• Zurb Foundation Docs
• WordPress Codex