Issue 5940 - Created default section styles

static/scss/_utilities.scss

 // This file is part of website-defaults
 // Copyright (C) 2016-present eyeo GmbH
 //
 // website-defaults 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.
 //
 // website-defaults is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 25 matching lines @@
 .container
 {
   width: $container-width;
   max-width: 100%;
   margin-right: auto;
   margin-left: auto;
   padding-right: $small-space;
   padding-left: $small-space;
 }
 
+/**
+ * Vertically space sections of content
+ */
+.section

[ire, 2017/10/30 08:07:20]

TOL: I'm a bit hesitant about this because this isn't exactly what I always want
of a .section. For example, the .section in help.eyeo.com doesn't work this way,
there's no padding, and there is only margin applied in one direction. If I
think about it a lot, this definition of a .section is probably more accurate
than my own implementation in hc, so maybe the solution is for me to change the
classname I have to something else entirely.

[juliandoucette, 2017/10/30 12:16:46]

Nah, I think I like your section more. I want to be able to place these one
after another or one after the navbar without space (margin) between. And the
inner padding could be a problem for content with margin.

+{
+  @extend .clearfix;
+  margin-top: $small-space;

[ire, 2017/10/30 08:07:20]

Using these variables has the same problem as using a non-unique variable for
the .container width. It's not really that configurable because to change it is
to change a global variable being used for other things. Maybe this needs its
own variable? e.g. $section-mobile-spacing etc ?

[juliandoucette, 2017/10/30 12:16:46]

Agreed.

+  margin-bottom: $small-space;
+  padding-top: $small-space;
+  padding-bottom: $small-space;
+
+  @media(min-width: $tablet-breakpoint)

[ire, 2017/10/30 08:07:20]

NIT: I think we should decide on if we put a space between the "@media" and the
opening bracket. I think we should have a space, i.e. "@media (min-width:
$tablet-breakpoint)"

[juliandoucette, 2017/10/30 12:16:46]

Agreed.

+  {
+    padding-top: $medium-space;
+    padding-bottom: $medium-space;
+    padding-top: $medium-space;
+    padding-bottom: $medium-space;
+  }
+
+  @media(min-width: $desktop-breakpoint)
+  {
+    padding-top: $large-space;
+    padding-bottom: $large-space;
+    padding-top: $large-space;
+    padding-bottom: $large-space;
+  }
+}
+
+
 /* Device widths
  ******************************************************************************/
 
 .phone-width { width: $phone-width; }
 .phablet-width { width: $phablet-width; }
 .tablet-width { width: $tablet-width; }
 .desktop-width { width: $desktop-width; }
 .large-desktop-width { width: $large-desktop-width; }
 
 /* Clearfix
  ******************************************************************************/
 
 .clearfix:after,
 .clearfix:before
 {
   display: table;
   content: " ";
 }
 
 .clearfix:after
 {
   clear: both;
 }