[IPFire Artwork] Bootstrap 4.1

Michael Tremer michael.tremer at ipfire.org
Wed Aug 1 13:27:00 BST 2018


On Tue, 2018-07-31 at 22:29 +0200, Maurice Gesswein wrote:
> OK, cool. Thanks for feedback Michael. I want to wait for Sven's feedback
> before I start with the needed revamps of the BS components. Than I'll add
> cards/tickets to Wekan.
> 
> Michael, one other thing I always forgot. How important is it for you to use
> Ubuntu as the primary copy text? Personally I like the font, but it's baseline
> is not correct vertically centered. If you want e.g. a perfect button you
> would need to include a small offset.
> Can we keep Ubuntu for bigger font cases like headlines and the IPFire logo
> and use another font (I'll make suggestions for it) for copy text, buttons,
> etc.?

I am not married to it. I liked it and it has served our purpose well.

I played around with Karla for the website which I also quite like because it is
an uncomplicated and clean font (I use it for Lightning Wire Labs), but it
didn't look right for IPFire. Maybe it works when headlines are Ubuntu?

Any suggestions for other fonts?

> 
> Best,
> Maurice
> 
> On Tue, Jul 31, 2018 at 4:42 PM Michael Tremer <michael.tremer at ipfire.org>
> wrote:
> > Hi,
> > 
> > On Tue, 2018-07-31 at 00:03 +0200, Maurice Gesswein wrote:
> > > Hey,
> > > 
> > > > We are all interested in the best possible outcome.
> > > 
> > > Signed!
> > > 
> > > 
> > > Sven, for which parts of the IPFire Website did you need to override a lot
> > of defaults and made the code pretty complex? I assume the following:
> > 
> > If I may answer some of that being a frontend rookie...
> > 
> > > Always fullscreen background-image at the top of the page
> > 
> > That should not be a problem. It is just a little bit conditional when
> > the background image is shown. It's not on all pages.
> > 
> > And the odd scaling it does now is something that I fucked up because I
> > didn't test enough.
> > 
> > > Burger menu which slides in from the left
> > 
> > That is quite a lot of work because the Bootstrap default is coming in
> > from the top. So either that is changed (and no idea if Bootstrap
> > allows that, but I will find out), or written from scratch.
> > 
> > > Left sidebar at the e.g. Features page and Blog
> > 
> > Bootstrap has something to build on. So that was fine.
> > 
> > > Especially in smartphone viewport
> > 
> > The donation page was a little bit more work because content moved
> > quite far and not only the columns collapsed. But there could be worse
> > :)
> > 
> > > Main navigation (top bar)
> > 
> > That is based on Bootstrap and there is some extra JS to make it go
> > from transparent to white.
> > 
> > > Should we use the default BS component for those parts? Are there anything
> > else?
> > > 
> > > What about the "responsive fluid" layout instead of the adaptive layout
> > (BS default)? Should we switch to adaptive? Would this make it significant
> > simpler and more compatible?
> > 
> > We don't just jump from one size to another. The website scales with
> > the screen size and only jumps to the viewports at a certain width.
> > 
> > I don't know which one that is, but I thought this was the way to go.
> > 
> > > Michael, thanks for Wekan.
> > 
> > No problem. I hope it works.
> > 
> > > > I am a little bit lost regarding what is so bad about this. It is not
> > pixel-perfect but I did not consider this to be a huge step back.
> > > 
> > > I see tons of minor and a couple of major things who broke. I could just
> > point you to Zeplin and say "please compare and fix it" ;)
> > 
> > I had a look at that and although I notice many things, I don't have
> > the eyes of a designer. So please feel free to point out what needs to
> > be changed. I might have missed it.
> > 
> > > Every pixel is documented there. But I think the primary goal of the
> > website has changed a bit. That's why I suggested to use default BS
> > components.
> > 
> > Well, maybe that could be a path for now. At least that will allow us
> > to move forward a little bit faster.
> > 
> > Sorry for being a little bit dumb about all this. Please bare with me.
> > We will get this done :)
> > 
> > Best,
> > -Michael
> > 
> > > 
> > > 
> > > Best, Maurice
> > > 
> > > 
> > > On Mon, Jul 30, 2018 at 5:32 PM Michael Tremer <michael.tremer at ipfire.org>
> > wrote:
> > > > Hi,
> > > > 
> > > > On Sun, 2018-07-29 at 00:52 +0200, Maurice Gesswein wrote:
> > > > > Hey all,
> > > > > 
> > > > > I'll try to make it fast and direct. No negativ criticism or rude
> > meanings are
> > > > > included and I really enjoy to be part of the IPFire project.
> > > > 
> > > > Please say what you need to say. We are all interested in the best
> > possible
> > > > outcome. Review of what has been done so far is important to make us
> > better as a
> > > > team.
> > > > 
> > > > > As we all know since the upgrade to BS4.1 tons of UI related things
> > broke or
> > > > > changed back to default behaviors at the new IPFire Website. Are we
> > willing to
> > > > > go the extra mile again to customize BS to the UI-design I designed or
> > do we
> > > > > want to switch to the default BS theme, just do some adjustments and
> > be live
> > > > > in a proper timeframe?
> > > > 
> > > > I thought this would be the better path in the long-term. We will just
> > be able
> > > > to import CSS fixes from Bootstrap and we have it all customized to what
> > we
> > > > need.
> > > > 
> > > > Maybe I broke more as I intended and maybe this wasn't the best path to
> > roll the
> > > > website out as soon as possible. But at least I think this is the best
> > way
> > > > forwarding thinking long-term.
> > > > 
> > > > As I said before, I haven't been polishing the mobile viewports too much
> > yet and
> > > > I severely broke the background image. Oops :) I wanted to collect some
> > items
> > > > and then I will sort them out all in one go.
> > > > 
> > > > > To be honest, I don't want to spend time and energy to think about how
> > to
> > > > > merge the status quo of dev.ipfire.org to the planned new website
> > design with
> > > > > a lot of QA work I actually already did.
> > > > 
> > > > Anything else that you suggest?
> > > > 
> > > > I am a little bit lost regarding what is so bad about this. It is not
> > pixel-
> > > > perfect but I did not consider this to be a huge step back.
> > > > 
> > > > > Brainwork for the future:
> > > > > When it comes to the WUI of IPFire, please think very careful if you
> > want to
> > > > > use BS as well. I prefer to go with CSSGrid and e.g. React if you want
> > to have
> > > > > something unique, modern and very mobile friendly.
> > > > 
> > > > Yes, it looks like Bootstrap is kind of a large framework for things
> > like this.
> > > > Customizing it is possible, but only within a certain range.
> > > > 
> > > > > Taskboard:
> > > > > Please setup Wekan asap and create todos which are currently spread
> > out in
> > > > > different mail threads. As I already wrote, I enjoy to do the UI und
> > UX part
> > > > > for IPFire and really want that IPFire will stand out from their
> > competitors
> > > > > some day, but I don't want to do a lot of orga stuff. A bit of orga
> > stuff on
> > > > > my side is totally fine and expected. Please support me in that. Such
> > a board
> > > > > will make us a lot more productive and transparent.
> > > > 
> > > > It's up: https://wekan.ipfire.org/
> > > > 
> > > > You can register and then I can give you admin rights or what ever is
> > needed to
> > > > create the items that you need.
> > > > 
> > > > Best,
> > > > -Michael
> > > > 
> > > > > 
> > > > > 
> > > > > Best, Maurice
> > > > > 
> > > > > 
> > > > > 
> > 



More information about the IPFire-Artwork mailing list