[IPFire Artwork] New bootstrap skin

Maurice Gesswein maurice.gesswein at ipfire.org
Tue Feb 19 23:36:11 GMT 2019

Hi Rachid,

OK, cool. Sounds promising. Let's check out some limitations and
possibilities so that I don't design things which are hard to implement or
difficult to change at the AdminLTE Theme. As well as some questions.

Questions (just to be sure ;) ):

   1. AdminLTE is based on Bootstrap 3 with the default Grid System/Layout?
   2. The Navigation-Panel at the left hand side (<aside> in the code)
   lives outside of the grid, isn't it? So it doesn't take e.g. 2 of 12 cols
   and 10 cols are left for the "content-wrapper"?
   3. Using display:flex and/or display:grid to e.g. align things easily
   vertically within a <div> is possible?

Things I'm going to leave them as they are:

   1. Overall layout settings (column grid).
   2. Using the "card" ui-component as the standard content container.
   3. During my deeper look into AdminLTE I noticed that the Theme is quite
   good by using the same spacings, font-size, etc. at all viewports. I'll
   keep this.
   4. UX (user experience) of the side navigation.

Things I would like to adjust:

   1. I would like to go with the Material Icon Set from Google
   All icons are placed within a 24x24px (1:1 size) bounding box. Means
   that every icon has the same size. 24x24px is the default size I would like
   to use. I already saw in your screenshots that you resized the icon size.
   So I guess no problem here, right?
   2. Slightly different spacings within cards. I see you already did that
   in your first iteration. We are fine here?
   3. My best practice core rule to create ui-components is to use sizes
   and spacings which are dividable by 4px at least. 8px is preferred. So
   don't expect classical 5px steps from me. Those are outdated ;)
   4. Using another font. Probably with other sizes and line-heights.
   5. Other colors.

If you can give me a yes or no to each point would be great. Please feel
free to ask questions.

Besides all of that we could follow another approach. We keep AdminLTE as
it is. Just changing the colors (that it matches with the IPFire brand) and
build all pages by using the standard widgets, ui-components and modules
which are already predefined. After that we fine-tune things. Replacing
icons, font, adjust spacings, etc.

Furthermore I can do some research to find another free dashboard Bootstrap
theme which is based on Bootstrap 4 and closer to the size metrics I
prefer. AdminLTE is quite old. Perhaps there are good alternatives out
there. Did you already had a look, Rachid?

I'm sure that Michael has also a meaning about that and want to comment it

Looking forward for your replies.

Best, Maurice

On Mon, Feb 18, 2019 at 5:36 PM Rachid Groeneveld <
rachidgroeneveld at hotmail.nl> wrote:

> Hi Maurice,
> I’m planning on moving forward with the skin yes, that being said I’m no
> front-end developer, but I can try to build what someone else has
> photoshopped.
> Hint hint 😉 It’s not that I can’t find a way to create a “nice looking
> design” on my own, it just takes me a whole lot longer.
> So in short, if someone has a design/mockup that fits perfectly into this
> dashboard theme and wants it built, let me know. In the meantime I will
> just fix the problems logged on github and make sure it works as intended.
> The main challenge is a config screen for the skin, so things can be set
> without having to manually open the database/settings file.
> Cheers,
> Rachid
> *From:* Maurice Gesswein <maurice.gesswein at ipfire.org>
> *Sent:* zondag 17 februari 2019 22:56
> *To:* Rachid Groeneveld <rachidgroeneveld at hotmail.nl>
> *Subject:* Re: [IPFire Artwork] New bootstrap skin
> Hey Rachid.
> Sorry for my late reply. I was impressed by your IPFire Bootstrap Theme,
> based on my concept redesign. Good work and thanks for sharing.
> Are you interested to go further with that and develop the complete WUI
> experience which would be used as the official IPFire WUI Theme?
> Best,
> Maurice
> On Sun, Feb 10, 2019 at 11:31 AM Rachid Groeneveld <
> rachidgroeneveld at hotmail.nl> wrote:
> 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
> 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.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20190220/923eefea/attachment.html>

More information about the IPFire-Artwork mailing list