#SAGE ProcessWire Site Profile Port of the WP SAGE theme to ProcessWire

##What is this? This site profile for the ProcessWire CMS/CMF is a port of the fabulous Wordpress theme SAGE

It takes advantage of the build workflow of SAGE which utilizes gulp and bower to organize, build and load site assets. It is a blank site profile and does not use any of the php templates of the original SAGE theme. It comes with Bootstrap SASS version and fontawesome.

##Prerequisites

• npm
• gulp
• bower

##How to install from zip:

1. download the zip
2. extract the folder "site-pwsage" into a clean ProcessWire install's root folder
3. during install of ProcessWire choose the profile "Processwire SAGE Site Profile"

git clone:

1. clone ProcessWire into your projects root folder
2. open a terminal in that root folder and execute git clone https://github.com/gebeer/site-pwsage.git
3. during install of ProcessWire choose the profile "Processwire SAGE Site Profile"

##Getting Started After installation open ProcessWire's site/templates/ directory in a terminal and:

• execute npm install to install all requeired node modules
• execute bower install to install all bower components
• execute gulp to build your assets. They will be pusblished in site/templates/dist/

You should now see the site in a browser with all js and css applied.

##The gulp Magic To have automated compilation of scss in the backgound and an updated browser window every time you change something in your code, execute gulp watch in a terminal. To make the automated browser update work, you need to add the url of your development site in templates/assets/manifest.json

##Control Bootstrap Components

• in site/templates/assets/styles/common/_bootstrap-custom.scss you can control which Bootstrap CSS components get loaded. Just comment out the ones you don't need.
• in site/templates/bower.json in the section "overrides"->"bootstrap-sass-official" you can control which Bootstrap JS components get included. Just delete the ones you don't need (be careful not to have a comma after the last one in the list)

##Ready for Production? Once your site is ready for production, execute gulp --production, go to site/config.php and change $config->env = 'development'; to $config->env = 'production';

##Credits This site profile was inspired by jlahijani's post "How to Adapt WordPress Sage Starter Theme to ProcessWire (Video Tutorial)". I strongly recommend watching his tutorial video to get to know the development workflow. And of course credits go to SAGE for setting up this awesome workflow.

##Notes As I personally prefer SASS over LESS, I removed all LESS specific files from the original SAGE theme. If need be, I can add a branch where they are included. Just drop me a line.