Issue 5940 - Created default section styles

static/scss/_utilities.scss

Index: static/scss/_utilities.scss
===================================================================
--- a/static/scss/_utilities.scss
+++ b/static/scss/_utilities.scss
@@ -38,16 +38,45 @@
   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; }