Menu icon Foundation
[Tuto] PHP support for ZURB Template

 

Hi, I use to work a lot with PHP for $_SESSION variables and database communication. When I started using Foundation's ZURB Template, I noticed it was build for HTML files only. Here's my procedure to support PHP files.

This tutorial uses npm on windows.

If not already done, install npm and then the Node-powered Foundation CLI via the npm install --global foundation-cli command in CMT. Folder location doesn’t matter for this instruction.

Then continue with the following:

  1. Open CMT (Command Line Tool).
  2. CD to your project folder.
  3. Execute foundation new, select ZURB Template (for CSS, HTML, JS and IMG compilation).

 Your project is created. Now:

  1. Go to your project folder.
  2. Edit gulpfile.babel.js file.
  3. Add the PHP extension here:
    function pages() {
      return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
    And comment/delete the pages, layout and partials sub functions here:
    function watch() {
    Results:
    function pages() {
      return gulp.src('src/pages/**/*.{html,php,hbs,handlebars}')
    function watch() {
      gulp.watch(PATHS.assets, copy);
      //gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
      //gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
  4. Now to enable PHP layouts and partials, from your project folder, edit node_modules/panini/lib/ loadLayouts.js and loadPartials.js files.
  5. As before, add the PHP extension in both files. Results:
    module.exports = function(dir) {
      var layouts = utils.loadFiles(dir, '**/*.{html,php,hbs,handlebars}');

    module.exports = function(dir) {
      var partials = utils.loadFiles(dir, '**/*.{html,php,hbs,handlebars}');

 

Now, about the Node-powered Foundation CLI. There are functions restrictions:

  • foundation build (inside your project folder) works fine. It adds .php files located within src/pages, src/layouts and src/partials.
  • foundation watch (again inside your project folder) doesn't work for .php files. See EDIT at the end of the post.
  • foundation default (again inside your project folder) shoudn't be used since it uses the watch function.

That's it. Please feel free to point out anything wrong or not recommanded.

EDIT: foundation watch doesn't work for .php files as it requires a PHP development environment. More info here https://foundation.zurb.com/forum/posts/37707-use-foundation-with-php-files.

tutorialtutoPHPsupportzurbtemplateFoundationinstallsetup

 

Hi, I use to work a lot with PHP for $_SESSION variables and database communication. When I started using Foundation's ZURB Template, I noticed it was build for HTML files only. Here's my procedure to support PHP files.

This tutorial uses npm on windows.

If not already done, install npm and then the Node-powered Foundation CLI via the npm install --global foundation-cli command in CMT. Folder location doesn’t matter for this instruction.

Then continue with the following:

  1. Open CMT (Command Line Tool).
  2. CD to your project folder.
  3. Execute foundation new, select ZURB Template (for CSS, HTML, JS and IMG compilation).

 Your project is created. Now:

  1. Go to your project folder.
  2. Edit gulpfile.babel.js file.
  3. Add the PHP extension here:
    function pages() {
      return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
    And comment/delete the pages, layout and partials sub functions here:
    function watch() {
    Results:
    function pages() {
      return gulp.src('src/pages/**/*.{html,php,hbs,handlebars}')
    function watch() {
      gulp.watch(PATHS.assets, copy);
      //gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
      //gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
  4. Now to enable PHP layouts and partials, from your project folder, edit node_modules/panini/lib/ loadLayouts.js and loadPartials.js files.
  5. As before, add the PHP extension in both files. Results:
    module.exports = function(dir) {
      var layouts = utils.loadFiles(dir, '**/*.{html,php,hbs,handlebars}');

    module.exports = function(dir) {
      var partials = utils.loadFiles(dir, '**/*.{html,php,hbs,handlebars}');

 

Now, about the Node-powered Foundation CLI. There are functions restrictions:

  • foundation build (inside your project folder) works fine. It adds .php files located within src/pages, src/layouts and src/partials.
  • foundation watch (again inside your project folder) doesn't work for .php files. See EDIT at the end of the post.
  • foundation default (again inside your project folder) shoudn't be used since it uses the watch function.

That's it. Please feel free to point out anything wrong or not recommanded.

EDIT: foundation watch doesn't work for .php files as it requires a PHP development environment. More info here https://foundation.zurb.com/forum/posts/37707-use-foundation-with-php-files.

Rafi Benkual almost 2 years ago

This is awesome John - thanks for sharing it!

Paul over 1 year ago

Thanks John, worked for me.

Rafi, is there some way to not edit the node_modules files though?

nguyennhanbenhlau over 1 year ago

Thanks John, worked for me.

Rafi, is there some way to not edit the node_modules files though?