topic Re: Styling map web applications with Bootstrap in ArcGIS JavaScript Maps SDK Questions

Styling map web applications with Bootstrap

JorgeVinagre — Thu, 06 Dec 2012 15:21:27 GMT

HI there

Does anyone here tried to style web map applications with Twitter Bootstrap?
How can i exclude completly the CSS used by esri in the demos and include those from bootstrap. I mean how can i make the measurement tool look like with twitter bootstrap?
Anyone has an example or know witch direction to take?

Thanks

Re: Styling map web applications with Bootstrap

ReneRubalcava — Thu, 06 Dec 2012 16:32:01 GMT

I use Bootstrap, but only the CSS and not the jQuery stuff anymore.
Technically it's just Bootstrap, since the main dev of the project left Twitter.
http://twitter.github.com/bootstrap/

When it comes to styling the built-in esri/dojo dijits, it may not do exactly as you want and there may be some conflicts between the two in terms of class names. You can make a custom build of the stylesheet from the bootstrap page to leave out Forms styles for example. Bootstrap will also add styles for DOM elements like tables, forms, lists and so on.

Bootstrap won't just plug-in to the dijits, you'll need to either wrap them in something like a form/table or use something like dojo/dom-class to add the Bootstrap defined styles to a dijit.
http://dojotoolkit.org/reference-guide/1.7/dojo/dom-class.html

Another option is to look at how Bootstrap does some of it's styling and try to mimic it on Dijit elements. One of Dojos annoying Dijit qualities is the amount of classnames and dom elements that get created in a dijit, so you may have to get creative.

I have a sample that demonstrates using Bootstrap (and Backbone.js) to create a ToC/Legend Menu that may be if use.
http://www.odoe.net/apps/legendtoc/
The source is on github
https://github.com/odoe/legendtoc

Hope that helps a bit.

Re: Styling map web applications with Bootstrap

JorgeVinagre — Thu, 06 Dec 2012 17:10:23 GMT

Thanks

Having dojo as a dependency for the api is an awfull choice

Thanks very much

Re: Styling map web applications with Bootstrap

JorgeVinagre — Fri, 07 Dec 2012 10:18:01 GMT

I use Bootstrap, but only the CSS and not the jQuery stuff anymore.
Technically it's just Bootstrap, since the main dev of the project left Twitter.
http://twitter.github.com/bootstrap/

When it comes to styling the built-in esri/dojo dijits, it may not do exactly as you want and there may be some conflicts between the two in terms of class names. You can make a custom build of the stylesheet from the bootstrap page to leave out Forms styles for example. Bootstrap will also add styles for DOM elements like tables, forms, lists and so on.

Bootstrap won't just plug-in to the dijits, you'll need to either wrap them in something like a form/table or use something like dojo/dom-class to add the Bootstrap defined styles to a dijit.
http://dojotoolkit.org/reference-guide/1.7/dojo/dom-class.html

Another option is to look at how Bootstrap does some of it's styling and try to mimic it on Dijit elements. One of Dojos annoying Dijit qualities is the amount of classnames and dom elements that get created in a dijit, so you may have to get creative.

I have a sample that demonstrates using Bootstrap (and Backbone.js) to create a ToC/Legend Menu that may be if use.
http://www.odoe.net/apps/legendtoc/
The source is on github
https://github.com/odoe/legendtoc

Hope that helps a bit.

One more thing.
If you dont want to use the built in widgets, at all, you can only import the compact version of the js api and then you are "free" to use whatever you wish. Am i right?

Personally i think the css,layouts and digits are fine to make a demo or a proof of concept but for an application they are too resctritive.
If by any change a client doesn´t want to have wigets floating in the screen or if you need a regular html form your are back to square one.

Re: Styling map web applications with Bootstrap

JeffPace — Fri, 07 Dec 2012 11:53:57 GMT

Thanks

Having dojo as a dependency for the api is an awfull choice

Thanks very much

I couldn't disagree more. While not the most popular, dojo is simple and powerful and the exact right tool for what is needed.

Re: Styling map web applications with Bootstrap

ReneRubalcava — Fri, 07 Dec 2012 13:55:00 GMT

I agree with Jeff. I think prior to 1.7, some of the Dojo modules seemed clunky, but the documentation has vastly improved since then and Dojo provides just about everything I need to get things done. As a matter of fact, I have eliminated all third-party libraries from my projects.

My comments on the Dojo/Dijit annoyances have more to do with css customizations, because it just seems like a lot of divs in divs with multiple class names get created and it can get a little tricky at times. jQueryUI isn't much different in that respect though, so pOtatoe, potAtoe.

Re: Styling map web applications with Bootstrap

MattDriscoll — Fri, 07 Dec 2012 15:53:33 GMT

If you don't want to use the dojo Dijits you can use Dojo Bootstrap. (Twitter bootstrap using Dojo instead of jQuery)

GitHub: https://github.com/xsokev/Dojo-Bootstrap

Then you can not include Claro or whatever stylesheet you typically use and style the Esri widgets similarly to Twitter Bootstrap.

Also, it seems as if someone created a Bootstrap theme for Dojo: https://github.com/thesociable/dbootstrap

Re: Styling map web applications with Bootstrap

ReneRubalcava — Fri, 07 Dec 2012 16:52:50 GMT

That puts a smile on my face. Thanks for the links!

Re: Styling map web applications with Bootstrap

JorgeVinagre — Fri, 07 Dec 2012 17:10:26 GMT

That puts a smile on my face. Thanks for the links!

WOW 🙂

Well what is awfull is not Dojo, is beeing forced tu use it

Re: Styling map web applications with Bootstrap

JorgeVinagre — Wed, 02 Jan 2013 15:00:57 GMT

That puts a smile on my face. Thanks for the links!

odoe, have you tried Bootstrap for dojo? I´m not used to Git(never used it) and im not being able to put it to work.
Do you have any complete exmaple or at least point me to an exmaple?

Thanks

Re: Styling map web applications with Bootstrap

JorgeVinagre — Mon, 11 Feb 2013 15:40:49 GMT

That puts a smile on my face. Thanks for the links!

Hi there

Definitely i am unable to ues/compile or whetever the dijit theme. Does anyone know if there is some boilerplate to use the bootstrap dijit theme?

By the way, does Dojo have any theme builder like JQuery Theme builder?

Thanks