Noissue - Added device widths & refactored website-default utilities

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
 // 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/>.
 
 /*******************************************************************************
  * Utilities
  ******************************************************************************/
 
+/* Responsive widths
+ ******************************************************************************/
+
 /**
- * Stretch content full-width
+ * Stretch content (e.g. images) full-width
  */
 .full-width
 {
   display: block;
   width: 100%;
-  margin: $small-space 0px;

[juliandoucette, 2017/10/24 14:08:34]

Because width says nothing about vertical spacing.

[ire, 2017/10/25 09:20:00]

Acknowledged.

 }
 
 /**
- * Clearfix content
+ * Center content within a (responsive) fixed width
  */
+.container
+{
+  width: $container-width;
+  max-width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $small-space;
+  padding-left: $small-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;
 }