3

I'm researching HTML5/CSS3/JavaScript libraries/frameworks for a large single page application, and I found Twitter Bootstrap and BoilerplateJS. Both libraries/frameworks look very interesting and we're considering using both of them. However, we would like to use both together. Since we don't have experience with either library/framework, we thought we'd post a question (or two) regarding the combining of the two.

Is it possible to use Twitter Bootstrap with BoilerplateJS? If so, how would one go about using both together?

Thanks.

Hasith
  • 1,749
  • 20
  • 26
lmttag
  • 2,499
  • 4
  • 26
  • 30

2 Answers2

2

I have looked at Twitter Bootstrap, HTML5 Boilerplate type of projects when designing BoilerplateJS. I see above framework very much complementing than competing.

BoilerplateJS is proposing an architecture/structure to organize your JS code in the project. Twitter bootstrap helps you on responsiveness, UI Widgets, styling, etc where BoilerplateJS has no specific guilde lines proposed.

I think it is always a smart idea to use BoilerplateJS (very much focused on JS structure) along with Twitter Bootstrap or HTML5 Boilerplate (Widgets, CSS, HTML best practices) I believe.

Hasith
  • 1,749
  • 20
  • 26
  • 1
    Thank you for responding. How would you implement Twitter Bootstrap in a new project using BoilerplateJS? Would you replace just the theme stuff under the baseModule? Or would you replace the whole baseModule with the Twitter Bootstrap CSS, JS, and images? – lmttag Jan 10 '13 at 05:47
  • I would recommend replacing the whole base module, if TwitterBootstrap can cover all of it.. the base module is there for completeness as a Sample application, may be the practices there are not the best, for example I'm not happy about the theme stuff we have there. But you may learn the way DomController position base components on the application template, that will help you to modularize Twitter Bootstrap Menu, etc. too (though it is not a must to modularize those). – Hasith Jan 10 '13 at 08:39
2

BoilerplateJS is independent from any UI framework like Twitter Bootstrap, and they can be effectively combined together to create nice single-page apps.

Twitter Bootstrap helps you to build consistent UI, and you can use it to create Views for your components, while BoilerplateJS helps to orchestrate your components.

You may know that it is recommended to use MVVM/MVC framework with BoilerplateJS. If you choose KnockoutJS like i did, you will probably need to use custom bindings for Twitter Bootstrap elements in your views.

E.g. I am using it in my projects to seamlessly bind UI elements like grouped buttons and typeaheads to the viewmodel. You need only to refer to such binding code in your viewmodel to be able to use something like this in your view:

<label class="control-label"><strong>How many rooms:</strong></label>
<div class="btn-group" data-toggle="buttons-checkbox">
    <button type="button" class="btn btn-info" data-value="1" data-bind="checkedButtons: RoomNumber">1</button>
    <button type="button" class="btn btn-info" data-value="2" data-bind="checkedButtons: RoomNumber">2</button>
    <button type="button" class="btn btn-info" data-value="3" data-bind="checkedButtons: RoomNumber">3+</button>
</div>

Note the checkedButtons custom binding here, loaded into the viewmodel with 

define(['Boiler', './../../kobuttonbinding' ], function (Boiler, kobuttonbinding) {
Stas Slabko
  • 506
  • 5
  • 14
  • Thank you also for responding. We've used knockout.js before, so your custom bindings makes sense. However, I have the same questions for you as I posted to Hasith above-i.e., how did you take the Twitter Bootstrap files (CSS, JS, and images) and incorporate them into your BoilerplateJS project? – lmttag Jan 10 '13 at 05:52
  • @lmttag just refer to the bootstrap files in your `index.html` (which hosts all components of your single-page app) as usual: `` `` `` – Stas Slabko Jan 10 '13 at 07:52
  • TwitterBootstrap files may no go in to the src folder at all. You may keep the CSS, JS, images outside may be at the same level folders as index.html. Position it somewhere as a starting point and see if it suits your structure, else refactor. Generally your 'src' folder is for your very own code of the application, so TwitterBootstrap JS files may be considered it as libraries. – Hasith Jan 10 '13 at 08:47