[IPFire Artwork] New bootstrap skin

Rachid Groeneveld rachidgroeneveld at hotmail.nl
Sun Feb 10 10:43:16 GMT 2019


Mea culpa, pressed send too early; continued mail below

From: IPFire-Artwork <ipfire-artwork-bounces at lists.ipfire.org> On Behalf Of Rachid Groeneveld
Sent: zondag 10 februari 2019 11:31
To: ipfire-artwork at lists.ipfire.org
Subject: [IPFire Artwork] New bootstrap skin

Hi all,

As pointed out by Michael, maybe the newly created skin for the WUI belongs in this mailing list as opposed to development (actually makes sense).
I’ve used bootstrap and in the history I can find some argumentation to use CSS-grid instead, due to bootstrap being bloated. While this is true, it’s still very responsive and it’s possible to remove quite a lot from it, however that will require re-work. Not saying that a CSS-grid implementation won’t require some re-work to achieve the same result. I have not formed an opinion on the matter, but since I knew bootstrap, I went with that.

Let me introduce myself, for those not in the development list. I’m Rachid Groeneveld a tinkerer with some programming/scripting skills, mostly C# I must admit. Anyways, I like the IPFire project a lot, I’ve been using it for over a year now; started out on a Banana Pi R1 and recently moved to an APU2 (best choice to date). I was missing some functionality in the WUI (OpenVPN client) and I like the adminlte design, which made me decide to contribute to the project to see if I could implement both. While the first was only kicked off, the second proved to be more realistic. I could find a few earlier attempts, but none of the sources were available anymore ☹


  1.  Bootstrap theme thread: https://forum.ipfire.org/viewtopic.php?f=17&t=14878
  2.  Concept redesign: https://dribbble.com/shots/2076375-IPFire-Redesign-Concept (full image: https://dribbble.com/shots/2076375-IPFire-Redesign-Concept/attachments/372604) by Maurice Geßwein (I see he’s in this group as well)
  3.  Bootstrap discussion: https://lists.ipfire.org/pipermail/ipfire-artwork/2018-July/000188.html
  4.  CSS grid discussion: https://lists.ipfire.org/pipermail/ipfire-artwork/2018-May/000159.html

So I got excited and thought: why not give it a shot? There is obviously still room for improvement and the colors don’t match (note: I am by no means a front-end developer, I like to tinker with the back-end more). So in order to allow people to complement the skin and make sure it doesn’t get lost in a long forgotten mail thread, I decided to post it on github for the world to see (and use): https://github.com/Saiyato/ipfire-skin-dashboard

It shouldn’t feature too many hard-coded (hard-scripted) fields anymore, feel free to point them out or create a PR to fix them.
It’s been a bit silent since August 2018, so let’s get this discussion up-and-running again 😝

If I should focus on IPF3, that’s fine too, I’m still a bit scared to move there, because I would need to migrate production for testing, I don’t have too much time to test my behaviour on the Banana Pi on a daily basis. But that’s a different discussion.

In response to the CSS grid discussion, I haven’t modified bootstrap, I just created a few overrides (in different files), so updating the framework should give you any trouble.

I’d like to thank Maurice Geßwein for the inspiration I needed to start this endeavour.

NB: the wekan-board as discussed in previous threads was not reachable for me, that’s why I just created a few printscreens to give you a sense of where I’m standing now.

Looking forward to all replies!

Cheers, Rachid

PS: I incorporated font-awesome and glyphicons (they differ in size, so don’t use both in the same list), this makes iconing very easy. @Maurice they didn’t feature your icons, so I had to change them for now 😉
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20190210/ac9aa1a6/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: legacy_page.png
Type: image/png
Size: 127533 bytes
Desc: legacy_page.png
URL: <https://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20190210/ac9aa1a6/attachment-0003.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: sorting_item.png
Type: image/png
Size: 171774 bytes
Desc: sorting_item.png
URL: <https://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20190210/ac9aa1a6/attachment-0004.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: dashboard.png
Type: image/png
Size: 222285 bytes
Desc: dashboard.png
URL: <https://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20190210/ac9aa1a6/attachment-0005.png>


More information about the IPFire-Artwork mailing list