Issue 5350 - Setup Help Center Boilerplate

static/scss/base/_variables.scss

Index: static/scss/base/_variables.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/scss/base/_variables.scss
@@ -0,0 +1,80 @@
+// 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 variables?

[ire, 2017/06/27 14:18:38]

Done. I've removed the variables that were doing the same thing as the
website-default. 

+// Copyright (C) 2017 Eyeo GmbH
+//
+// help.eyeo.com is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// help.eyeo.com is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with acceptableads.org.  If not, see <http://www.gnu.org/licenses/>.
+
+// Colors //////////////////////////////////////////////////////////////////////
+
+// Grayscale
+
+$white: #fff;
+$pale-white: #ECECEC;

[juliandoucette, 2017/06/26 12:37:34]

Is this like offwhite?

[ire, 2017/06/27 14:18:38]

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 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 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 is $color-$shade. Would you
mind keeping that format?

[ire, 2017/07/04 11:19:03]

Okay I will 

[ire, 2017/07/05 10:14:10]

Done.

+$light-gray: #D2D2D2;
+$medium-gray: #AEAEAE;
+$dark-gray: #757575;
+$black: #161616;
+
+// Brand colors
+
+$eyeo-black: $black;
+$abp-red: #C70D2B;
+$abb-blue: #0D79C7;
+
+// Typography //////////////////////////////////////////////////////////////////
+
+// Font stack
+
+// @see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+$font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont,

[juliandoucette, 2017/07/04 10:34:40]

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 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 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" 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 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

+              "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+              "Fira Sans", "Droid Sans", "Helvetica Neue",
+              sans-serif;
+
+// Font colours
+
+$font-color-default: $eyeo-black;
+$font-color-link: $abb-blue;
+
+// Font sizes (components)
+
+$font-size-xl: 20px;
+$font-size-lg: 18px;
+$font-size-md: 16px;
+$font-size-sm: 14px;
+$font-size-xs: 12px;
+
+// Font sizes (headings)
+
+$font-size-h1: 54px;
+$font-size-h2: 32px;
+$font-size-h3: 23px;
+$font-size-h4: 16px;
+$font-size-h5: $font-size-h4;
+$font-size-h6: $font-size-h4;
+
+// Font weights
+
+$font-weight-normal: 400;
+$font-weight-light: 300;
+$font-weight-bold: 700;
+
+// Sizes ///////////////////////////////////////////////////////////////////////
+
+// Spacers /////////////////////////////////////////////////////////////////////
+
+// Columns /////////////////////////////////////////////////////////////////////
+
+// Breakpoints /////////////////////////////////////////////////////////////////
+
+// Placeholders ////////////////////////////////////////////////////////////////