Styling map web applications with Bootstrap

[JorgeVinagre]

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

[ReneRubalcava]

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.

[JorgeVinagre]

Thanks

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

Thanks very much

[JorgeVinagre]

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.

[JeffPace]

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.

[ReneRubalcava]

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.

[MattDriscoll]

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

[ReneRubalcava]

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

[JorgeVinagre]

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

[JorgeVinagre]

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