Bootstrap 3 with concrete5.6

Permalink
Hey guys,

I'll preface my question with this - I'm not new to web development, but I am a total noob with concrete5. Still getting my head around the terminology like blocks and page types.

I need to build a responsive, mostly static site with concrete5.6 built on the bootstrap 3 grid system (upgrading to 5.7 isn't an option for this project). However it seems that 5.6 ships with bootstrap 2 out of the box - how can I upgrade this to bootstrap 3? I couldn't find any minimal bootstrap 3 themes for 5.6, is my best option here building my own theme?

Thanks in advance

View Replies:
JohntheFish replied on at Permalink Reply
JohntheFish
The bootstrap2 in the c5 core is for the dashboard and edit dialogs.

TO make a theme work with another bootstrap, its best to leave all the c5 core alone and to generate a bootstrap that is namespaced to only apply within the your theme.

For the css that is easy. A LESS or SASS compiler will do it for you. If you also want the javascript, you will need to do a bit more messing around to prevent it getting into an argument with the core bootstrap.
Sas632 replied on at Permalink Reply
Thanks for the reply.

Would it be easier if I built the pages in HTML/CSS on my end with my text editor of choice, then concrete-ized the pages by appending the relevant php tags and so on?
Any issues using a CDN for bootstrap and libraries like font awesome?

Cheers
JohntheFish replied on at Permalink Reply
JohntheFish
Kind of defeats the reason for using a CMS.

There are several bootstrap based themes in the marketplace.

A CDN is OK if you are using the standard css and js. However, because you will need namespaced css and js, standard files from a CDN are likely to lead to conflicts with the c5 core.
Sas632 replied on at Permalink Reply
I see. In that case, how would I go about installing bootstrap 3 only to apply to my specific theme? Follow up question, can I edit an entire page's HTML instead of messing around it with individual blocks and widgets?

Thanks!
JohntheFish replied on at Permalink Reply
JohntheFish
With Bootstrap you can recompile the less source to be scoped to a particular ID. Or you could take the entire css and wrap it as perhttp://www.concrete5.org/documentation/how-tos/designers/easily-sco...

The catch comes if you want to use any of the bootstrap javascript. If you just pull in the bootstrap js files, they will conflict with the core versions when they are also loaded (when you are logged in). So you would need to namespace the javascript as well.

Its a lot easier if you use the same bootstrap version as the c5 core. Then you can just use the core javascript. There are some free bootstrap starter themes in the marketplace you could use as a starting point.