[luci] luci-theme-bootstrap3

[Max F. Albrecht]

Dear luci-developers,


I am currently in the process of re-implementing the
luci-theme-bootstrap[1].

Why? The old implementation was quite unusual:
instead of adjusting the markup to use bootstrap’s classes,
the complete bootstrap CSS source was changed manually
to fit the classes onto the markup already found in luci.

While not changing the markup *is* a valid way to make a bootstrap
theme, manually changing the compiled styles means that:

a) the current theme is very hard to maintain
b) because of that, it still uses bootstrap 1.4.x (current is 3.1.x)
c) while there exist themes *for* bootstrap (different design, same
classes), it is not possible to use them in luci

I want to stress that this is not to critique the original implementor:
at the time, this was the only way to do it at all: Bootstrap is built
with the `less` CSS preprocessor, and they only relatively recently added
a `extend` function which *now* makes it possible to implement this
properly[2].
Example: bootstrap has the class `.btn {foo:bar;}`, but luci’s markup
has `.cbi-button`.
By declaring `.cbi-button {&:extend(.btn all);}` in less, the resulting
CSS would be
`.btn,  .cbi { foo: bar; }`.

So, this is exactly what I started to do:

- starting point: themestrap[3], a simple project to build bootstrap
themes (the normal kind), using less, and grunt as a build tool
- set up themestrap to use the old bootstrap version that
luci-theme-bootstrap was based on
- merged the luci-bootstrap repo
- Then, I also merged the changes that happened in the luci-repo since
the theme was imported (fun with git!)
- made a small script to effectively diff the old and the new css, to
find the manual changes
- implemented the old manual changes in lesscss using `extend()`
- migrate everything to bootstrap v3.1.x (still in progress)
- `scp` the resulting CSS directly onto my router, checking that nothing
breaks.

Some context (this maybe makes it easier for non-designers to understand
what I am trying to achieve):
At our local freifunk community (weimarnetz[4]) we use bootstrap for the
website, and so I started theming it [5]. Since this is a “normal” theme
using the default classes, we can already use the same resulting CSS in
other projects that use bootstrap as a basis, e.g. meshkit[6],
nsupdate[7] ( some small visual bugs still need to be fixed –this is a
work in progress).
By using themestrap as a base, this also would enable *anybody* to
easily build (and maintain)
 their own luci-themes: in most cases there would just be a custom
variables.less setting colours, fonts, etc.
Making a new visually-distinct default theme for openWRT would be
possible in the same way.

So, while I am working on finishing the migration, I would like to
gather some feedback from the luci community; and I also have some
questions:

- Since grunt is just a build-tool, I plan to maybe extend it even
further: instead of only generating the CSS, it could directly output a
valid OpenWRT-package for that theme. I am unsure if this is a good
idea, and how it would work in practice.
- Once it’s finished, would you be interested in using this as a (basis
for) new default theme?
- If yes, what would be a good way to ‘combine’ my git repo with the
luci repo? The only idea I have is keeping it separate and just
importing the results from the /dist folder into luci. Any other way
would effectivly add node.js/grunt/etc as build-dependencies to luci
(which I don’t think anyone wants)
- I have heard about ongoing work on `luci2`. What is the state of this
project from a frontend perspective? Will the markup stay more or less
the same or is it more of a moving target?

You can find the current state of my work here:
<https://github.com/eins78/luci-theme-bootstrap3>


Regards,
 Max

[1]: https://github.com/nutbolt/luci-theme-bootstrap
[2]: http://www.scottlogic.com/blog/2013/03/08/extends-in-less.html
[3]: https://github.com/divshot/themestrap
[4]: http://weimarnetz.de
[5]: http://code.178.is/bootstrap-theme-freifunk/
[6]: http://meshkit.weimarnetz.de
[7]: https://u.dyn.weimarnetz.de