Jump to content

Bootstrap 3 SASS Fontawesome Blank Site Profile


Recommended Posts

Since I've been working on a few projects where I used Bootstrap 3 and will be using it for future projects, I put together a blank site profile with Bootstrap 3 Sass, Fontawesome and a few markup render functions for Bootstrap dropdown menu, image carousel and accordion.

You can find it at https://github.com/gebeer/site-pwbs



How to install from zip:

  1. download the zip
  2. extract the folder "site-pwbs" into a clean ProcessWire install's root folder
  3. during install of ProcessWire choose the profile "bootstrap-sass-official fontawesome blank profile"

After installation

The last step after installing the profile is to install all assets with bower:

  • open a terminal in site/templates and execute "bower install"

How it works

The profile is based on the blank site profile that comes with PW 2.5 and uses the delegate template approach. It comes with a top navbar, a main container and a footer section. Rest is up to you.


gets compiled through compass. You can easily override BS variables and exclude BS components that you don't need. I intentionally did not add structure to the sass folder so you can structure your partials yourself as you please. There is only one folder "generic" with _mixins.scss whith a very lean and flexible breakpoint mixin that I discovered here.


Since I only use the BS javascript plugins I really need, I usually copy them over to my plugins.js file.


I use bower to install bootstrap-sass-original and fontawesome because it gives more flexibility than requiring them through ruby gems. This way you can tweak the BS and FA partials to your liking  (of course only if you don't intend to do "bower update" further down the road)



  • Like 8
Link to comment
Share on other sites

You can install the profile first and then open a terminal in site/templates and do "bower install".

Sorry, I now see that my instructions are not clear about the sequence of steps here. I amended that.

Link to comment
Share on other sites

  • 1 month later...
  • 4 months later...

Hello again.

A very basic feedback. I feel stupid... Maybe this is a feature (minimal install, just add what you need etc.), and not a bug. ^_^. In that case, of course, just pretend I said nothing.

I have had a problem with the collapsed navbar with bootstrap. It just wouldn't expand at all. Not good for mobile user, of course.

But the power of the ancestral RTFM technique gave me a hint.

Actually, the problem is trivial : the plugins.js included in the templates/js folder does include "transition" and "dropdown". However, "collapse" is nowhere to be seen.

Solution is very simple : copy and paste the collapse public class definition, from the bootstrap.js in the bower folder, into your plugin.js file.

As I said, maybe it is normal behavior, and I'm just being thick, here. But since this wonderful "out of the box" template doesn't allow collapsed navigation bar to expand straight away, maybe others will be as thick as I was. :-[

Thanks again for this nice profile.

  • Like 1
Link to comment
Share on other sites


happy to here that you like my profile :)

I tried to keep everything as minimal as possible. That is why the collapse plugin is not included in plugin.js by default.

But, thinking about it, it makes sense to include it by default. I will amend and update the profile on github.

EDIT: profile is now updated on github

Link to comment
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

  • Create New...