Twitter Bootstrap UI Lib

[Jeffrey Johnson]

Hi Folks,

One of the initial steps we've identified as part of the complete
UX/UI review of GeoNode is to adopt a CSS/design framework. By
starting with a common set of layout and component styles for the
Django templates of GeoNode, we enable both some better defaults as
well as simplifying the learning curve for customization and branding
for deployments.

In surveying the landscape of available CSS frameworks, we've
identified Twitter's Bootstrap project as being the best candidate for
our needs. No doubt many of you have either encountered Bootstrap or
even worked with already, as it one of the most active and popular
open source projects and a great compliment to what we're doing with
GeoNode.

A short list of the benefits that we're excited about:

* Full grid layout
* Great cross-platform support
* Ease of customization
* Great documentation
* Potential for mobile layouts through responsive design (this is not
something we're targeting initially, but individual sites could
implement)

If you're interested in checking out Bootstrap, there's lots of
general and technical information available at
http://twitter.github.com/bootstrap/ and you can even check out the
site over at https://github.com/twitter/bootstrap/ There is also a
pretty comprehensive list of examples of sites that use boostrap here
http://builtwithbootstrap.com/ or here
http://twitter.github.com/bootstrap/examples.html

Please feel free to respond with your questions, comments, concerns,
thoughts etc.

Jeff

[jude mwenda]

+1

--
Regards,

Jude Mwenda
Skype id: jmwenda
Twitter: www.twitter.com/judemwenda
Web: www.africangeogeek.com
   
"Was ist mein Leben, wenn ich nicht mehr nützlich für andere."
Johann Wolfgang von Goethe

[David Winslow]

1. Has Bootstrap been tested with ExtJS?
2. I see that the Bootstrap homepage advertises it as a "HTML, CSS, and JavaScript" framework.  How much JavaScript? How does this interact with our discussion about jQuery from earlier today?
3. What problems did you encounter with our current CSS framework? Did you ask for help? How does Bootstrap address them?

--

David Winslow

OpenGeo - http://opengeo.org/

[Noli Sicad]

Works with jQuery.

" Bring Bootstrap's components to life—now with 12 custom jQuery plugins."
http://twitter.github.com/bootstrap/javascript.html

Noli

On 3/9/12, David Winslow <dwin...@opengeo.org> wrote:
> 1. Has Bootstrap been tested with ExtJS?
> 2. I see that the Bootstrap homepage advertises it as a "HTML, CSS, and

> JavaScript" framework. How much JavaScript? How does this interact with
> our discussion about jQuery from earlier today?

> 3. What problems did you encounter with our current CSS framework? Did

[Jeffrey Johnson]

Looks like Luke has already done a bit of work to get bootstrap and
extjs playing nicely together based on the latest commit in their
fork. Im going to give this a test now.

https://github.com/eldarion/geonode/commit/71caa3fc36d4efb7bdf82f380ac56fd6c26e8190

Jeff

[Chris Holmes]

I just spent a bit of time on this, since I was curious what the
'need' for a CSS framework is - like isn't django already a framework?
Is this another level of abstraction to confuse things?

I would like to echo David's query of what direct advantages adding
bootstrap to the mix has over the current css situation. Like how will
it make life easier, and how can we ensure it doesn't confuse people
more?

But I did find http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/
which helped me understand a bit more. Basically a css framework
'packages a number of ready-made options for designing and outlaying a
webpage'.

[David Winslow]

Yes, CSS frameworks are useful - if we hadn't built GeoNode's templates on Boilerplate (http://code.google.com/p/css-boilerplate/) we probably would have ended up finding or developing something similar.  We have a pretty similar layout for most pages and redoing it for each page wouldn't have made much sense.

--

David Winslow

OpenGeo - http://opengeo.org/

[Jeffrey Johnson]

Yep, should have made that clear, we are proposing to *switch* css
frameworks, not just implement one for the first time.

IMO, the biggest advantage to switching to bootstrap is precisely the
good integration we get with jquery and the access to all of the nice
jquery UI plugins [1] which are based on now well established
design/ui patterns, and are becoming more and more common in 'modern'
sites across the web. I think that as we begin to properly design the
new social features and other generally webby stuff and bring it into
mainline geonode, it seems like it will be a nightmare to implement
much of this kind of thing properly with extjs. Seems to me that using
jquery for this kind of thing (and styling it with bootstrap), and
using extjs and geoext for the map composer and other map components
strikes a good balance and division of responsibilities between these
widget frameworks.

Jeff

[1] http://twitter.github.com/bootstrap/javascript.html

[Chris Holmes]

Ah, interesting. So this isn't 'add a css framework', it's replace
boilerplate with bootstrap? So yeah, it'd be good to hear the relative
advantages. Though it looks like the last boilerplate release was
2007, at a 0.3, so that alone may be a decent reason to switch to a
more active open source project. Bootstrap appears to have 108
developers contributing in the last year, versus one for boilerplate.

[Jeffrey Johnson]

Yep, a quick poke around the "Built with Bootstrap" site
http://builtwithbootstrap.com/ will quickly give you an idea of the
kind of sites and UI design patterns that Bootstrap enables.

Its also a bit more than replace boilerplate with bootstrap ... its
also "buy into jquery and get all the nice UI components at the same
time"

Jeff

[Ariel Nunez]

From a Python developer perspective and having developed at least 5 different GeoNode themes (including one with bootstrap) I can say that the best advantages are Documentation (including easy to understand examples) and HTML5 support.

After those ones I would include 'shorter learning curve' for non web designers. We had an awesome css developer help us with the first implementation, but he is no longer contributing to the code base. Understanding the current implementation takes a lot of css reading (as opposed to documentation reading).

I will try to answer David's questions:

>> 1. Has Bootstrap been tested with ExtJS?

I have done it, there were some problems related to default ul/li styling and padding for tables that broke the layout in the map composer.  They ended up being a short list [1]

>> 2. I see that the Bootstrap homepage advertises it as a "HTML, CSS, and JavaScript" framework.  How much JavaScript? How does this interact with our discussion about jQuery from earlier today?

When I used it, I only used the CSS / HTML part (being able to use HTML5 elements and syntax and good looking and easy to understand CSS classes. The Javascript part is optional, and is mostly used for things like carrousels, navigation bars with dropdown menus and other 'interactivity'. There is no real need to use those features in GeoNode and there is no need to use the provided Javascript plugins.

That said, the Javascript functionality is based on jQuery, so if we end up choosing to use it, we will be in good shape.

>> 3. What problems did you encounter with our current CSS framework? Did you ask for help? How does Bootstrap address them

The main problems I have had with the existing implementation are:

a) Navigation bar: I could never figure out how to make the active tab be properly styled, the functionality is supposed to be there but does not work in the current GeoNode.

b) Making elements correctly float left when they need to (this is a problem in css that the framework does not help with, not really a bug in itself, just missing functionality).

c) Styling forms and buttons (The current metadata editing form uses the default and could be a lot tighter and prettier by default [2]). Bootstrap excels at handling forms and different kinds of buttons.  Here are some of the examples of the GeoNode theme I was able to create with bootstrap: [3] [4].

I don't remember asking for CSS help after Chris finished the original implementation two years ago, I have been able to find fixes to the issues that were really important after a lot of hit and miss, the current implementation is not 'seriously broken' just harder to modify and not really receiving any improvements.

My point is that bootstrap is easier to modify by backend developers who know just basic HTML and CSS than the current solution, hacks take less time and give a more usable and sexier result. It has better documentation, will continue to be improved for a while (given the level of popularity it currently has) and is a better starting point for the UI/UX redesign than our legacy implementation, specially given that the original developer is not around anymore.

Ariel.

[1] https://gist.github.com/2004400

[2] http://twitter.github.com/bootstrap/base-css.html#forms

[3] http://cl.ly/3R1D2e10410A1g2D1Q0c

[4] http://cl.ly/0t072e361N2E3c3i3835

[Noli Sicad]

I know that Opengeo is ExtJS bias / prefer to use ExtJS and I think it
also applies to GeoNode, I am not mistaken.

I prefer to use jQuery (i.e. jQtouch, jQuery mobile), HTML and CSS so
things can work as well with in mobile Touches devices (iPad, iPhones
and Android phones and tablets). (BTW, I am aware about Sencha Touch
(ExtJS)).

Would GeoNode client works without ExtJS, just HTML and CSS (+
Javascript, jQuery?) ?

Thanks.

Noli

On 3/9/12, Ariel Nunez <ingenie...@gmail.com> wrote:
> From a Python developer perspective and having developed at least 5
> different GeoNode themes (including one with bootstrap) I can say that the
> best advantages are Documentation (including easy to understand examples)
> and HTML5 support.
>
> After those ones I would include 'shorter learning curve' for non web
> designers. We had an awesome css developer help us with the first
> implementation, but he is no longer contributing to the code base.
> Understanding the current implementation takes a lot of css reading (as
> opposed to documentation reading).
>
> I will try to answer David's questions:
>

> *>> 1. Has Bootstrap been tested with ExtJS?*

> I have done it, there were some problems related to default ul/li styling
> and padding for tables that broke the layout in the map composer. They
> ended up being a short list [1]
>

> *>> 2. I see that the Bootstrap homepage advertises it as a "HTML, CSS, and

> JavaScript" framework. How much JavaScript? How does this interact with

> our discussion about jQuery from earlier today?*

> When I used it, I only used the CSS / HTML part (being able to use HTML5
> elements and syntax and good looking and easy to understand CSS classes.
> The Javascript part is optional, and is mostly used for things like
> carrousels, navigation bars with dropdown menus and other 'interactivity'.
> There is no real need to use those features in GeoNode and there is no need
> to use the provided Javascript plugins.
>
> That said, the Javascript functionality is based on jQuery, so if we end up
> choosing to use it, we will be in good shape.
>

> *>> 3. What problems did you encounter with our current CSS framework? Did
> you ask for help? How does Bootstrap address them*

[Jeffrey Johnson]

On Thu, Mar 8, 2012 at 5:45 PM, Noli Sicad <nsi...@gmail.com> wrote:
> I know that Opengeo is ExtJS bias / prefer to use ExtJS and I think it
> also applies to GeoNode, I am not mistaken.
>
> I prefer to use jQuery (i.e. jQtouch, jQuery mobile), HTML and CSS so
> things can work as well with in mobile Touches devices (iPad, iPhones
> and Android phones and tablets). (BTW, I am aware about Sencha Touch
> (ExtJS)).
>
> Would GeoNode client works without ExtJS, just HTML and CSS (+
> Javascript, jQuery?) ?

Note there is another thread about this topic, but the short answer is
that if the Layer and Map info pages could be made to work with just
OpenLayers instead of GeoExt/GXP this is certainly possible ... and
also I think some work has gone into making GeoExt work on mobile too.
The Map Composer (http://demo.geonode.org/maps/new) is pretty heavily
dependent on GeoExt and I dont know if it makes sense to run something
like that on mobile in the browser ... if so, it would take quite a
bit of work I suppose.

Jeff

[Sebastian Benthall]

Just weighing in...

I think Cholmes is making a good point in noting that Bootstrap is an active project.  It looks like it's what Twitter uses for their own UI, and Twitter's been pushing their identity as a company that takes its open source contributions seriously lately, so there's good reason to think that institutional backing won't go away.  So Bootstrap is likely to stay up to date with evolving web standards and users' UI expectations.  (Thinking ahead to the next hardware platform...)

As somebody who put a lot of work into the front-end of GeoNode, got some distance from the project, and then checked it out again recently for the UX  survey, I think I can say: Boilerplate was sufficient for what it needed to be at the time, but if there's anything that can make it easier to make GeoNode's interface smoother and more dynamic, that would be really valuable.  The UI is showing its age.  Meanwhile, decision to use ExtJS for the non-GeoExt UI elements was based partly on a (entirely valid) concern for adding dependencies, but also partly as a matter of convenience.  If somebody is willing to put in the effort to transition to a more modern framework, and it's been tested for compatibility, I'm very +1 on this.

[Luke Hatcher]

Hi David (and others),

I wanted to jump in as well since I've been doing some work
integrating Bootstrap and GeoNode. You raise some great questions and
I'm glad to see the conversation starting. In reading through the full
thread both last night and again this morning, I echo much of what
Ariel has said previously, but will address each of these items as
well.

On Mar 8, 2:30 pm, David Winslow <dwins...@opengeo.org> wrote:
>    1. Has Bootstrap been tested with ExtJS?

It has. Beyond a minor issue with making sure you don't use ExtJS's
css reset after the Bootstrap styles there were just a few tweaks
needed when the two stylesheets were used together. Ariel's gist was
sufficient for my use as well.

>    2. I see that the Bootstrap homepage advertises it as a "HTML, CSS, and

>    JavaScript" framework.  How much JavaScript? How does this interact with
>    our discussion about jQuery from earlier today?

The javascript is purely optional but does enable components. The
scripts are quite minimal and should make any integration painless
even if were to need to modify the scripts.

>    3. What problems did you encounter with our current CSS framework? Did

>    you ask for help? How does Bootstrap address them?

I think the greatest advantage of Bootstrap is that it provides a
complete story for both building a great default style and layout
while giving you a ton of options for all of the common widgets and
patterns that are used across a site. What Bootstrap provides beyond
most other CSS grids is a full collection of components and styling
patterns. The best showcase for this is (IMHO) is forms rendering,
which is something I'm finalizing in my prototypes today and makes
everything from log in forms to updating layer details look great with
no additional work beyond a template tweak.

Some other stuff that I was thinking about:

* the built in customization hooks which can enable simple drop-in
branding changes site wide (the stylesheets are generated from LESS
source files with variables for things like color scheme all the way
down to the size of the grid)
* documentation that is great
* active community both discovering and fixing bugs
* an ecosystem that is popping up with even more components and add-
ons that would be available to geonode installations

I'm at a conference this week but will be checking in throughout the
day and working more on this later.

Luke

[Jeffrey Johnson]

Im assuming that since Seb and Ariel are both +1 on this and there are
no seriously strong objections from anyone that we can continue moving
forward with this?

It makes sense to pick up the discussion of jquery in the other thread
though since I think there is not yet unanimity on that front.

Jeff

[David Winslow]

Yep, seems like it.  What are the next steps?

--

David Winslow

OpenGeo - http://opengeo.org/

[Jeffrey Johnson]

The branch is already in progress. I gave it a quick test last week
and its working as is
https://github.com/eldarion/geonode/tree/bootstrap

I think the next steps are the overall template refactoring to remove
inline js and css from the templates and to also go through all the
templates and make sure that all the blocks are named consistently and
then to document this.

Luke, do you have any input here since you are the one working on this?

Jeff

[Luke Hatcher]

Sound good by me.

The latest thing I've worked through is getting form rendering all wrapped up. Since that I've been working on the other templates and need to get this all pushed up.

Luke