Issue 5511 - Create Product Help Home Template for help.eyeo.com

static/scss/layout/_grid.scss

Index: static/scss/layout/_grid.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/scss/layout/_grid.scss
@@ -0,0 +1,23 @@
+// This file is part of help.eyeo.com.
+// 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 help.eyeo.com.  If not, see <http://www.gnu.org/licenses/>.
+
+.one-half
+{
+  @media (min-width: $tablet-breakpoint)

[ire, 2017/08/15 15:09:22]

in website defaults, this class doesn't become half-width until
$tablet-breakpoint. I think this is too large

[juliandoucette, 2017/08/24 11:14:01]

Doesn't this code do the same?

I considered this when I created website-default grid (because I agree with
you). Certainly, in some cases, we may want half-width on phablets ( 544 < 768
). I would suggest using a modifier e.g. `.force-half` or a special component
e.g. A custom group or card deck may scale differently then vanilla grid columns
-> instead of overwriting website-defaults _grid.scss. If we change the way a
standard component works on a specific website then we will have to document
that and keep it in mind when maintaining that website.

[ire, 2017/08/28 14:54:49]

Oops I meant to say it doesn't become half-width until $desktop-breakpoint
I agree with you about not overriding the standard component. 

I'm struggling with the modifier class name `.force-half`, because I don't think
it really describes what we are trying to achieve here. This is basically the
same grid, but having the breakpoints happen at a smaller viewport. The way I
see it, if I'm using a `.col-half`class, then that means I would want the column
to take up half the space for the majority of viewport sizes possible (same with
the other classes). But the way it is currently set up, it's only on larger
desktops that this would happen. For a significant amount of viewport sizes, the
column would be full width. I actually think the case in which a col-half should
only become half at desktop is more the exception, than the rule.

That said, perhaps we could have an additional version of the grid which breaks
at $tablet-breakpoint instead of $desktop-breakpoint. The modifier class could
be applied to the `.row`, something like `.row.tablet-break` (Not an actual
suggestion, I can't think of a good classname right now). What do you think?

[juliandoucette, 2017/09/12 13:21:54]

See my comment in the latest Patchset. (Note: Maybe I changed this by accident
in website-defaults? Or one or both of us are or were confused. :D)

+  {
+    width: 50%;
+  }
+}