10 Replies Latest reply on May 11, 2012 12:02 PM by Stévan Le Meur

    Early HTML/CSS/jQuery for the Admin

    Gabriel Cardoso Newbie

      In order to try a new approach for the development process, it was decided to implement a version of the admin in HTML/CSS/jQuery using Twitter Bootstrap. We do not expect this to be the final interface (both in terms of content and visual design) but want to verify how much of this client side can be used in the development.


      The HTML was written using basically Bootstrap components. I tried to write as little CSS as possible (css/admin.css).


      The code can be seen at: https://github.com/cardosogabriel/gatein-client


      I want to make clear that this early version has the following problems:

      - HTML is not valid because of the use of elements <rel="tooltip"> in tags <button> and <a>. This is a bootstrap's element to enable tooltip. So maybe we need to think in another way to enable the tooltips…

      - I used an approach that fixes the sidebar. Although scrolling only the content to be a good strategy, we could have problems in displays with lower resolutions since the sidebar can grow with more portals or menu options. So I'll check if is better to put a scroll bar in the sidebar to (which reinforces the app aspect) or to make it not fixed (scroll with the content).

      - I fixed the title / main actions. However, the fixed elements don't work well with the responsive design that comes with Bootstrap. So this approach requires some coding in the responsive CSS.

      - The CSS was not written using LESS CSS. Need to learn about it.

      - The page was just tested in modern browsers (FF 12 and Safari

      - Some other elements are not being well displayed when the with is decreased. Need to check what is happening.

      - Some javascript I wrote is just for now (e.g. when you click "Save changes" or radio option "Private" and the button "Add Permission".


      With this experiment I could conclude that Bootstrap offers nice UI elements and saves a considerable work. A negative point is that more elements in the HTML are necessary (to make their structure work) and some of them are not valid on W3C validator. A good point is that we could achieve a acceptable layout with not much CSS customization.


      Considering that to have a little bit more code won't harm the accessibility, I believe it is an interesting approach to save time. Just remembering that we need to define better the how the top bar / sidebar are presented and to work on the visual design / transitions.