Merge branch 'release/1.0.0'

* release/1.0.0:
  Update dependencies
  Bump major version
  Add logo to README
  Add NPM scripts
  Add yarn.lock
  Prepare becoming a scoped package
  Add README
  Add boilerplate code

.gitignore

@@ -0,0 +1,4 @@
+.idea/
+node_modules/
+.sass-cache
+build/

README.md

@@ -0,0 +1,20 @@
+<p align="center"><img src="http://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg" alt="Sass" width="128"></p>
+
+# Sass foundation
+
+This repository represents our starting point for creating CSS styles.
+
+Uses the following libraries by default:
+
+- [normalize.css]
+- [include-media]
+
+#  
+<p align="center">
+  <a href="https://gridonic.ch">gridonic.ch</a> ・
+  <a href="https://gridonic.github.io">gridonic.github.io</a> ・
+  <a href="https://twitter.com/gridonic">@gridonic</a>
+</p>
+
+[normalize.css]: https://necolas.github.io/normalize.css/
+[include-media]: http://include-media.com/

_components.scss

@@ -0,0 +1,9 @@
+/*
+    Components
+
+    Components are parts which are used among several views. For example those
+    could be buttons, banners, lists, dialogs and so on.
+
+    Styleguide 2.0
+*/
+@import "components/first-component";

_meta.scss

@@ -0,0 +1,8 @@
+// -----------------------------------------------------------------------------
+// The meta folder holds files which only have functions, mixins, variables and
+// other definitions which do NOT compile to CSS.
+// -----------------------------------------------------------------------------
+@import "meta/functions";
+@import "meta/mixins";
+@import "meta/config";
+@import "meta/placeholders";

_shared.scss

@@ -0,0 +1,12 @@
+/*
+    Shared
+
+    All styles which are used throughout the whole website get in here.
+
+    Styleguide 1.0
+*/
+@import "shared/debug";
+@import "shared/generic";
+@import "shared/typography";
+@import "shared/print";
+@import "shared/images";

components/_first-component.scss

@@ -0,0 +1,26 @@
+/*
+    First component
+
+    This is my very first component.
+
+    markup:
+    <div class="first-component">
+        <span class="title">Hi</span>
+    </div>
+
+    Styleguide 2.1.0
+*/
+.first-component {
+    > .title {
+        color: red;
+
+        @include media(">=medium") {
+            font-size: 1.5em;
+        }
+
+        // On print devices this title shall be hidden
+        @include media("print") {
+            display: none;
+        }
+    }
+}

meta/_config.scss

@@ -0,0 +1,95 @@
+// -----------------------------------------------------------------------------
+// Define your color palette over here.
+// -----------------------------------------------------------------------------
+$color-black: #000;
+$color-japanese-laurel: #06a20d;
+$color-cinnabar: #e43e33;
+$color-matisse: #0b6ba1;
+$color-white: #fff;
+$color-saffron: #fac135;
+
+// -----------------------------------------------------------------------------
+// Color associations.
+// -----------------------------------------------------------------------------
+$brand-primary: $color-black;
+$brand-success: $color-japanese-laurel;
+$brand-info: $color-matisse;
+$brand-warning: $color-cinnabar;
+$brand-text-primary: $brand-primary;
+
+/*
+    Colors
+
+    The following colors are the defined project colors.
+
+    *Notice:* Do not create new ones, try to use them and adjust them via [color
+    manipulating functions](http://sass-lang.com/documentation/Sass/Script/Functions.html).
+
+    **IMPORTANT:** Always use the semantic colors, not the actual color name!
+
+    markup:
+    <div class="styleguide-demo">
+        <span class="color" style="background-color: $brand-primary", title="brand-primary"></span>
+        <span class="color" style="background-color: $brand-success", title="brand-success"></span>
+        <span class="color" style="background-color: $brand-info", title="brand-info"></span>
+        <span class="color" style="background-color: $brand-warning", title="brand-warning"></span>
+        <br>
+        <br>
+        <br>
+        <!--
+            Plain colors below, avoid using them directly!
+        -->
+        <span class="color" style="background-color: $color-black", title="black"></span>
+        <span class="color" style="background-color: $color-japanese-laurel", title="japanese-laurel"></span>
+        <span class="color" style="background-color: $color-cinnabar", title="cinnabar"></span>
+        <span class="color" style="background-color: $color-white", title="white"></span>
+        <span class="color" style="background-color: $color-saffron", title="saffron"></span>
+        <span class="color" style="background-color: $color-matisse", title="matisse"></span>
+    </div>
+
+    Styleguide 1.3
+*/
+
+// -----------------------------------------------------------------------------
+// Typography.
+// -----------------------------------------------------------------------------
+$font-headline-family: Open Sans;
+$font-text-family: Open Sans;
+$font-text-line-height: 1.75;
+$font-text-rendering: optimizeLegibility;
+$font-text-size: 14px;
+
+// -----------------------------------------------------------------------------
+// Resolution relative settings. Excerpt from Google web fundamentals:
+//
+// - Create breakpoints based on content, never on specific devices, products,
+//   or brands.
+// - Design for the smallest mobile device first, then progressively enhance
+//   the experience as more screen real estate becomes available.
+// - Keep lines of text to a maximum of around 70 or 80 characters.
+//
+// https://goo.gl/EDZOAH
+// -----------------------------------------------------------------------------
+$breakpoints: (
+    small: 320px,
+    medium: 768px,
+    large: 1024px,
+    huge: 1440px
+);
+
+// @see https://github.com/eduardoboucas/include-media/issues/14
+$unit-intervals: ("px": 1, "em": 0.065, "rem": 0.0625);
+
+// -----------------------------------------------------------------------------
+// Global grid.
+// -----------------------------------------------------------------------------
+$grid-vertical-base: 1rem;
+// $grid-total-columns: 12;
+// $grid-gutter-width: 1.5rem; // 24px
+// $grid-max-width: 90rem; // 1440px
+
+// -----------------------------------------------------------------------------
+// Z-index listing.
+// -----------------------------------------------------------------------------
+$z-default: 1;
+$z-debug: 500;

meta/_functions.scss

@@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// Define your global functions in here!
+// -----------------------------------------------------------------------------

meta/_mixins.scss

@@ -0,0 +1,10 @@
+// -----------------------------------------------------------------------------
+// Define your global mixins in here!
+// -----------------------------------------------------------------------------
+@mixin group($pseudo: "after") {
+    &#{if($pseudo, "::#{$pseudo}", "")} {
+        clear: both;
+        content: "";
+        display: table;
+    }
+}

meta/_placeholders.scss

@@ -0,0 +1,3 @@
+// -----------------------------------------------------------------------------
+// Define your global selectors in here!
+// -----------------------------------------------------------------------------

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@gridonic/sass",
+  "version": "1.0.0",
+  "description": "Our Sass foundation.",
+  "main": "styles.scss",
+  "scripts": {
+    "build": "node-sass styles.scss build/styles.css",
+    "build:prod": "npm run build -- --output-style compressed",
+    "watch": "npm run build -- --watch",
+    "test": "npm run build && echo ✔︎  OK"
+  },
+  "author": "Gridonic AG <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "node-sass": "^4.5.0"
+  },
+  "dependencies": {
+    "include-media": "^1.4.9",
+    "normalize.css": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gridonic/sass.git"
+  },
+  "keywords": [
+    "sass",
+    "css",
+    "boilerplate"
+  ],
+  "bugs": {
+    "url": "https://github.com/gridonic/sass/issues"
+  },
+  "homepage": "https://github.com/gridonic/sass#readme"
+}

shared/_debug.scss

@@ -0,0 +1,60 @@
+/*
+    Debug
+
+    For visual and script debugging just run any url with `debug=1`, or type
+    `:debug` or set a localStorage item called `debug` with a value of `1`.
+    This will enable the debug mode and give you additional scripting output as
+    well as visual debugging output like the current breakpoint and the
+    vertical baseline grid.
+
+    Styleguide 4
+*/
+.debug-mode {
+    $highlight-color: $brand-warning;
+    $grid-color: $color-black;
+
+    position: relative;
+
+    &::after,
+    &::before {
+        z-index: $z-debug;
+    }
+
+    // Baseline grid
+    &::after {
+        background-color: transparent;
+        background-image: linear-gradient(transparent calc(100% - 1px), rgba($grid-color, 0.1) 0%),
+                          linear-gradient(transparent calc(50% - 1px), rgba($grid-color, 0.05) 50%, transparent calc(50% + 1px));
+        background-size: 100% $grid-vertical-base;
+        background-repeat: repeat, repeat;
+        content: "";
+        height: 100%;
+        left: 0;
+        pointer-events: none;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+    // Breakpoints indicator
+    &::before {
+        background-color: $highlight-color;
+        bottom: 0;
+        color: #000;
+        font-family: monospace;
+        font-size: 0.75rem;
+        line-height: $grid-vertical-base;
+        padding: ($grid-vertical-base / 2) 1rem;
+        position: fixed;
+        right: 0;
+        white-space: pre-wrap;
+
+        @each $name, $width in $breakpoints {
+            @include media(">=#{$width}") {
+                content: "vertical base: #{$grid-vertical-base}  ·  "
+                         "breakpoint: #{$name} (#{$width})";
+            }
+        }
+    }
+}

shared/_generic.scss

@@ -0,0 +1,16 @@
+// -----------------------------------------------------------------------------
+// Generic styles.
+// -----------------------------------------------------------------------------
+:root {
+    box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
+a {
+    color: currentColor;
+}

shared/_images.scss

@@ -0,0 +1,8 @@
+// -----------------------------------------------------------------------------
+// Global image styles.
+// -----------------------------------------------------------------------------
+img {
+    display: inline-block;
+    max-width: 100%;
+    height: auto;
+}

shared/_print.scss

@@ -0,0 +1,68 @@
+// -----------------------------------------------------------------------------
+//         ⚠️            DO NOT TOUCH THIS FILE!           ⚠️
+// -----------------------------------------------------------------------------
+@media print {
+    *,
+    *::before,
+    *::after,
+    *::first-letter,
+    *::first-line {
+        background-color: transparent !important;
+        color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href]::after {
+        content: " (" attr(href) ")";
+    }
+
+    abbr[title]::after {
+        content: " (" attr(title) ")";
+    }
+
+    a[href^="#"]::after, // Don't show links that are fragment identifiers,
+    a[href^="javascript:"]::after, // or use the `javascript:` pseudo protocol
+    a[href^="tel:"]::after, // or are phone numbers
+    a[href*=".google."]::after { // or any Google link
+        content: "";
+    }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    // Printing Tables:
+    // http://css-discuss.incutio.com/wiki/Printing_Tables
+    thead {
+        display: table-header-group;
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
+}