[PoC] Bootstrap UI

Aurélien DESBRIÈRES aurelien at hackers.camp
Tue Apr 21 09:23:36 EDT 2015

Andrew Shadura <andrew at shadura.me> writes:

> 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 :)

Hi Andrew,

Very interesting, do you have a link to show your progress?

I am interested about bootstrap / kallithea for https://bull.codes

to have the same design on all the stuff.


Aurélien Desbrières

Bull.Codes              -       Software Community Coding
Hackers.Camp            -       OutDoor Hacktivities
Hackers-Lab.org         -       Free Software & Mechatronics Laboratory

More information about the kallithea-general mailing list