🎉 Init project

.editorconfig

@@ -0,0 +1,14 @@
+# editorconfig.org
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_size = 2
+end_of_line = lf
+indent_style = space
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1,2 @@
+* text=auto
+*.js text eol=lf

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+yarn.lock

.npmrc

@@ -0,0 +1 @@
+package-lock=false

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2018 ressourcenmangel GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
+OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,21 @@
+# Zauberstab
+
+> Opinionated SCSS helpers and utils on top of [sass-mq](https://sass-mq.github.io/sass-mq/).
+
+## Install
+
+```bash
+$ yarn install @rsm/zauberstab
+```
+
+## Usage
+
+Your `node_modules` must be included in SCSS `includePaths`/`--include-path`.
+
+```scss
+@import '@rsm/zauberstab/zauberstab';
+```
+
+## License
+
+MIT © [ressourcenmangel GmbH](https://ressourcenmangel.de)

_defaults.scss

@@ -0,0 +1,48 @@
+$zb-link-color: #f00 !default;
+$zb-link-decoration: none !default;
+$zb-link-hover-color: darken(#f00, 30%) !default;
+$zb-link-hover-decoration: underline !default;
+$zb-link-transition: color 0.2s !default;
+$zb-z-index-list: 'default' !default;
+$zb-create-helpers: true !default;
+$zb-helpers-prefix: 'zb-u' !default;
+
+/// Body padding list
+///
+/// @type Map
+$mq-body-padding: (
+  mobile: 10px,
+  tablet: 20px,
+  desktop: 30px,
+  wide: 40px,
+) !default;
+
+/// Gutter list
+///
+/// @type Map
+$mq-gutter: (
+  mobile: 0,
+  tablet: 10px,
+  desktop: 20px,
+  wide: 30px,
+) !default;
+
+/// Max container sizes
+///
+/// @type Map
+$mq-container-max-widths: (
+  mobile: 600px,
+  tablet: 900px,
+  desktop: 1200px,
+  wide: 1400px,
+) !default;
+
+/// Columns
+///
+/// @type Map
+$mq-columns: (
+  mobile: 1,
+  tablet: 2,
+  desktop: 3,
+  wide: 3,
+) !default;

_helpers.scss

@@ -0,0 +1,70 @@
+@if ($zb-create-helpers == true) {
+  .#{$zb-helpers-prefix}-hidden-visually {
+    @include zb-hidden-visually($important: true);
+  }
+
+  .#{$zb-helpers-prefix}-hidden {
+    display: none !important;
+  }
+
+  .#{$zb-helpers-prefix}-block {
+    display: block !important;
+  }
+
+  .#{$zb-helpers-prefix}-inline-block {
+    display: inline-block !important;
+  }
+
+  $mq-breakpoints-keys: map-keys($mq-breakpoints);
+  @each $breakpoint in $mq-breakpoints-keys {
+    $index: index($mq-breakpoints-keys, $breakpoint);
+
+    @mixin zb-helpers-breakpoint-inner($breakpoint, $prefix: $zb-helpers-prefix) {
+      .#{$prefix}-hidden-#{$breakpoint} {
+        display: none !important;
+      }
+
+      .#{$prefix}-block-#{$breakpoint} {
+        display: block !important;
+      }
+
+      .#{$prefix}-inline-block-#{$breakpoint} {
+        display: inline-block !important;
+      }
+    }
+
+    @if ($index == 1) {
+      @include mq($until: nth($mq-breakpoints-keys, $index + 1)) {
+        @include zb-helpers-breakpoint-inner($breakpoint);
+      }
+    } @else if ($index == length($mq-breakpoints-keys)) {
+      @include mq($from: $breakpoint) {
+        @include zb-helpers-breakpoint-inner($breakpoint);
+      }
+    } @else {
+      @include mq($from: $breakpoint, $until: nth($mq-breakpoints-keys, $index + 1)) {
+        @include zb-helpers-breakpoint-inner($breakpoint);
+      }
+    }
+  }
+
+  .#{$zb-helpers-prefix}-align-center {
+    text-align: center !important;
+  }
+
+  .#{$zb-helpers-prefix}-align-left {
+    text-align: left !important;
+  }
+
+  .#{$zb-helpers-prefix}-align-right {
+    text-align: right !important;
+  }
+
+  .#{$zb-helpers-prefix}-collapse[aria-expanded='false'] {
+    display: none;
+  }
+
+  .#{$zb-helpers-prefix}-collapse[aria-expanded='true'] {
+    display: block;
+  }
+}

_zauberstab.scss

@@ -0,0 +1,34 @@
+/**!
+ * Zauberstab
+ *
+ * Opinionated SCSS helpers and utils on top of sass-mq
+ *
+ * @author ressourcenmangel an der Panke GmbH <adp@ressourcenmangel.de>
+ */
+@charset 'UTF-8';
+
+/**
+ * Defaults
+ */
+@import 'defaults';
+
+/**
+ * Load sass-mq
+ */
+@import 'sass-mq/mq';
+
+/**
+ * Utils
+ */
+@import 'utils/clearfix';
+@import 'utils/container';
+@import 'utils/hidden-visually';
+@import 'utils/link';
+@import 'utils/list-reset';
+@import 'utils/svg';
+@import 'utils/z-index';
+
+/**
+ * Helpers
+ */
+@import 'helpers';

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@rsm/zauberstab",
+  "version": "0.1.0",
+  "description": "Opinionated SCSS helpers and utils on top of sass-mq",
+  "main": "_zauberstab.scss",
+  "repository": "https://github.com/ressourcenmangel/zauberstab.git",
+  "author": "Dennis Morhardt <dennis.morhardt@ressourcenmangel.de>",
+  "license": "MIT",
+  "keywords": [
+    "sass",
+    "sass-mq",
+    "sass-utils",
+    "sass-helpers"
+  ],
+  "files": [
+    "_zauberstab.scss",
+    "_helpers.scss",
+    "_defaults.scss",
+    "utils/*.scss"
+  ],
+  "dependencies": {
+    "sass-mq": "^4.0.2"
+  },
+  "devDependencies": {
+    "node-sass": "^4.7.2",
+    "sassdoc": "^2.5.0"
+  }
+}

utils/_clearfix.scss

@@ -0,0 +1,12 @@
+/**
+ * Contains floats in modern browsers
+ *
+ * @soruce http://cssmojo.com/the-very-latest-clearfix-reloaded/
+ */
+@mixin zb-clearfix() {
+  &::after {
+    clear: both;
+    content: '';
+    display: block;
+  }
+}

utils/_container.scss

@@ -0,0 +1,39 @@
+@mixin mq-make-container($breakpoints: map-keys($mq-container-max-widths), $container-max-widths: $mq-container-max-widths, $body-padding: $mq-body-padding) {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    @include mq($from: $breakpoint) {
+      padding-left: mq-px2rem(map-get($body-padding, $breakpoint));
+      padding-right: mq-px2rem(map-get($body-padding, $breakpoint));
+
+      @if index($breakpoints, $breakpoint) {
+        width: mq-px2rem(map-get($container-max-widths, $breakpoint));
+      }
+    }
+  }
+}
+
+@mixin mq-make-row($body-padding: $mq-body-padding) {
+  @include clearfix();
+
+  @each $breakpoint, $padding in $body-padding {
+    @include mq($from: $breakpoint) {
+      margin-left: -1 * mq-px2rem($padding);
+      margin-right: -1 * mq-px2rem($padding);
+    }
+  }
+}
+
+@mixin mq-make-column($columns: $mq-columns, $gutter: $mq-gutter) {
+  float: left;
+
+  @each $breakpoint, $columns-count in $columns {
+    @include mq($from: $breakpoint) {
+      padding-left: mq-px2rem(map-get($gutter, $breakpoint));
+      padding-right: mq-px2rem(map-get($gutter, $breakpoint));
+      width: 100% / $columns-count;
+    }
+  }
+}

utils/_hidden-visually.scss

@@ -0,0 +1,50 @@
+/**
+ * Hides things but keeps it available for screen readers.
+ *
+ * @soruce https://github.com/inuitcss/inuitcss/blob/develop/tools/_tools.hidden.scss
+ * @param $important Apply all styles as !important
+ */
+@mixin zb-hidden-visually($important: false) {
+  @if ($important == true) {
+    $important: !important;
+  } @elseif ($important == false) {
+    $important: null;
+  } @else {
+    @error '`#{$important}` needs to be `true` or `false`.';
+  }
+
+  border: 0 $important;
+  clip: rect(0 0 0 0) $important;
+  clip-path: inset(50%) $important;
+  height: 1px $important;
+  margin: -1px $important;
+  overflow: hidden $important;
+  padding: 0 $important;
+  position: absolute $important;
+  white-space: nowrap $important;
+  width: 1px $important;
+}
+
+/**
+ * Undos hidden-visually()
+ *
+ * @param $important Apply all styles as !important
+ */
+@mixin zb-undo-hidden-visually($important: false) {
+  @if ($important == true) {
+    $important: !important;
+  } @elseif ($important == false) {
+    $important: null;
+  } @else {
+    @error '`#{$important}` needs to be `true` or `false`.';
+  }
+
+  clip: auto $important;
+  clip-path: none $important;
+  height: auto $important;
+  margin: 0 $important;
+  overflow: visible $important;
+  position: static $important;
+  white-space: normal $important;
+  width: auto $important;
+}

utils/_link.scss

@@ -0,0 +1,20 @@
+/**
+ * Shared styles for a basic link
+ */
+@mixin zb-link(
+  $color: $zb-link-color,
+  $decoration: $zb-link-decoration,
+  $hover-color: $zb-link-hover-color,
+  $hover-decoration: $zb-link-hover-decoration,
+  $transition: $zb-link-transition
+) {
+  color: $color;
+  text-decoration: $decoration;
+  transition: $transition;
+
+  &:hover,
+  &:focus {
+    color: $hover-color;
+    text-decoration: $hover-decoration;
+  }
+}

utils/_list-reset.scss

@@ -0,0 +1,9 @@
+/**
+ * Removes browser-default list styles
+ */
+@mixin zb-list-reset() {
+  list-style: none;
+  list-style-type: none;
+  margin-bottom: 0;
+  padding-left: 0;
+}

utils/_rem.scss

@@ -0,0 +1,10 @@
+@function mq-px2rem($px, $base-font-size: $mq-base-font-size) {
+  @if unitless($px) {
+    @warn 'Assuming #{$px} to be in pixels, attempting to convert it into pixels.';
+    @return mq-px2rem($px * 1px, $base-font-size);
+  } @else if unit($px) == rem {
+    @return $px;
+  }
+
+  @return ($px / $base-font-size) * 1rem;
+}