[luci] Bootstrap theme for LuCI

Fri Feb 3 17:43:52 CET 2012

Hi Jow,

Thanks for having a look. I know it breaks in several modules but this is mostly due to the fact that the modules spit out inline styles and reuse html elements in sloppy ways. I'm using a non-intrusive way of fixing these anomalies: the <body> gets a class="node.title" so that every node can be styled separately if required. I'll document this on the GitHub repo so that people can go ahead and fix the styling in their particular cases.

The width is fluid with a maximum of 940px. That's a deliberate choice: in for instance the OpenWrt theme labels got separated very far from their corresponding input elements. I really think the pages that cause horizontal scrolling should be fixed so that it is also possible to configure your OpenWrt device on for instance a tablet or smartphone. Could you add these as an issue on the GitHub repo?

I don't mind going through some often-used modules and fixing them so that they put out nicer html, as I think that is a better way to solve these problems than patching up every single future theme.

Cheers,

David Menting | Nut & Bolt

On 3 feb. 2012, at 14:20, Jo-Philipp Wich wrote:

> Hi David.
> 
>> I've created a new theme for LuCI. It's clean, modern and based on
>> Twitter Bootstrap. It's been tested on a TP-Link WR1043n and a Carambola
>> under Firefox, Safari and IE8. The responses so far are quite positive,
>> so if anyone feels like it it would be great to include it in the
>> development repository.
> 
> It looks great indeed! I just tried it on a 10.03.1 release.
> I could imagine this being the new default theme for the next release :)
> 
> Unfortunately it breaks in various places but I can understand that its
> not up to the theme to fixup underlying HTML deficiencies, this must be
> sorted out separately.
> 
> One thing I noticed is that it seems to use fixed (or minimal width?)
> table cells which introduces horizontal scrolling various places, e.g.
> the VLAN setup. Is this an inherent property of the bootstrap framework
> or a deliberate choice in the CSS? I haven't looked into the styling
> rules yet.
> 
> Thanks for your contribution, very appreciated!
> 
> Regards,
> Jow
> _______________________________________________
> luci mailing list
> luci at lists.subsignal.org
> https://lists.subsignal.org/mailman/listinfo/luci

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.subsignal.org/pipermail/luci/attachments/20120203/2074cde0/attachment.html>