Noissue - Separated 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

[juliandoucette, 2017/11/10 14:08:04]

Detail: The imports below are in alphabetical order. I'd like to avoid order
dependency by importing dependencies per component. e.g. if the navbar needs
.container then it should import responsive-widths instead of assuming that it's
available or importing all of utilities. I think that this is the logical next
step if we agree to this separation.

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

If we import by component, wouldn't that mean we would have different components
importing the same utilities and have duplication?

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

I didn't think so at the time :(

Apparently the fix for this is a 4.0 feature. I suspect that there is already a
fix for this out there. But I'm not sure if I want to bother yet.

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

Ack. It would be awesome to do it this way when the fix is ready.

  ******************************************************************************/
 
-/* Responsive widths
- ******************************************************************************/
-
-/**
- * Stretch content (e.g. images) full-width
- */
-.full-width
-{
-  display: block;
-  width: 100%;
-}
-
-/**
- * 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; }
-
-/* Text alignment
- ******************************************************************************/
-
-.text-center { text-align: center; }
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-.text-start { text-align: left; }
-[dir="rtl"] .text-start { text-align: right; }
-.text-end { text-align: right; }
-[dir="rtl"] .text-end { text-align: left; }
-
-/* Clearfix
- ******************************************************************************/
-
-.clearfix:after,
-.clearfix:before
-{
-  display: table;
-  content: " ";
-}
-
-.clearfix:after
-{
-  clear: both;
-}
-
-/* Screen reader only
- ******************************************************************************/
-
-.sr-only
-{
-  position: absolute;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  border: 0;
-}
-
-/* Unstyled elements
- ******************************************************************************/
-
-.unstyled,
-.unstyled *,
-.content .unstyled
-{
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: none;
-}
-
-ul.unstyled
-{
-  list-style: none;
-}
-
-/* Backgrounds
- ******************************************************************************/
-
-.bg-primary
-{
-  color: $primary-light;
-  background-color: $primary-dark;
-}
-
-.bg-secondary
-{
-  color: $secondary-light;
-  background-color: $secondary-dark;
-}
-
-.bg-accent
-{
-  color: $accent-light;
-  background-color: $accent-dark;
-}
-
-.bg-error
-{
-  color: $error-light;
-  background-color: $error-dark;
-}
+@import "utilities/background-colors.scss";

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

NIT: I think we should not have this file and have these imports in main.scss
(like the form imports)

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

*I just thought that* - I agree.

+@import "utilities/clearfix.scss";
+@import "utilities/device-widths.scss";
+@import "utilities/responsive-widths.scss";
+@import "utilities/screen-reader-only.scss";
+@import "utilities/text-alignment.scss";
+@import "utilities/unstyled.scss";