[IPFire Artwork] Website

Maurice Gesswein zerpixelung at gmail.com
Wed Apr 5 23:02:52 CEST 2017

First output looks very promising for me. Thanks Sven!

It seems to be that something went weird with the colors at Zeplin. At the
thumbnails they look good, when you open a screen they doesn't. Good news:
Hex codes are correct! :) I'll figure out what went wrong and perhaps I
found another tool like Zeplin which can be archived by Michael ;p Stay
tuned, still checking the feature set.

Next thing is that Zeplin interprets the properties of e.g. a font correct
but might be unclear for others. Please use the properties ABOVE the CSS
box as the primary information about the selected element. Than your
mentioned opacity issue should be clear. The colors should look like this:
rgba(0, 0, 0, 0.6).

I found several things I would like to fix:

   - I noticed that I have to build up the Sketch file in a different way
   that icons will be exported correct as 24x24px size. At the moment they are
   cropped. At their proper size of 24x24px it will be a lot easier to align
   those vertically correct. I'll update the Icon screen asap.
   - Please recheck all opacity values. A lot of them are not correct. I
   guess that's due to the CSS output of Zeplin and how I set up the Sketch
   file. Use the values which are shown above the CSS box.
   - Please also recheck the line-heights of each font-style. Some of them
   has strange values.
   - Font weight on buttons should be medium/600.
   - Ghost buttons doesn't have dropshadows
   - Lots of elements become smaller at <992px width. That should not
   - It seems to be that the gaps of the grid were not set to 24px instead
   of 30px. Aren't they? If this would cause too much trouble, we can leave it
   as it is. It doesn't have a bad impact.
   - "Fire" of IPFire in the top navigation is not bold/medium
   - The buttons has lots of different heights. Please set a fixed height
   of 36 for default buttons and 48px for big buttons
   - The touch target area is missing at the default buttons (48px height).
   That's important to provide a good user experience at touch devices. The
   clickable area must be big enough that fat finger hits it the first time ;)
   - At viewport <992px the burger icon is not left aligned anymore. But
   you already said that you doesn't spend much time at the navigation so far.
   - Some more minor issues... But for now it should be enough to fix :)

Do we want to set up a Trello board for all these and upcoming todos? I'm
also fine by using Git issues for that.


On Wed, Apr 5, 2017 at 8:02 PM, Sven <sven.hoehn at posteo.de> wrote:

> and now how we proceed?
> Are you writing down a list with all the things to change?
> Do we talk so that everybody express what he thinks and what to change?
> > On 5. Apr 2017, at 19:55, Michael Tremer <michael.tremer at ipfire.org>
> wrote:
> >
> > Hi,
> >
> > it is all up on http://dev.ipfire.org
> >
> > If you want to view fireinfo, just add the "dev" to the domain. For
> example:
> >
> >   http://fireinfo.dev.ipfire.org
> >
> > Do the same for planet, wishlist, etc...
> >
> > -Michael
> >
> > On Wed, 2017-04-05 at 18:11 +0100, Michael Tremer wrote:
> >> Hi,
> >>
> >> On Tue, 2017-04-04 at 22:18 +0200, Sven wrote:
> >>>
> >>> Hello everybody,
> >>> I’m thinkin’ that the coding of the home page has reached a point
> where we
> >>> need the site live to discuss.
> >>
> >> Great!
> >>
> >>>
> >>> It’s not pixel perfect, the mobile menu is only the bootstrap version
> from
> >>> top
> >>> down and not from the left like in the mookups, the SCSS code is still
> very
> >>> chaotic, the image-scaling dosen’t work like expected and the svg
> scaling
> >>> dosen’t work at all in Safari, but it’s good enough to have a
> conversation.
> >>>
> >>> @Michael it is possible to include html markup between these brackets
> {{
> >>> _("IPFire") }} for example {{ _(“IP<strong>Fire</strong>") }}
> >>
> >> No. The translation function escapes all HTML.
> >>
> >>>
> >>> @Maurice I have troubles with the colours, in zeplin for example the
> >>> background is $blue_grey_900 but with a opacity of 0.6 when I put the
> same
> >>> values in my css the colour seems darker.
> >>> But its easier to go all of these details when you see it in your
> browser.
> >>>
> >>> Greetings,
> >>> Sven
> >>
> >> -Michael
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20170405/b265b929/attachment.html>

More information about the IPFire-Artwork mailing list