materialdesignicons, colors, more layout

assets/css/base/_colors.scss

@@ -0,0 +1,5 @@
+$bleuroi: rgb(61,82,102);
+$gris: rgb(200,204,204);
+$grisfonce: rgb(57,57,64);
+$or: rgb(179,161,125);
+$rouge: rgb(204,61,82);

assets/css/base/_grid.scss

@@ -0,0 +1,92 @@
+// http://www.thesassway.com/intermediate/simple-grid-mixins
+
+
+@mixin row() {
+  // font-size: 0;
+  // white-space: nowrap;
+  position: relative;
+  // >*{
+  //   font-size: 16px;
+  // }
+  &:after{
+    content:"";
+    clear:both;
+    display: block;
+  }
+}
+
+%col-reset {
+    width: 100%;
+    // display: inline-block;
+    // white-space:normal;
+    // font-size: 16px;
+    float:left;
+    box-sizing: border-box;
+}
+
+@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
+  @extend %col-reset;
+  padding-left: $gap*$offset;
+  @if $col == $default_sum {
+    padding-right: 0;
+  }@else{
+    padding-right: $gap;
+  }
+  &:last-child{padding-right: 0;}
+
+  margin-left: percentage(($col/$sum)*$offset);
+
+  // @media only screen and (min-width: 768px) {
+    width: percentage($col/$sum);
+    // vertical-align: $align;
+  // }
+}
+
+.row{
+  @include row;
+  // html:not(.js) &{
+  //   overflow-y: auto;
+  // }
+}
+
+@for $c from 1 through $default_sum {
+  .col-#{$c} {
+      @include col($c);
+  }
+
+  // small
+  .small-col-#{$c} {
+    @media only screen and (max-width: $small-bp) {
+      @include col($c);
+    }
+  }
+
+  // medium
+  .med-col-#{$c} {
+    @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
+      @include col($c);
+    }
+  }
+
+  // large
+  .large-col-#{$c} {
+    @media only screen and (min-width: $med-bp+1) {
+      @include col($c);
+    }
+  }
+
+}
+
+@for $c from 1 through $default_sum - 1 {
+  @for $o from 1 through $default_sum - $c {
+    .col-#{$c}-offset-#{$o} {
+      @include col($c, $o);
+    }
+  }
+}
+
+.col.float-right{
+  float: right;
+  padding-right: 0;
+  padding-left: $default_gap;
+}

assets/css/base/_layout.scss

@@ -0,0 +1,44 @@
+body, html{
+  position: relative;
+  width: 100%;
+  height:100%;
+  font-family: sans-serif;
+  font-style: normal;
+  margin:0;
+  padding:0;
+}
+
+body{
+  overflow:hidden;
+}
+
+#root{
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height:100vh;
+  %layout-element{
+    width:100vw;
+    box-sizing:border-box;
+  }
+  header[role="banner"]{
+    flex: 0 0 auto;
+    @extend %layout-element;
+    padding:1em 1em 0 1em;
+  }
+  section[role="main-content"]{
+    flex:1 1 auto;
+    @extend %layout-element;
+    padding:0 1em 0 1em;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  footer[role="search-bar"]{
+    flex:0 0 auto;
+    @extend %layout-element;
+    // padding-bottom: 1em;
+    >*{
+      padding:0.5em 1em;
+    }
+  }
+}

assets/css/base/_reset.scss

@@ -0,0 +1,40 @@
+html, body{
+  font-size:16px;
+  line-height: 0.9;
+  margin:0; padding:0;
+  background: white;
+}
+
+a{
+	color: inherit;
+	text-decoration: none;
+}
+a, a:focus, a:active { outline: none; }
+a:focus{ -moz-outline-style: none; }
+
+ul {
+  padding:0;
+  margin:0;
+}
+li{
+  padding:0;
+  margin:0;
+  list-style: none;
+}
+
+.visualy-hidden {
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  height: 1px;
+  width: 1px;
+  word-wrap: normal;
+}
+.visualy-hidden:active,
+.visualy-hidden:focus {
+  position: static !important;
+  clip: auto;
+  overflow: visible;
+  height: auto;
+  width: auto;
+}

assets/css/base/_variables.scss

@@ -0,0 +1,9 @@
+$base_font_size:16px;
+
+// grid
+$default_gap: 1em;
+$default_sum: 12;
+
+$small-bp:768px;
+$med-bp:1080px;
+$large-bp:1900px;