Questions for the CSS based on the mockup and technical question related to Server and GIT
Hello, I have some questions:
What is the base-font size? 16px (SM) or 20px (M)?
It is okay if I use rem for the font-size? (It’s the default in bootstrap).
How we handle the headings do we use h1-h6 with given sizes or are the sizes defined via classes 4xl-xs? (Keine Ahnung ob das so zu verstehen ist. Also meine Frage ist ob wir für die Überschriften die Schriftgrößen bei H1-H6 definieren oder wir die Größen über Klassen festlegen also 4xl-xs?)
What are the fallback fonts? Ubuntu, “Helvetica Neue”, Arial, sans-serif?
The grid is the default Bootstrap Grid (12 columns) with a padding of 24px instead of the default 30px?
Do we use the color naming from the Zeplin Project or a semantic color naming like brand-primary, brand-info etc.?
If I create a note file for myself, do I also put this file on git?
How often do you want me to submit the work, is once a day enough?
I’m not familiar with the Python webserver it is better to serve less files (like in HTTP) or more small files (like in HTTP/2)?
Can I remove all the HTTP prefixes in the template file and put only //. At the moment both methods are used.
Hey Sven,
see my inline comments...
On Tue, Mar 28, 2017 at 10:32 PM, Sven sven.hoehn@posteo.de wrote:
Hello, I have some questions:
What is the base-font size? 16px (SM) or 20px (M)?
I use 16px for body text in all viewports. Only in some cases the text sizes are different in some viewports for the same case. For the WUI (IPFire Admin Interface) I'm going to use 14px as the default size.
It is okay if I use rem for the font-size? (It’s the default in bootstrap).
If I convert rem into px later on based your finished pages and I get the px size back I defined than I'm happy :) I leave the decision to you. I can't use rem in Sketch. So I'll provide always px.
How we handle the headings do we use h1-h6 with given sizes or are the sizes defined via classes 4xl-xs? (Keine Ahnung ob das so zu verstehen ist. Also meine Frage ist ob wir für die Überschriften die Schriftgrößen bei H1-H6 definieren oder wir die Größen über Klassen festlegen also 4xl-xs?)
Use the way which do you think works better :)
What are the fallback fonts? Ubuntu, “Helvetica Neue”, Arial, sans-serif?
I suggest the common fallback. I can't remember a case where the webfont was not able to load.
The grid is the default Bootstrap Grid (12 columns) with a padding of 24px instead of the default 30px?
Correct. e.g. https://www.dropbox.com/home/IPFire/IPFire-Share/Website?preview=Website+-+S...
Do we use the color naming from the Zeplin Project or a semantic color naming like brand-primary, brand-info etc.?
I prefer names as provided in Zeplin. They are named how they look and not for what they are planed to use. It avoids confusion in cases like: A blue is named "info-blue" and later on it should be used for a donut-chart fragment as well. "info-blue" doesn't fit anymore.
If I create a note file for myself, do I also put this file on git?
How often do you want me to submit the work, is once a day enough?
I’m not familiar with the Python webserver it is better to serve less files (like in HTTP) or more small files (like in HTTP/2)?
Can I remove all the HTTP prefixes in the template file and put only //. At the moment both methods are used.
Hi,
On Tue, 2017-03-28 at 23:54 +0200, Maurice Gesswein wrote:
Hey Sven,
see my inline comments...
On Tue, Mar 28, 2017 at 10:32 PM, Sven sven.hoehn@posteo.de wrote:
Hello, I have some questions:
What is the base-font size? 16px (SM) or 20px (M)?
I use 16px for body text in all viewports. Only in some cases the text sizes are different in some viewports for the same case. For the WUI (IPFire Admin Interface) I'm going to use 14px as the default size.
It is okay if I use rem for the font-size? (It’s the default in bootstrap).
If I convert rem into px later on based your finished pages and I get the px size back I defined than I'm happy :) I leave the decision to you. I can't use rem in Sketch. So I'll provide always px.
How we handle the headings do we use h1-h6 with given sizes or are the sizes defined via classes 4xl-xs? (Keine Ahnung ob das so zu verstehen ist. Also meine Frage ist ob wir für die Überschriften die Schriftgrößen bei H1-H6 definieren oder wir die Größen über Klassen festlegen also 4xl-xs?)
Use the way which do you think works better :)
I think it is best to change the bootstrap template to what we need and then we are fine.
Bootstrap 4 has also extra classed for "display" headings. Maybe it is those that we should change. Probably just the default ones.
What are the fallback fonts? Ubuntu, “Helvetica Neue”, Arial, sans- serif?
I suggest the common fallback. I can't remember a case where the webfont was not able to load.
How do you guys feel about the Ubuntu font anyways?
The grid is the default Bootstrap Grid (12 columns) with a padding of 24px instead of the default 30px?
Correct. e.g. https://www.dropbox.com/home/IPFire/IPFire-Share/Website?preview =Website+-+Start+-+XL+-+GRID.png
Do we use the color naming from the Zeplin Project or a semantic color naming like brand-primary, brand-info etc.?
I prefer names as provided in Zeplin. They are named how they look and not for what they are planed to use. It avoids confusion in cases like: A blue is named "info-blue" and later on it should be used for a donut-chart fragment as well. "info-blue" doesn't fit anymore.
I think we should go with the bootstrap names again. We exactly have colours for the success, info, danger, etc. states and I used that in all the existing markup already. So going with that way we don't have to change too much in the HTML and just get the right colour everywhere.
The fewer stuff we have to customise the better.
If I create a note file for myself, do I also put this file on git?
Could do. Depends on what it is really. Generally I would like to keep everything open and accessible for everyone. So we can see what the status is, review what we need to review and so on.
How often do you want me to submit the work, is once a day enough?
I would prefer small and logical steps. That doesn't have to be once a day. Usually that is more often :)
You can use branches for stuff as well. I usually make sure that by the end of my working day everything is in Git - just to have a backup.
I’m not familiar with the Python webserver it is better to serve less files (like in HTTP) or more small files (like in HTTP/2)?
This will just be used to serve the HTML. The assets like JS and CSS will be served by nginx later. I try to keep the number of files as low as possible because that means fewer requests.
However, I do not see that there will be more files required. You should not need to create more JS and CSS will just be modifying the Bootstrap template which is one (rather large) file.
Can I remove all the HTTP prefixes in the template file and put only //. At the moment both methods are used.
Some of the websites are served over http, some over https.
We deliver assets from static.ipfire.org in production, so that nobody needs to download these files multiple times when they browser across domain names on the same webapp.
Hope this answers all these questions so far. Please do send more if there are any.
What is the progress so far? How are you doing? I cannot tell by the questions you are asking :)
-Michael
On 29. Mar 2017, at 13:54, Michael Tremer michael.tremer@ipfire.org wrote:
Hi,
On Tue, 2017-03-28 at 23:54 +0200, Maurice Gesswein wrote:
Hey Sven,
see my inline comments...
On Tue, Mar 28, 2017 at 10:32 PM, Sven sven.hoehn@posteo.de wrote:
Hello, I have some questions:
What is the base-font size? 16px (SM) or 20px (M)?
I use 16px for body text in all viewports. Only in some cases the text sizes are different in some viewports for the same case. For the WUI (IPFire Admin Interface) I'm going to use 14px as the default size.
It is okay if I use rem for the font-size? (It’s the default in bootstrap).
If I convert rem into px later on based your finished pages and I get the px size back I defined than I'm happy :) I leave the decision to you. I can't use rem in Sketch. So I'll provide always px.
How we handle the headings do we use h1-h6 with given sizes or are the sizes defined via classes 4xl-xs? (Keine Ahnung ob das so zu verstehen ist. Also meine Frage ist ob wir für die Überschriften die Schriftgrößen bei H1-H6 definieren oder wir die Größen über Klassen festlegen also 4xl-xs?)
Use the way which do you think works better :)
I think it is best to change the bootstrap template to what we need and then we are fine.
Bootstrap 4 has also extra classed for "display" headings. Maybe it is those that we should change. Probably just the default ones.
At the moment I think to just edit the _variable.scss from bootstrap and then add the missing pieces. There are all the definitions for fonts, sizes, colours etc.
What are the fallback fonts? Ubuntu, “Helvetica Neue”, Arial, sans- serif?
I suggest the common fallback. I can't remember a case where the webfont was not able to load.
How do you guys feel about the Ubuntu font anyways?
I like the Ubuntu font.
The grid is the default Bootstrap Grid (12 columns) with a padding of 24px instead of the default 30px?
Correct. e.g. https://www.dropbox.com/home/IPFire/IPFire-Share/Website?preview =Website+-+Start+-+XL+-+GRID.png
Do we use the color naming from the Zeplin Project or a semantic color naming like brand-primary, brand-info etc.?
I prefer names as provided in Zeplin. They are named how they look and not for what they are planed to use. It avoids confusion in cases like: A blue is named "info-blue" and later on it should be used for a donut-chart fragment as well. "info-blue" doesn't fit anymore.
I think we should go with the bootstrap names again. We exactly have colours for the success, info, danger, etc. states and I used that in all the existing markup already. So going with that way we don't have to change too much in the HTML and just get the right colour everywhere.
The fewer stuff we have to customise the better.
If I create a note file for myself, do I also put this file on git?
Could do. Depends on what it is really. Generally I would like to keep everything open and accessible for everyone. So we can see what the status is, review what we need to review and so on.
I copied some examples from the Bootstrap documentation in there for the naming of the media-queries and the scss mixin, so that I don’t have to go back every time.
How often do you want me to submit the work, is once a day enough?
I would prefer small and logical steps. That doesn't have to be once a day. Usually that is more often :)
You can use branches for stuff as well. I usually make sure that by the end of my working day everything is in Git - just to have a backup.
It’s the first time that I work with Git, so I have no experience with it.
I’m not familiar with the Python webserver it is better to serve less files (like in HTTP) or more small files (like in HTTP/2)?
This will just be used to serve the HTML. The assets like JS and CSS will be served by nginx later. I try to keep the number of files as low as possible because that means fewer requests.
However, I do not see that there will be more files required. You should not need to create more JS and CSS will just be modifying the Bootstrap template which is one (rather large) file.
At the moment there are 3 css files and 3 js files if I remember, for less files I would go down to just one minified-CSS and one local minified-JS file on the webpage. On my end I will combine the needed Bootstrap files plus the customisation via @import in the scss file and compile only the one css file.
Can I remove all the HTTP prefixes in the template file and put only //. At the moment both methods are used.
Some of the websites are served over http, some over https.
So at the moment there is no plan to bring everything over to HTTPS?
We deliver assets from static.ipfire.org http://static.ipfire.org/ in production, so that nobody needs to download these files multiple times when they browser across domain names on the same webapp.
I leave it as it is.
Hope this answers all these questions so far. Please do send more if there are any.
:-)
What is the progress so far? How are you doing? I cannot tell by the questions you are asking :)
Now that I think to have all the pieces I put them together and we will see what happens.
-Michael
Greetings, Sven
ipfire-artwork@lists.ipfire.org
-
Maurice Gesswein -
Michael Tremer -
Sven