[PoC] Bootstrap UI

[Andrew Shadura]

Hello everyone,

Last month I played with Bootstrap UI for Kallithea, and have achieved
something. The archievement is actually very little one, there's loads
of work ahead, and everyone's welcome to help.

== What is the plan ==

The templates we use already support Bootstrap CSS to some extent, but
they require some polishing to look better. However, just adding the
Bootstrap CSS makes Kallithea look a bit Bootstrap-ish with lots of
things broken, however :) There are two basic approaches to migrate to
Bootstrap:

 *) throw away all CSS we have and write something from scratch —
    doesn't work well as the UI becomes unusable while the rewrite
    isn't finished

 *) combine both existing CSS and Bootstrap and convert the UI chunk by
    chunk, step by step — and here we also have two options:

   o) First Bootstrap CSS, then Kallithea CSS, so the latter overrides
      the former:

      - Benefits: Possible to override Bootstrap styling without lots
        of !important, possibly a bit cleaner CSS code
      - Disadvantage: Kallithea CSS redefines a lot of things
        completely from scratch, so this approach doesn't really work
        easily without throwing away half of the CSS code (UI breaks)

   o) First Kallithea CSS, then Bootstrap CSS, so the latter overrides
      the former:

      - Benefits: it's possible to convert things gradually
      - Disadvantages: lots of !important overrides where Kallithea
        CSS and Bootstrap CSS conflict, not easy to detect unused CSS
        code

I chose the latter approach as showing the best results in the short
term :)

== What is already done ==

 *) Bootstrap tooltip instead of custom ones — helps get rid of some
    YUI code too, yay!

 *) Bootstrap navbars and dropdown menus

 *) Bootstrap progressbar in the statistics

 *) Some parts of interface wear Bootstrap styling automagically
    without needing to be fine-tuned — but probably need fixing anyway.

== What is broken ==

Many things, most notable being the changelog and many tables.

== Where's the code ==

I plan to use changeset evolution to maintain a commit series which I
will regularly rebase against the latest development branch. For it, I
have set up a clone of Our Own Kallithea instance running the same code
and the same database, but with Sean Farley's evolve patches applied,
and with my own Bootstrap patches applied too. Today I will rebase the
code and publish the link as a follow-up to this mail.

== Comments, ideas? ==

Please ask me anything :)

-- 
Cheers,
  Andrew
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: application/pgp-signature
Size: 836 bytes
Desc: OpenPGP digital signature
URL: <http://lists.sfconservancy.org/pipermail/kallithea-general/attachments/20150421/81d44531/attachment.sig>