new folder structure

scss/_settings.vars.scss

@@ -0,0 +1,51 @@
+/*------------------------------------*\
+    #VARS
+    Our own variables to use throughout the project.
+\*------------------------------------*/
+
+$border-radius: 3px;
+$btn-radius: $border-radius/2;
+$font-family-heading: Helvetica, Arial, sans-serif;
+$main-font-family:  Helvetica, Arial, sans-serif;
+$font-size-primary: 16px;
+$font-size-small: 14px;
+$background-color: #fff;
+
+/**
+ * COLORS
+ * We always specify colors throughout our SCSS from these variables.
+ * Never use darken() etc. other places than here.
+ * If you need to rename a Variable don't be afraid to do a global
+ * find and replace in the CSS so that the variables are correct
+ */
+
+$gray: #767676; //wcag-color for text on white background
+$link: blue;
+
+
+
+/**
+ * RESPONSIVE BREAKPOINTS
+ * This is where we define all our breakpoints. It overwrites https://github.com/aleutcss/settings.responsive
+ * These also generate helper-classes with aleut that we can use:
+ * f.ex: u-1/2@m (for width), u-pt@s(for padding-top on s-size) etc.
+ * See all alternatives in https://github.com/aleutcss/utilities.spacing-responsive and
+ * utilities.widths-responsive.
+ *
+ * We can also use them with a media-query mixin like this:
+ * Usage:
+ *  @include media-query(s) {
+ *
+ *  }
+ */
+
+$breakpoints: (
+    "s"       "screen and (max-width: 44.9375em)",
+    "m"       "screen and (min-width: 45em)",
+    "l"       "screen and (min-width: 64em)",
+    "retina"  "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)"
+);
+
+/**
+ * Other vars here
+ **/

scss/_tools.mixins.scss

@@ -0,0 +1,30 @@
+///*------------------------------------*\
+//    #MIXINS
+//\*------------------------------------*/
+
+// These are our own additional mixins to Inuit.css
+
+// PLACEHOLDER-MIXIN:
+//
+// Usage:
+//
+// .example {
+//      @include placeholder(#f2f2f2);
+// }
+//
+
+@mixin placeholder($placeholderContent) {
+   &::-webkit-input-placeholder { /* WebKit browsers */
+        color: $placeholderContent;
+    }
+    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+        color: $placeholderContent;
+    }
+    &::-moz-placeholder { /* Mozilla Firefox 19+ */
+        color: $placeholderContent;
+    }
+    &:-ms-input-placeholder { /* Internet Explorer 10+ */
+        color: $placeholderContent;
+    }
+
+}

scss/_utilities.helpers.scss

@@ -0,0 +1,54 @@
+///*------------------------------------*\
+//    #HELPER CLASSES
+//	  Helper-classes that does one thing and one thing only.
+//\*------------------------------------*/
+
+/**
+ * Helper-class for removing item visually, but not for screenreaders
+ */
+.u-accessibility{
+    border:0!important;
+    clip:rect(0 0 0 0)!important;
+    height:1px!important;
+    margin:-1px!important;
+    overflow:hidden!important;
+    padding:0!important;
+    position: absolute!important;
+    width:1px!important;
+}
+
+/**
+ * Floating left. Remember to add clearfix class on parent item: .u-clearfix
+ */
+.u-fl{
+    float: left;
+}
+
+/**
+ * Floating right. Remember to add clearfix class on parent item: .u-clearfix
+ */
+.u-fr{
+    float: right;
+}
+
+/**
+ * If we don't want to wrap the text over multiple lines.
+ */
+.u-nowrap{
+    white-space: nowrap;
+}
+
+/**
+ * Text align helper classes.
+ */
+.u-tr{
+    text-align: right;
+}
+
+.u-tc{
+    text-align: center;
+}
+
+.u-tl{
+    text-align: left;
+}