Break styles into files + add grid

relates to #5

src/styles/_config.scss

@@ -0,0 +1,78 @@
+
+// SVEF vefverdlaun colors
+$color-orange: #E7792B;
+$color-green: #56A3A6;
+$color-gray: #4A4A4A;
+$color-gray-light: #EBEBEA;
+
+// Sizes
+$spacing: 20px;
+$page-max-width: 1280px;
+$page-min-width: 320px;
+
+// Text direction & floats
+$text-direction: ltr;
+$default-float: left;
+$opposite-float: right;
+@if $text-direction == ltr {
+  $default-float: left;
+  $opposite-float: right;
+} @else {
+  $default-float: right;
+  $opposite-float: left;
+}
+
+// Grid
+$grid-columns: 12;
+$grid-gutter: $spacing;
+
+// Media Queries
+$screen: "only screen";
+$landscape: "#{$screen} and (orientation: landscape)";
+$portrait: "#{$screen} and (orientation: portrait)";
+
+$retina:
+  "(min--moz-device-pixel-ratio: 1.5),
+  (-o-min-device-pixel-ratio: 3/2),
+  (-webkit-min-device-pixel-ratio: 1.5),
+  (min-device-pixel-ratio: 1.5),
+  (min-resolution: 144dpi),
+  (min-resolution: 1.5dppx)";
+
+// To create new breakpoint:
+// Create range values, add to breakArray, add to respond-to mixin
+
+$break-xsmall: 0px;
+$break-small: 480px;
+$break-medium: 640px;
+$break-large: 830px;
+$break-xlarge: 1024px;
+$break-xxlarge: 1200px;
+
+// name        value
+$breakArray:
+  ("xsmall"    $break-xsmall)
+  ("small"     $break-small)
+  ("medium"    $break-medium)
+  ("large"     $break-large)
+  ("xlarge"    $break-xlarge)
+  ("xxlarge"   $break-xxlarge)
+;
+
+$xsmall-up: "#{$screen} and (min-width:#{$break-xsmall + 1})";
+$xsmall-only: "#{$screen} and (min-width:#{$break-xsmall + 1}) and (max-width:#{$break-xsmall})";
+
+$small-up: "#{$screen} and (min-width:#{$break-small + 1})";
+$small-only: "#{$screen} and (min-width:#{$break-small + 1}) and (max-width:#{$break-small})";
+
+$medium-up: "#{$screen} and (min-width:#{$break-medium + 1})";
+$medium-only: "#{$screen} and (min-width:#{$break-medium + 1}) and (max-width:#{$break-medium})";
+
+$large-up: "#{$screen} and (min-width:#{$break-large + 1})";
+$large-only: "#{$screen} and (min-width:#{$break-large + 1}) and (max-width:#{$break-large})";
+
+$xlarge-up: "#{$screen} and (min-width:#{$break-xlarge + 1})";
+$xlarge-only: "#{$screen} and (min-width:#{$break-xlarge + 1}) and (max-width:#{$break-xlarge})";
+
+$xxlarge-up: "#{$screen} and (min-width:#{$break-xxlarge + 1})";
+$xxlarge-only: "#{$screen} and (min-width:#{$break-xxlarge + 1}) and (max-width:#{$break-xxlarge})";

src/styles/components/html/_index.scss

@@ -0,0 +1,27 @@
+
+html {
+  margin: 0;
+  padding: 0;
+
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial;
+
+  background: $color-gray;
+  color: $color-gray-light;
+
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+// Default box-sizing to border-box, except for images and hr
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+hr,img {
+  box-sizing: content-box;
+}

src/styles/components/main/_index.scss

@@ -0,0 +1,5 @@
+
+main {
+  margin: 0;
+  padding: 20px;
+}

src/styles/components/typography/_index.scss

@@ -0,0 +1,5 @@
+
+h1 {
+  margin: 0 auto 20px;
+  font-weight: 400;
+}

src/styles/components/vectors/_index.scss

@@ -0,0 +1,2 @@
+
+@import "logo-svef";

src/styles/components/vectors/_logo-svef.scss

@@ -0,0 +1,16 @@
+
+.svg-logo-svef {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+
+  margin: auto;
+  width: 80%;
+  max-width: 800px;
+
+  .svef {
+    fill: $color-orange;
+  }
+  .samtok-vefidnadarins {
+    fill: $color-orange;
+  }
+}

src/styles/styles.scss

@@ -1,36 +1,9 @@
 @import "https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,300|Merriweather:400,700,300";
 
-html {
-  margin: 0;
-  padding: 0;
+@import "config";
+@import "utils/index";
 
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial;
-
-  background: #404040;
-  color: #ebebea;
-  -webkit-font-smoothing: antialiased;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-}
-
-main {
-  margin: 0;
-  padding: 20px;
-}
-
-h1 {
-  margin: 0 auto 20px;
-  font-weight: 400;
-}
-
-.svg-logo-svef {
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-
-  margin: auto;
-  width: 80%;
-  max-width: 800px;
-}
+@import "components/html/index";
+@import "components/main/index";
+@import "components/typography/index";
+@import "components/vectors/index";

src/styles/utils/_grid.scss

@@ -0,0 +1,84 @@
+grid, column { display: block; }
+
+grid {
+  @function grid-calc($colNumber, $totalColumns: $grid-columns) {
+    @return percentage($colNumber / $totalColumns);
+  }
+  @mixin grid-columns($className: 'span') {
+    @for $col from 1 through $grid-columns {
+      &.#{$className}-#{$col} { width: grid-calc($col); }
+    }
+  }
+  @mixin grid-offset($className: '') {
+    @if($className != '') {
+      $className: "#{$className}-";
+    }
+    @for $col from 1 through $grid-columns {
+      &.#{$className}offset-#{$col} { margin-left: grid-calc($col); }
+    }
+  }
+  @mixin grid-ordering($className: '') {
+    @if($className != '') {
+      $className: "#{$className}-";
+    }
+
+    @for $col from 1 through $grid-columns {
+      &.#{$className}push-#{$col} { left: grid-calc($col); }
+      &.#{$className}pull-#{$col} { right: grid-calc($col); }
+    }
+  }
+
+  @include clearfix;
+  margin: 0 auto;
+  padding-left: $grid-gutter/2;
+  padding-right: $grid-gutter/2;
+
+  width: 100%;
+  max-width: $page-max-width;
+  text-align: center;
+
+  grid, column > & {
+    margin-left: -$grid-gutter;
+    margin-right: -$grid-gutter;
+    width: auto;
+    max-width: none;
+  }
+
+  column {
+    @include clearfix;
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    width: 100%;
+
+    min-height: 1px;
+    padding-left: $grid-gutter/2;
+    padding-right: $grid-gutter/2;
+
+    @each $i in $breakArray {
+      @include respond-to(nth($i,1)) {
+        @include grid-columns(nth($i,1));
+        @include grid-offset('#{nth($i,1)}-up');
+        @include grid-ordering('#{nth($i,1)}-up');
+      }
+
+      @include respond-to('#{nth($i,1)}-only') {
+        @include grid-offset(nth($i,1));
+        @include grid-ordering(nth($i,1));
+      }
+    }
+
+    @include grid-offset();
+    @include grid-ordering();
+  }
+
+  &.no-gutter {
+    padding-left: 0;
+    padding-right: 0;
+
+    > column {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}

src/styles/utils/_index.scss

@@ -0,0 +1,4 @@
+
+@import "mixins/index";
+
+@import "grid";

src/styles/utils/mixins/_clearfix.scss

@@ -0,0 +1,11 @@
+
+@mixin clearfix() {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}

src/styles/utils/mixins/_index.scss

@@ -0,0 +1,3 @@
+
+@import "clearfix";
+@import "responsive";

src/styles/utils/mixins/_responsive.scss

@@ -0,0 +1,66 @@
+// ==========================================================================
+// Media Queries
+// ==========================================================================
+
+@mixin respond-to($media,$value:'') {
+
+  @if $media == xsmall-up or $media == xsmall {
+    @media #{$xsmall-up} { @content; }
+  }
+  @else if $media == small-up or $media == small {
+    @media #{$small-up} { @content; }
+  }
+  @else if $media == medium-up or $media == medium {
+    @media #{$medium-up} { @content; }
+  }
+  @else if $media == large-up or $media == large {
+    @media #{$large-up} { @content; }
+  }
+  @else if $media == xlarge-up or $media == xlarge {
+    @media #{$xlarge-up} { @content; }
+  }
+  @else if $media == xxlarge-up or $media == xxlarge {
+    @media #{$xxlarge-up} { @content; }
+  }
+
+  @else if $media == xsmall-only {
+    @media #{$xsmall-only} { @content; }
+  }
+  @else if $media == small-only {
+    @media #{$small-only} { @content; }
+  }
+  @else if $media == medium-only {
+    @media #{$medium-only} { @content; }
+  }
+  @else if $media == large-only {
+    @media #{$large-only} { @content; }
+  }
+  @else if $media == xlarge-only {
+    @media #{$xlarge-only} { @content; }
+  }
+  @else if $media == xxlarge-only {
+    @media #{$xxlarge-only} { @content; }
+  }
+
+  @else if $media == landscape {
+    @media #{$landscape} { @content; }
+  }
+  @else if $media == portrait {
+    @media #{$portrait} { @content; }
+  }
+  @else if $media == retina {
+    @media #{$retina} { @content; }
+  }
+
+  @else if $media == height and type-of($value) == number {
+    @media #{$screen} and (min-height: $value) { @content; }
+  }
+
+  @else if type-of($media) == number {
+    @media #{$screen} and (min-width: $media) { @content; }
+  }
+
+  @else {
+    @media #{$screen} { @content; }
+  }
+}