Noissue - Separated website-default utilities

static/scss/utilities/_responsive-widths.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
+// 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 website-defaults.  If not, see <http://www.gnu.org/licenses/>.
+
+/**

[ire, 2017/11/13 08:33:38]

NIT: Change the comment style?

[juliandoucette, 2017/11/13 12:32:59]

This is a JSDoc comment. It's meant to describe what the class below does; not
categorize (like the other full-line comments).

[ire, 2017/11/14 07:14:51]

Ack. 

NIT: I think we typically start the comment on the first line

[juliandoucette, 2017/11/17 14:52:12]

Not doc comments. e.g.
https://hg.adblockplus.org/adblockplus/file/tip/lib/io.js#l172

+ * Stretch content (e.g. images) full-width
+ */
+.full-width
+{
+  display: block;
+  width: 100%;
+}
+
+/**
+ * Center content within a (responsive) fixed width
+ */
+.container

[ire, 2017/11/13 08:33:38]

NIT: Is the .container class a "responsive width"?

[juliandoucette, 2017/11/13 12:33:00]

It was when it had responsive fixed widths. Now... sortof? 

It depends if you agree with the phrasing "full-width responsive" (which I just
made up) meaning full-width on devices smaller than the max-width.

[ire, 2017/11/14 07:14:50]

One the one hand the phrasing "full-width-responsive" makes sense literally, but
because I already have a pre-existing definition of a "container", it kinda
clashes in my mind. I think it's fine to leave this here because I can't think
of a better place to put it.

+{
+  width: $container-width;
+  max-width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $small-space;
+  padding-left: $small-space;
+}