static/scss/base/_variables.scss - Issue 29474565: Issue 5350 - Setup Help Center Boilerplate

Delta Between Two Patch Sets: static/scss/base/_variables.scss

Issue 29474565: Issue 5350 - Setup Help Center Boilerplate (Closed)

Left Patch Set: Created June 26, 2017, 10:52 a.m.

Right Patch Set: Diff Created July 6, 2017, 7:34 a.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
1 // This file is part of help.eyeo.com.	1 // This file is part of help.eyeo.com.
juliandoucette 2017/06/26 12:37:34 Is there a reason we are not using website-default Is there a reason we are not using website-default variables? ire 2017/06/27 14:18:38 Done. I've removed the variables that were doing t Show quoted text On 2017/06/26 12:37:34, juliandoucette wrote: > Is there a reason we are not using website-default variables? Done. I've removed the variables that were doing the same thing as the website-default.
2 // Copyright (C) 2017 Eyeo GmbH	2 // Copyright (C) 2017 Eyeo GmbH

3 //	3 //

4 // help.eyeo.com is free software: you can redistribute it and/or modify	4 // help.eyeo.com is free software: you can redistribute it and/or modify

5 // it under the terms of the GNU General Public License as published by	5 // it under the terms of the GNU General Public License as published by

6 // the Free Software Foundation, either version 3 of the License, or	6 // the Free Software Foundation, either version 3 of the License, or

7 // (at your option) any later version.	7 // (at your option) any later version.

8 //	8 //

9 // help.eyeo.com is distributed in the hope that it will be useful,	9 // help.eyeo.com is distributed in the hope that it will be useful,

10 // but WITHOUT ANY WARRANTY; without even the implied warranty of	10 // but WITHOUT ANY WARRANTY; without even the implied warranty of

11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the	11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

12 // GNU General Public License for more details.	12 // GNU General Public License for more details.

13 //	13 //

14 // You should have received a copy of the GNU General Public License	14 // You should have received a copy of the GNU General Public License

15 // along with acceptableads.org. If not, see <http://www.gnu.org/licenses/>.	15 // along with acceptableads.org. If not, see <http://www.gnu.org/licenses/>.

16	16

17 // Colors //////////////////////////////////////////////////////////////////////	17 // Colors //////////////////////////////////////////////////////////////////////

18	18

19 // Grayscale	19 // Grayscale

20	20

21 $white: #fff;	21 $white: #fff;

22 $pale-white: #ECECEC;	22 $gray: #D2D2D2;
juliandoucette 2017/06/26 12:37:34 Is this like offwhite? Is this like offwhite? ire 2017/06/27 14:18:38 Yes. I'm using the names from the Style Guide docu Show quoted text On 2017/06/26 12:37:34, juliandoucette wrote: > Is this like offwhite? Yes. I'm using the names from the Style Guide document juliandoucette 2017/07/03 15:37:54 Acknowledged. Note: The names in the style guide Show quoted text On 2017/06/27 14:18:38, ire wrote: > On 2017/06/26 12:37:34, juliandoucette wrote: > > Is this like offwhite? > > Yes. I'm using the names from the Style Guide document Acknowledged. Note: The names in the style guide were not mandates. Feel free to change them wherever it makes sense to match our/your code style. ire 2017/07/04 09:33:14 Okay. I am fine with the names as they are so I wi Show quoted text On 2017/07/03 15:37:54, juliandoucette wrote: > Acknowledged. > > Note: The names in the style guide were not mandates. Feel free to change them > wherever it makes sense to match our/your code style. Okay. I am fine with the names as they are so I will leave them if you have no objections. juliandoucette 2017/07/04 10:34:40 The format used on aa.com and in website-defaults Show quoted text On 2017/07/04 09:33:14, ire wrote: > Okay. I am fine with the names as they are so I will leave them if you have no > objections. The format used on aa.com and in website-defaults is $color-$shade. Would you mind keeping that format? ire 2017/07/04 11:19:03 Okay I will Show quoted text On 2017/07/04 10:34:40, juliandoucette wrote: > On 2017/07/04 09:33:14, ire wrote: > > Okay. I am fine with the names as they are so I will leave them if you have no > > objections. > > The format used on http://aa.com and in website-defaults is $color-$shade. Would you > mind keeping that format? Okay I will ire 2017/07/05 10:14:10 Done. Show quoted text On 2017/07/04 11:19:03, ire wrote: > On 2017/07/04 10:34:40, juliandoucette wrote: > > On 2017/07/04 09:33:14, ire wrote: > > > Okay. I am fine with the names as they are so I will leave them if you have > no > > > objections. > > > > The format used on http://aa.com and in website-defaults is $color-$shade. > Would you > > mind keeping that format? > > Okay I will Done.
23 $light-gray: #D2D2D2;	23 $gray-light: #ECECEC;

24 $medium-gray: #AEAEAE;	24 $gray-medium: #AEAEAE;

25 $dark-gray: #757575;	25 $gray-dark: #757575;

26 $black: #161616;	26 $black: #161616;

27	27

28 // Brand colors	28 // Brand colors

29	29

30 $eyeo-black: $black;	30 $eyeo-black: $black;

31 $abp-red: #C70D2B;	31 $abp-red: #C70D2B;

32 $abb-blue: #0D79C7;	32 $abb-blue: #0D79C7;

33	33

34 // Typography //////////////////////////////////////////////////////////////////	34 // Typography //////////////////////////////////////////////////////////////////

35	35

36 // Font stack	36 // Font stack

37	37

38 // @see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical -guide/	38 $primary-font: "Source Sans Pro", sans-serif;

39 $font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
juliandoucette 2017/07/04 10:34:40 It seems like these two approaches don't match. O It seems like these two approaches don't match. On one hand : We're trying to use a custom font (more specific) On the other : We're trying to use a different (native) font per OS (less specific) While I acknowledge that our layout should support any font (for the sake of accessibility - e.g. I use OpenDyslexic on all pages), I can't help but acknowledge that this approach creates unnecessary (edge \|\| test) cases and supports platform/browser combinations that we don't (at a negligible cost of performance and a significant cost of testing that we will not realisticly pay). ire 2017/07/04 11:19:03 You're totally right here. I just copied from Acce Show quoted text On 2017/07/04 10:34:40, juliandoucette wrote: > It seems like these two approaches don't match. > > On one hand > : We're trying to use a custom font (more specific) > > On the other > : We're trying to use a different (native) font per OS (less specific) > > While I acknowledge that our layout should support any font (for the sake of > accessibility - e.g. I use OpenDyslexic on all pages), I can't help but > acknowledge that this approach creates unnecessary (edge \|\| test) cases and > supports platform/browser combinations that we don't (at a negligible cost of > performance and a significant cost of testing that we will not realisticly pay). You're totally right here. I just copied from Acceptable ads but didn't actually look at what was going on. There are benefits to using system fonts only, but that depends on if we don't have any particular reason to keep things consistent and use the same font across our sites on different platforms. Has there been a discussion on this before? Maybe we should speak with someone from Product to get an idea of how to proceed? juliandoucette 2017/07/04 12:24:51 No. If you copied it from acceptableads.com then i Show quoted text On 2017/07/04 11:19:03, ire wrote: > There are benefits to using system fonts only, but that depends on if we don't > have any particular reason to keep things consistent and use the same font > across our sites on different platforms. Has there been a discussion on this > before? Maybe we should speak with someone from Product to get an idea of how to > proceed? No. If you copied it from acceptableads.com then it was one of my decisions; not product. It probably shouldn't be pat of either (acceptableads.com \|\| help.eyeo.com). ire 2017/07/04 13:36:43 Okay. Well I personally like the "Source Sans Pro" Show quoted text On 2017/07/04 12:24:51, juliandoucette wrote: > On 2017/07/04 11:19:03, ire wrote: > > There are benefits to using system fonts only, but that depends on if we don't > > have any particular reason to keep things consistent and use the same font > > across our sites on different platforms. Has there been a discussion on this > > before? Maybe we should speak with someone from Product to get an idea of how > to > > proceed? > > No. If you copied it from http://acceptableads.com then it was one of my decisions; not > product. > > It probably shouldn't be pat of either (http://acceptableads.com \|\| http://help.eyeo.com). Okay. Well I personally like the "Source Sans Pro" font, so I wouldn't mind changing the font stack to basically just that plus a couple fallbacks. What do you think? juliandoucette 2017/07/04 14:51:15 I think that the style guide for the help center s Show quoted text On 2017/07/04 13:36:43, ire wrote: > Okay. Well I personally like the "Source Sans Pro" font, so I wouldn't mind > changing the font stack to basically just that plus a couple fallbacks. What do > you think? I think that the style guide for the help center specifies a font? And that we can fall back to the generic family of that font (sans or serif). ire 2017/07/05 10:14:10 Done. The font specified was Source Sans Pro Show quoted text On 2017/07/04 14:51:15, juliandoucette wrote: > On 2017/07/04 13:36:43, ire wrote: > > Okay. Well I personally like the "Source Sans Pro" font, so I wouldn't mind > > changing the font stack to basically just that plus a couple fallbacks. What > do > > you think? > > I think that the style guide for the help center specifies a font? And that we > can fall back to the generic family of that font (sans or serif). Done. The font specified was Source Sans Pro
40 "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",

41 "Fira Sans", "Droid Sans", "Helvetica Neue",

42 sans-serif;

43	39

44 // Font colours	40 // Font colours

45	41

46 $font-color-default: $eyeo-black;	42 $font-color-default: $eyeo-black;

47 $font-color-link: $abb-blue;	43 $font-color-link: $abb-blue;

48	44

49 // Font sizes (components)

50

51 $font-size-xl: 20px;

52 $font-size-lg: 18px;

53 $font-size-md: 16px;

54 $font-size-sm: 14px;

55 $font-size-xs: 12px;

56

57 // Font sizes (headings)	45 // Font sizes (headings)

58	46

59 $font-size-h1: 54px;	47 $font-size-h1: 3em;

60 $font-size-h2: 32px;	48 $font-size-h2: 2em;

61 $font-size-h3: 23px;	49 $font-size-h3: 1.4em;

62 $font-size-h4: 16px;	50 $font-size-h4: 1em;

63 $font-size-h5: $font-size-h4;	51 $font-size-h5: $font-size-h4;

64 $font-size-h6: $font-size-h4;	52 $font-size-h6: $font-size-h4;

65	53

66 // Font weights	54 // Font weights

67	55

68 $font-weight-normal: 400;	56 $bold-weight: 700;

69 $font-weight-light: 300;

70 $font-weight-bold: 700;

71	57

72 // Sizes ///////////////////////////////////////////////////////////////////////	58 // Sizes ///////////////////////////////////////////////////////////////////////

73	59

74 // Spacers /////////////////////////////////////////////////////////////////////	60 // Spacers /////////////////////////////////////////////////////////////////////

75	61

76 // Columns /////////////////////////////////////////////////////////////////////	62 // Columns /////////////////////////////////////////////////////////////////////

77	63

78 // Breakpoints /////////////////////////////////////////////////////////////////	64 // Breakpoints /////////////////////////////////////////////////////////////////

79	65

80 // Placeholders ////////////////////////////////////////////////////////////////	66 // Placeholders ////////////////////////////////////////////////////////////////

LEFT	RIGHT