Foundation 6 Minimal site profile

Recommended Posts

Foundation 6 Minimal site profile for ProcessWire

This profile is based on the "minimal site profile (intermediate edition)" and bundled with Foundation 6.

This precompiled version can be downloaded at github.



  • Foundation 6 framework
  • Font-Awesome
  • MeanMenu
  • Slick Carousel (Why not Orbit ?)
  • Render / helper functions for :
    • Simple ul navigation
    • Foundation Multi-level topbar
    • MeanMenu - Responsive menu for mobile device
    • Slick Carousel
    • Foundation Accordion
    • Foundation Callouts
    • Jumbotron



  • jQuery


How To Install

  1. Download the zip file at Github or clone directly the repo with git clone and skip the step 2.
  2. Extract the folder site-fdn6-precompiled into a fresh ProcessWire installation root folder.
  3. During the installation of ProcessWire, choose the profile "ProcessWire Foundation 6 profile".





  • The ProcessWire staff




mobile-1.PNG                                          mobie-2.PNG

Edited by flydev
typo and precompiled version download link modified
  • Like 14

Share this post

Link to post
Share on other sites

Hi at flydev => you did it again and this time with the foundation grid :)

Thanks for doing this and also making a pre-compiled profile. I am happy to see it is also compatible with processwire 2.7.2. I have uploaded it to a test server online here: I think I like the friendly foundation grid more than the intimidating bootstrap but that may be just personal expierence. Looking inside the templates folder, home.php, basic-page.php, _main.php, etc. I see you have a deeper understanding of pw api than I do and am happy to learn from there e.g. filling, preparing and render $content. I also saw you did a great job with customizing the backend:


Since the issue for me in this is building processwire website templates, I add here franciccio's post where he mentioned a good source of free html5/css templates: and here are also eight responsive foundation templates: although you have to subscribe to foundation for downloading (I am not affiliated with them in any way). There are probably more free foundation templates to find on the web such as this really nice one: (foundation 5 is still available)

Edit: make your own foundation template:




  • Like 3

Share this post

Link to post
Share on other sites


In "Download the zip file at Github or clone directly the repo with git clone and skip the step 2." the link points to your Bootstrap profile. You might want to fix this.

Thanks for this profile anyway, I'm gonna take a look at it in the following days.


  • Like 2

Share this post

Link to post
Share on other sites

@flydev It's me again :)

I've installed the profile, and thank's to @adrian's Tracy Debugger module, I did spot these:

These are easy to fix issues, so you might want to update the published version on github.

BTW, thanks @pwired for the online demo! This way I could easily demostrate's result.

  • Like 2

Share this post

Link to post
Share on other sites

@flydev most grateful for this ZF6/PW profile. I found your examples in _func.php to be tremendously helpful and enlightening.  Thanks too for your introduction to the slick.js carousle/slider. I use the scss version of Foundation and was delighted to find the slick.js scss files in its distro. I chose to slug it out with the ZF6 top nav using @soma's MarkupSimpleNavigation rather than meanmenu.js but glad to learn about that too.

Edited by joebaich
completing what I set out to say.
  • Like 1

Share this post

Link to post
Share on other sites

thx for this nice and clean F6-profile.   Sorry for this attachement, I thought there was a problem to remove the images, but it's working fine.


Screen Shot 08-13-16 at 12.35 PM.PNG

Edited by hansv
problem mentioned was not a problem

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By rafaoski
      This profile can be used as a business card or very simple blog.
      Requires the latest version processwire 3.0.101 !!!
      Milligram Site Profile For Processwire 3x with include functions like:
      wireIncludeFile | wireRenderFile
      Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex
      Live Example
      CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version )

      If you want to use Laravel Mix you must first ensure that Node.js and NPM are installed on your machine.
      Basic example to Debian and Ubuntu based Linux distributions:
      curl -sL | sudo -E bash - sudo apt-get install -y nodejs
      See more installation options LINK
      npm is installed with Node.js just check in linux terminal like below:
      node -v
      npm -v
      Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url
      proxy: 'http://localhost/mix/', to your installation processwire folder like:
      proxy: 'http://localhost/your-processwire-installation-folder/',
      Next install npm packages in your templates folder with command npm install
      Now, boot up the dev server npm run watch, and you're all set go!
      On completion, use the command npm run production to build styles and scripts in the dist folder
      Simple Usage ( Basic Command )
      Run npm install Watch npm run watch Build npm run production All files to Webpack build steps is inside file ( webpack.mix.js )
      Folder With all SCSS files is inside templates/src/scss
      All build styles and scripts is inside the ( dist ) folder
      Laravel Mix
      Feather Icons
      Web Font Loader
      Verlok Lazy Load
      Cookie Consent
    • By Marcel
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
    • By karian
      Hi, based on the work of @microcipcip and @gebeer  (see their posts here and here), I put together a Processwire + React boilerplate (profile).
      Github repo:

    • By webhoes
      I am working of a site for a sport organisation.
      All affiliated gyms can edit their profile. I have used the advaced mode so that if you create a new page under location the gym can login and edit their profile.
      i also want that they can add instructors as child of their profile and also are able to edit those instructors.
      I can not get passed the able to edit all subpaged or none.
      How should this be done? Or is this not possible?
    • By ethanbeyer
      I recently posted in this topic, but I decided to start my own thread because while I believe my issue is related to the one in that thread, they are not exactly the same:
      I have created a custom User Template in the method outlined in the docs. I am creating a directory, so it made sense that every page in the directory was a Directory Member, so they could log in and edit their own information while also keeping the entire directory protected behind a login wall.
      So the new user type is created: "directory-member".
      I then created two new roles: "member" and "directory-admin":
      The "member" only has the ability to View directory-member pages, and "profile-edit", which allows them to manage their own information. The "directory-admin" has the ability to edit any directory-member pages, and administer users. Some Directory Members are both, but all have at least the "member" role.
      The first hint that something was wrong was when I was testing a "member" user and I could not add a new item to a repeater on that profile. The url for the profile edit (this will be important shortly) is The repeater is set up to load new items through AJAX. If this option is turned off, the rest of this issue is no longer completely valid. But as I have found what I believe to be a pretty large issue in the Processwire codebase, I thought it worth bringing up.
      See, every page (even a user) has a $page->editUrl() method, and it returns a URL like this: That's all good and fine for users that have page-edit permissions, but if they don't, that link will resolve to the admin's equivalent of a 404.
      So the way that Processwire currently gets around this is by creating a specific editing area for a user to interact with only their profile: /admin/profile. And that works pretty nicely, except for the fact that nowhere is editUrl() ever made aware of the difference. editUrl() is not hookable, and whether or not a page is editable is based on the PagePermissions module.
      On top of that, there are several core modules that hardcode a search-and-replace (see InputfieldRepeater.module:627) where the editing screen is for Users. This doesn't allow for a huge degree of flexibility that is offered in other places throughout Processwire. If line 627 of InputfieldRepeater is changed from this:
      $editorUrl = str_replace('/access/users/edit/', '/page/edit/', $editorUrl); to this:
      $editorUrl = str_replace('/access/users/edit/', '/profile/', $editorUrl); ...the AJAX repeaters work. It's maddening!
      As is brought up in the thread I attached above, a lot of the features of page editing are missing within /admin/profile/, and it just makes for an altogether strange editing experience. A user who has "page-edit" permissions for templates other than directory-member, but does have "profile-edit" permissions, will see their user in the Page List, but cannot edit their Page unless they hover over the wrench and click the "Profile" link. It just seems - off.
      I think what this hinges on for me is that the editUrl() of the user should be "/admin/profile/" if that user is logged in (and their page should be editable from the Page List), or the "/admin/access/users/edit/" url; regardless of the URL, both links should resolve to the Page Edit screen, as the Profile Edit screen seems to be a unnecessarily neutered version of Page Edit.