Dojo FAQ – How do I use Bootstrap with Dijit?

By on August 13, 2014 12:15 pm

DojoFAQ

Bootstrap is a framework created by Twitter’s developers to consolidate their HTML/CSS design and widgets. Bootstrap provides a clean responsive design, but the set of widgets it includes is limited, especially when compared to what’s available in the Dijit library. The CSS/HTML theme can be used independently of the widgets, but how do you use the Bootstrap theme with the Dijit library?

As you may have guessed, it’s not quite as simple as including the relevant Bootstrap CSS files. However, Dijit supports custom themes, so with a bit of work the elements of the Bootstrap theme could be ported to Dijit widgets. Fortunately, this was just what the dbootstrap project set out to accomplish.

For a better idea of what this Dijit/Bootstrap marriage looks like, check out the dbootstrap gallery, a modified version of Dijit’s Theme Tester that also includes dgrid. Let’s take a closer look at dbootstrap and how to use it in your Dojo application.

Working with dbootstrap

The quickest way to get started with dbootstrap is to download a prebuilt version from the Releases page. To include it to your application you’ll need to add the dbootstrap class to your body element, just as with the standard Dijit themes. Unlike the standard themes, however, you don’t add the CSS with a <link> tag to your page. Instead you require the dbootstrap module when you start up your application, before creating any widgets.

The dbootstrap module automatically attaches the theme CSS using xstyle (for the curious, we explained how to do this in a recent FAQ). It also enables another beloved Bootstrap perk: it applies a patch to dijit/_AttachMixin (or dijit/_TemplatedMixin for Dojo versions prior to 1.9) that allows Font-Awesome icons to be used anywhere in your widget templates.

Loading the dbootstrap module requires adding the package to your project like any other dependency, e.g. as an entry in your packages config (see instructions for more details).

Working on dbootstrap

Styles in dbootstrap are written in stylus, so to use a modified version of dbootstrap it first must be built to generate the CSS. One way to accomplish this is to integrate the dbootstrap build into your existing Dojo build. Another option is to use the provided build script to generate a standalone package.

Conclusion

The dbootstrap project has a come a long way toward its goal of bringing the Bootstrap to Dijit. It also shares the same liberal licensing and CLA process as Dojo. If you appreciate the both the look of Bootstrap and the comprehensiveness of Dijit, it couldn’t hurt to try this theme out on one of your Dojo projects.

Learning more

We cover custom styling and theme creation in depth in our Dojo workshops offered throughout the US, Canada, and Europe, or at your location. We also provide expert JavaScript and Dojo support and development services, to help you get the most from JavaScript and Dojo. Contact us to discuss how we can help.

Comments

  • Tom Wayson

    It’s worth mentioning the Dojo-Bootstrap project (https://github.com/xsokev/Dojo-Bootstrap), which offers a way to use _actual_ Bootstrap CSS (layouts, components, etc) in a Dojo site. Dojo-Bootstrap is just a port of the Bootstrap jQuery plugins to Dojo, so you use Bootstrap markup/CSS instead of Dijit’s, which makes it easy for anyone that is familiar w/ Bootstrap (i.e. most designers) to build a responsive site. Dojo-Bootstrap is also compatible w/ Bootstrap 3.x.

    dbootstrap is fine if you want to make a site built w/ Dijit *look* like Bootstrap site, but it is still going to *behave* like a Dijit site, and you are not getting a lot of the benefits that Bootstrap offers out of the box (responsive layouts, components that are designed to be mobile-first, etc).

    Both projects have their purpose: if you want to use Bootstrap layouts and components, but have a dependency on Dojo, Dojo-Bootstrap is ideal. If you just want to reskin a Dijit site to look like Bootstrap (2.x), use dbootstrap.

  • @tomwayson:disqus That’s a fair point… we did call the post “Bootstrap with Dijit” on purpose. While the Bootstrap widgets look nice and are responsive, they really lack the capabilities (object store bindings, a11y, i18n, widget lifecycle, handling of large data sets) that are what make Dijit more interesting to us.

  • Tom Wayson

    Good point about Dijit capabilities. That should be appended to my previous comment under reasons to use dbootstrap.

    Typically, I’ll try to get the best of both worlds by using Dojo-Bootstrap for a responsive layout and eas(ier) to style UI, and then I’ll add my own custom widgets that inherit from _WidgetBase and/or other Dojo UI components like dGrid that can take advantage of object store bindings, the widget lifecylce, and i18n.

    I did notice the title of the post :), but just thought it was worth mentioning in case any readers conflate Dijit w/ Dojo and came away w/ the impression that dbootstrap is the only option.

  • Manachi

    It seems the dbootstrap gallery link is dead now. Anyone aware if this is published somewhere else? Very curious to see it.

  • As far as I know, dbootstrap has been abandoned unfortunately. There is however a nice modern flat theme for Dojo 1.x available at https://github.com/dojo/themes/tree/master/flat that may bridge the gap until Dojo 2 is released.

  • Manachi

    Thanks for the link! That does look nice & clean. Much appreciated.