init

public/scss/utils/_aligner.scss

@@ -0,0 +1,48 @@
+/**
+ *  ALIGNERS
+ */
+
+// container
+.aligner {
+  display: flex;
+
+  &--spaceBetween {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &--spaceAround {
+    justify-content: space-around;
+    width: 100%;
+  }
+
+  &--centerVertical {
+    align-items: center;
+  }
+
+  &--centerHoritzontal {
+    justify-content: center;
+  }
+
+  &--contentStart {
+    justify-content: flex-start;
+  }
+
+  &--contentEnd {
+    justify-content: flex-end;
+  }
+}
+
+// item
+.aligner--itemTop {
+  align-self: flex-start;
+}
+
+.aligner--itemBottom {
+  align-self: flex-end;
+}
+
+.flex-grow, // deprecated
+.aligner--grow {
+  flex-grow: 1;
+}

public/scss/utils/_background.scss

@@ -0,0 +1,11 @@
+/**
+ *  BACKGROUND
+ */
+
+.bg {
+  @each $type, $color in $c-map {
+    &-#{$type} {
+      background-color: $color;
+    }
+  }
+}

public/scss/utils/_border.scss

@@ -0,0 +1,23 @@
+/**
+ *  BORDER
+ */
+
+.border {
+  border: $bd-medium;
+}
+
+.border-bottom {
+  border-bottom: $bd-medium;
+}
+
+.border-left {
+  border-left: $bd-medium;
+}
+
+.border-right {
+  border-right: $bd-medium;
+}
+
+.border-top {
+  border-top: $bd-medium;
+}

public/scss/utils/_breakpoints.scss

@@ -0,0 +1,119 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.1.
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name) {
+      @content;
+    }
+  }
+}

public/scss/utils/_default.scss

@@ -0,0 +1,39 @@
+/**
+ *  MAIN RULES
+ */
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  outline: none;
+}
+
+body {
+  background-color: $bgc-body;
+  min-height: 100%;
+  overflow-x: hidden;
+  position: relative;
+}
+
+p {
+  font-weight: normal;
+  margin-bottom: $mb-p;
+}
+
+img {
+  max-width: 100%;
+}
+
+strong {
+  font-weight: $fw-strong;
+}
+
+ul {
+  margin-bottom: $mb-ul;
+}
+
+li {
+  list-style: none;
+  margin-bottom: $mb-li;
+}

public/scss/utils/_grid.scss

@@ -0,0 +1,52 @@
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+@if $enable-grid-classes {
+  .container {
+    @include make-container;
+    @include make-container-max-widths;
+  }
+}
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but with 100% width for
+// fluid, full width layouts.
+
+@if $enable-grid-classes {
+  .container-fluid {
+    @include make-container;
+  }
+}
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
+@if $enable-grid-classes {
+  .row {
+    @include make-row;
+  }
+
+  // Remove the negative margin from default .row, then the horizontal padding
+  // from all immediate children columns (to prevent runaway style inheritance).
+  .no-gutters {
+    margin-left: 0;
+    margin-right: 0;
+
+    > .col,
+    > [class*='col-'] {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@if $enable-grid-classes {
+  @include make-grid-columns;
+}

public/scss/utils/_helpers.scss

@@ -0,0 +1,126 @@
+/**
+ *  FLOATS
+ */
+
+.fleft {
+  float: left;
+}
+
+.fright {
+  float: right;
+}
+
+.clearfix {
+  ::after {
+    clear: both;
+    content: '';
+    display: table;
+  }
+}
+
+/**
+ *  MARGINS
+ */
+
+.m-xsmall {
+  margin: $m-xsmall;
+}
+
+.mb-xsmall {
+  margin-bottom: $m-xsmall;
+}
+
+.m-small {
+  margin: $m-small;
+}
+
+.mb-small {
+  margin-bottom: $m-small;
+}
+
+.m-medium {
+  margin: $m-medium;
+}
+
+.mb-medium {
+  margin-bottom: $m-medium;
+}
+
+.m-big {
+  margin: $m-big;
+}
+
+.mb-big {
+  margin-bottom: $m-big;
+}
+
+.m-huge {
+  margin: $m-huge;
+}
+
+.mb-huge {
+  margin-bottom: $m-huge;
+}
+
+.m-none {
+  margin: 0 !important;
+}
+
+/**
+ *  PADDINGS
+ */
+.p-small {
+  padding: $p-small;
+}
+
+.pb-small {
+  padding-bottom: $p-small;
+}
+
+.p-medium {
+  padding: $p-medium;
+}
+
+.pb-medium {
+  padding-bottom: $p-medium;
+}
+
+.p-big {
+  padding: $p-big;
+}
+
+.pb-big {
+  padding-bottom: $p-big;
+}
+
+.p-huge {
+  padding: $p-huge;
+}
+
+.pb-huge {
+  padding-bottom: $p-huge;
+}
+
+/**
+ *  OTHERS
+ */
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.opacity-low {
+  opacity: .5;
+}
+
+.rounded-corners {
+  border-radius: $bdr-rounded-corners;
+}
+
+.rounded {
+  border-radius: 100%;
+}

public/scss/utils/_layout.scss

@@ -0,0 +1,51 @@
+/**
+ * LAYOUT
+ */
+
+.section {
+  @include media-breakpoint-up(md) {
+    padding-bottom: $p-huge * 2;
+    padding-top: $p-huge * 2;
+  }
+  padding-bottom: $p-huge;
+  padding-top: $p-huge;
+
+  & + & {
+    padding-top: 0;
+  }
+}
+
+.container {
+  @include media-breakpoint-up(md) {
+    padding-left: $w-gutter;
+    padding-right: $w-gutter;
+  }
+  background-color: $bgc-container;
+  margin: 0 auto;
+  max-width: $mwi-container;
+  padding-left: $w-gutter / 2;
+  padding-right: $w-gutter / 2;
+  width: 100%;
+}
+
+.container-medium {
+  @include media-breakpoint-up(md) {
+    padding-left: $w-gutter;
+    padding-right: $w-gutter;
+  }
+  margin: 0 auto;
+  max-width: $mwi-container-medium;
+  padding-left: $w-gutter / 2;
+  padding-right: $w-gutter / 2;
+}
+
+.container-small {
+  @include media-breakpoint-up(md) {
+    padding-left: $w-gutter;
+    padding-right: $w-gutter;
+  }
+  margin: 0 auto;
+  max-width: $mwi-container-small;
+  padding-left: $w-gutter / 2;
+  padding-right: $w-gutter / 2;
+}

public/scss/utils/_reset.scss

@@ -0,0 +1,34 @@
+/**
+ * Reset
+ */
+
+@if $enable-reset-defaults {
+  html,body,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video {
+    background: transparent;
+    border: 0;
+    font-size: 100%;
+    margin: 0;
+    outline: 0;
+    padding: 0;
+    vertical-align: baseline;
+  }
+
+  article,
+  aside,
+  figure,
+  footer,
+  header,
+  main,
+  nav,
+  section {
+    display: block;
+  }
+
+  * {
+    &,
+    &:before,
+    &:after {
+      box-sizing: border-box;
+    }
+  }
+}

public/scss/utils/_typography.scss

@@ -0,0 +1,124 @@
+/**
+ *  TYPOGRAPHY
+ */
+
+body {
+  color: $c-body;
+  font-family: $ff-body;
+  font-size: $fz-body;
+  font-weight: $fw-body;
+  line-height: $lh-body;
+}
+
+a {
+  color: $c-link;
+  text-decoration: none;
+
+  &:hover {
+    color: $c-link-hover;
+  }
+
+  &:focus {
+    color: $c-primary;
+  }
+}
+
+
+// Sizes
+.text {
+  &-huge, &-big, &-medium {
+    margin-bottom: 1em;
+  }
+
+  &-huge {
+    font-size: $fz-huge;
+    line-height: $lh-huge;
+  }
+
+  &-big {
+    font-size: $fz-big;
+    line-height: $lh-big;
+  }
+
+  &-medium {
+    font-size: $fz-medium;
+    line-height: $lh-medium;
+  }
+
+  &-small {
+    font-size: $fz-small;
+    line-height: $lh-small;
+  }
+
+  // set default font state.
+  &-body {
+    font-size: $fz-body;
+    line-height: $lh-body;
+  }
+}
+
+// Colors
+.text {
+  @each $type, $color in $c-map {
+    &-#{$type} {
+      color: $color;
+    }
+  }
+}
+
+// Styles
+.text-light {
+  font-weight: $fw-light;
+}
+
+.text-normal {
+  font-weight: $fw-normal;
+}
+
+.text-lineThrough {
+  text-decoration: line-through;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-underline {
+  text-decoration: underline;
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+// titles after titles
+.text-withSubtitle {
+  margin-bottom: 0 !important;
+
+  + .text-huge,
+  + .text-big,
+  + .text-medium,
+  + .text-small, {
+    margin-top: .5em;
+  }
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-weight: $fw-headings;
+}
+
+// Aligners
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-left {
+  text-align: left;
+}