Bootstrap 3 SASS Fontawesome Blank Site Profile

[gebeer]

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

Features

• bootstrap-sass-official
• font-awesome SASS version
• jquery
• modernizr
• render functions for:
  • BS3 dropdown menu
  • BS3 accordion from PageArray
  • BS3 carousel from PW images array

Prerequisites

• compass
• bower

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.

 

CSS
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.

 

JS
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)

 

Enjoy!

[adrianmak]

should I first install the asset before going to install pw's profie ?

[gebeer]

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.

[TLT]

This is just perfect.

Thanks a great big massive lot, mister gentleman sir !

[gebeer]

You're welcome. I'm happy that this is of use for someone

[TLT]

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.

[gebeer]

@TLT

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