Menu
I am new to Dojo and Dijit Themes and I found a Dijit Theme with bootstrap styling, here: http://thesociable.github.com/dbootstrap/.
I only need the use the theme with Dojo dijits and I really don´t know anything about the Dojo build system. My purpose is to integrate dijits with an already existing site.
How do I use the dijit theme? Does anyone know about any site that has a ready to use version, easy to integrate with Dojo Bootstrap.
I think I never saw something to hard to integrate.
707
asked Dec 12 '25 13:12
I could not find anyone using this or any pre-built version of it. Also, I could not get the build.py script to work (perhaps a Windows issue). However I managed to compile the Stylus theme files using Node.
I've made a fork of the dbootstrap project (NB: I do do not intend working on this fork, it's just for the purposes of this question. Although, a Dojo bootstrap theme is a nice concept, so might use it at some point).
I've made a zip of the compiled theme this includes an example page test.html, which shows how to use it. You could just use a standard <link /> tag that links directly to the compiled css:
<link
rel="stylesheet"
type="text/css"
href="scripts/bootstrap/theme/dbootstrap/dbootstrap.css"
/>
You could then style the page in the usual dojo manor:
<body class="dbootstrap">
However, the author includes some extra features that need to be imported using Javascript. I suggest you include the theme using a require (as shown in the example file and below):
<script type="text/javascript">
require([
"bootstrap",
"dojo/parser",
"dojo/ready"
], function(dbootstrap, parser, ready){
ready(function(){
parser.parse();
})
});
</script>
This ensures that bootstrap is loaded before the page is parsed for Dojo widgets. You also need to turn off automatic parsing of widgets on the page and set the location for the bootstrap module (and xstyle, used by dbootstrap) in dojoConfig, eg:
<script type="text/javascript">
var dojoConfig = {
"async": true,
"parseOnLoad": false,
"packages": [{
"name": "bootstrap",
"location":"/scripts/bootstrap",
"main":"main"
}, {
"name": "xstyle",
"location":"/scripts/xstyle"
}]
};
</script>
You'll also need to include the class attribute on <body> described above.
It's all a bit convoluted but the example file should make it a bit clearer. It should also, be noted that loading css in this manor is not really good practice, it will most probably lead to a delay in styling page widgets.
NB: There is a Dojo Bootstrap module that might interest you, if you are trying to achieve bootstrap style components in Dojo.
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
