fortitude-sass 0.3.0

data/app/assets/stylesheets/fortitude/settings/_defaults.scss

@@ -0,0 +1,58 @@
+///*------------------------------------*\
+//    #DEFAULTS
+//\*------------------------------------*/
+
+// These variables are Fortitude’ defaults; they should not be modified or
+// adjusted, you should redfine the variables in your own overrides file and
+// include it in your project before this file.
+
+
+
+
+
+/**
+ * High-level base settings.
+ * 1. Make sure to change the breakpoints in blocks/_container.scss
+ *    if you change $fortitude-breakpoints.
+ */
+
+$fortitude-app-id:                  fortitude !default;
+$fortitude-base-font-size:          1.2rem !default;
+$fortitude-base-line-height:        2rem !default;
+$fortitude-base-color:              #333 !default;
+$fortitude-base-background-color:   #fff !default;
+$fortitude-class-breakpoints:       (
+                                     xs: null,
+                                     sm: 768px,
+                                     md: 992px,
+                                     lg: 1200px
+                                    ) !default; /* [1] */
+$fortitude-breakpoints:             (
+                                      xs: (max-width: 767px),
+                                      sm: (min-width: 768px, max-width: 991px),
+                                      md: (min-width: 992px, max-width: 1199px),
+                                      lg: (min-width: 1200px)
+                                    ) !default;  /* [1] */
+
+
+
+
+
+// Namespace.
+//
+// Would you like Fortitude’ classes to be prepended with a namespace? If so,
+// define it here.
+$fortitude-namespace:               null !default;
+
+
+
+
+
+// These variables are framework variables, sourced from variables defined
+// above. Feel free to use these variables throughout your project, but do not
+// modify or reassign them.
+
+$fortitude-base-spacing-unit:           $fortitude-base-line-height;
+$fortitude-base-spacing-unit--small:    round($fortitude-base-line-height / 2);
+$fortitude-base-spacing-unit--large:    round($fortitude-base-line-height * 2);
+$fortitude-base-rem-font-size:          0.625rem;

data/app/assets/stylesheets/fortitude/tools/_functions.scss

@@ -0,0 +1,115 @@
+///*------------------------------------*\
+//    #FUNCTIONS
+//\*------------------------------------*/
+
+// fortitude makes use of a few functions that are also available for you to use
+// later on in your extension of the framework.
+
+
+
+
+
+// Maths helpers.
+//
+// Halve and double numbers, returning rounded integers. E.g.:
+//
+// .foo {
+//     padding: halve(3.2px);
+// }
+//
+@function quarter($fortitude-value) {
+    @return $fortitude-value / 4;
+}
+
+@function halve($fortitude-value) {
+    @return $fortitude-value / 2;
+}
+
+@function double($fortitude-value) {
+    @return $fortitude-value * 2;
+}
+
+@function quadruple($fortitude-value) {
+    @return $fortitude-value * 4;
+}
+
+
+@function fortitude-strip-unit($fortitude-value) {
+  @return $fortitude-value / ($fortitude-value * 0 + 1);
+}
+
+@function fortitude-px-to-rem($fortitude-value) {
+    @return fortitude-strip-unit($fortitude-value) * 0.1rem;
+}
+
+@function fortitude-rem-to-px($fortitude-value) {
+    @return fortitude-strip-unit($fortitude-value) * 10px;
+}
+
+@function fortitude-block-spacing-unit-height($fortitude-block-height, $fortitude-block-spacing-unit: $fortitude-base-spacing-unit) {
+    $fortitude-value: ceil($fortitude-block-height / $fortitude-block-spacing-unit) * $fortitude-block-spacing-unit;
+    @return $fortitude-value;
+}
+
+@function fortitude-block-spacing-unit-delta($fortitude-block-height, $fortitude-block-spacing-unit: $fortitude-base-spacing-unit) {
+    $fortitude-block-spacing-unit-height: fortitude-block-spacing-unit-height($fortitude-block-height, $fortitude-block-spacing-unit);
+    $fortitude-value: halve($fortitude-block-spacing-unit-height - $fortitude-block-height);
+
+    // normalize value 0rem to 0.
+    @if ($fortitude-value == 0) { $fortitude-value: 0; }
+    @return $fortitude-value;
+}
+
+@function fortitude-block-negitive-padding($fortitude-block-height, $fortitude-block-border-width: 0rem, $fortitude-block-spacing-unit: $fortitude-base-spacing-unit) {
+    $fortitude-value: halve($fortitude-block-height - $fortitude-block-spacing-unit - double($fortitude-block-border-width));
+
+    // normalize value 0rem to 0.
+    @if ($fortitude-value > 0) { $fortitude-value: 0; }
+    @return $fortitude-value;
+}
+
+@function fortitude-block-margin($fortitude-block-height, $fortitude-block-border-width: 0rem, $fortitude-block-spacing-unit: $fortitude-base-spacing-unit) {
+    $fortitude-block-spacing-unit-height: fortitude-block-spacing-unit-height($fortitude-block-height, $fortitude-block-spacing-unit);
+    $fortitude-value: halve($fortitude-block-spacing-unit-height - $fortitude-block-height);
+    
+    @if ($fortitude-value < 0) {
+        $fortitude-value: fortitude-block-negitive-padding($fortitude-block-height, $fortitude-block-border-width, $fortitude-block-spacing-unit) + fortitude-block-spacing-unit-delta($fortitude-block-height, $fortitude-block-spacing-unit);
+    }
+
+    // normalize value 0rem to 0.
+    @if ($fortitude-value == 0) { $fortitude-value: 0; }
+    @return $fortitude-value;
+}
+
+@function fortitude-block-padding($fortitude-block-height, $fortitude-block-border-width: 0rem, $fortitude-block-line-height: $fortitude-base-line-height) {
+    $fortitude-value: halve($fortitude-block-height - $fortitude-block-line-height - double($fortitude-block-border-width));
+
+    // normalize value 0rem to 0.
+    @if ($fortitude-value <= 0) { $fortitude-value: 0; }
+    @return $fortitude-value;
+}
+
+@function fortitude-map-to-query($map) {
+    $query: '';
+    @for $i from 1 through length($map) {
+        $part: "(#{nth(nth($map, $i), 1)}:#{nth(nth($map, $i), 2)})";
+        @if $i != length($map) {
+            $part: str-insert($part, " and ", str-length($part)+1);
+        }
+        $query: str-insert($query, $part, str-length($query)+1);
+    }
+    @return $query;
+}
+
+@function fortitude-query($object) {
+    @if type-of($object) == map {
+        @return fortitude-map-to-query($object);
+    }
+    @elseif type-of($object) == number {
+        @return fortitude-map-to-query((min-width: $object));
+    }
+    @else {
+        @return null;
+    }
+
+}

data/app/assets/stylesheets/fortitude/tools/_mixins.scss

@@ -0,0 +1,58 @@
+///*------------------------------------*\
+//    #MIXINS
+//\*------------------------------------*/
+
+// Fortitude has a number of default mixins that the framework, and developers
+// working with it, can make use of.
+
+// Predefine the variables below in order to alter and enable specific features.
+$fortitude-enable-classes:   false !default;
+
+
+
+@mixin fortitude-breakpoint($fortitude-alias, $fortitude-breakpoints: $fortitude-class-breakpoints) {
+    $fortitude-query: fortitude-query(map-get($fortitude-breakpoints, $fortitude-alias));
+    // if there is no media query.
+    @if not $fortitude-query {
+        @content;
+    } @else {
+        // if there is a media query.
+        @media #{$fortitude-query} {
+            @content;
+        }
+    }
+}
+
+@mixin fortitude-breakpoint-classes($fortitude-breakpoints: $fortitude-class-breakpoints) {
+    @each $fortitude-alias, $fortitude-breakpoint in $fortitude-breakpoints {
+        $fortitude-query: fortitude-query($fortitude-breakpoint);
+        .#{$fortitude-alias} {
+            // if there is no media query.
+            @if not $fortitude-query {
+                @content;
+            }
+            // if there is a media query.
+           @else {
+                @media #{$fortitude-query} {
+                    @content;
+                }
+            }
+        }
+    }
+}
+
+@mixin fortitude-font-size($fortitude-font-size, $fortitude-line-height: true) {
+    font-size: $fortitude-font-size;
+
+    @if $fortitude-line-height == true {
+        line-height: ceil($fortitude-font-size / $fortitude-base-line-height) * $fortitude-base-line-height;
+    }
+}
+
+@mixin fortitude-clearfix {
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}

data/app/assets/stylesheets/fortitude/trumps/_responsive-border.scss

@@ -0,0 +1,35 @@
+$fortitude-responsive-border-unit-total: 1 !default;
+
+@include fortitude-breakpoint-classes {
+    @for $i from 0 through $fortitude-responsive-border-unit-total {
+        ##{$fortitude-app-id} &-b#{$i} {
+            border-width: $i * 0.1rem;
+        }
+
+        ##{$fortitude-app-id} &-btb#{$i} {
+            border-top-width: $i * 0.1rem;
+            border-bottom-width: $i * 0.1rem;
+        }
+
+        ##{$fortitude-app-id} &-brl#{$i} {
+            border-right-width: $i * 0.1rem;
+            border-left-width: $i * 0.1rem;
+        }
+
+        ##{$fortitude-app-id} &-bl#{$i} {
+            border-left-width: $i * 0.1rem;
+        }
+
+        ##{$fortitude-app-id} &-bb#{$i} {
+            border-bottom-width: $i * 0.1rem;
+        }
+
+        ##{$fortitude-app-id} &-br#{$i} {
+            border-right-width: $i * 0.1rem;
+        }
+
+        ##{$fortitude-app-id} &-bt#{$i} {
+            border-top-width: $i * 0.1rem;
+        }
+    }
+}

data/app/assets/stylesheets/fortitude/trumps/_responsive-column.scss

@@ -0,0 +1,37 @@
+$fortitude-responsive-column-total: 12 !default;
+
+@mixin fortitude-column($fortitude-index) {
+    width: percentage($fortitude-index / $fortitude-responsive-column-total);
+}
+
+@mixin fortitude-column-offset($fortitude-index) {
+  margin-left: percentage($fortitude-index / $fortitude-responsive-column-total);
+}
+
+@mixin fortitude-column-push($fortitude-index) {
+  left: percentage($fortitude-index / $fortitude-responsive-column-total);
+}
+
+@mixin fortitude-column-pull($fortitude-index) {
+  right: percentage($fortitude-index / $fortitude-responsive-column-total);
+}
+
+@include fortitude-breakpoint-classes {
+    @for $i from 0 through $fortitude-responsive-column-total {
+        ##{$fortitude-app-id} &-#{$i}of#{$fortitude-responsive-column-total} {
+            @include fortitude-column($i);
+        }
+
+        ##{$fortitude-app-id} &-offset#{$i}of#{$fortitude-responsive-column-total} {
+            @include fortitude-column-offset($i);
+        }
+
+        ##{$fortitude-app-id} &-push#{$i}of#{$fortitude-responsive-column-total} {
+            @include fortitude-column-push($i);
+        }
+
+        ##{$fortitude-app-id} &-pull#{$i}of#{$fortitude-responsive-column-total} {
+            @include fortitude-column-pull($i);
+        }
+    }
+}

data/app/assets/stylesheets/fortitude/trumps/_responsive-display.scss

@@ -0,0 +1,35 @@
+##{$fortitude-app-id} {
+  @include fortitude-breakpoint-classes {
+    &-none {
+      display: none;
+    }
+
+    &-inline {
+      display: inline;
+    }
+
+    &-inline-block {
+      display: inline-block;
+    }
+
+    &-block {
+      display: block;
+    }
+
+    &-table {
+      display: table;
+    }
+
+    &-table-cell {
+      display: table-cell;
+    }
+
+    &-table-column {
+      display: table-column;
+    }
+
+    &-inherit {
+      display: inherit;
+    }
+  }
+}

data/app/assets/stylesheets/fortitude/trumps/_responsive-float.scss

@@ -0,0 +1,13 @@
+@include fortitude-breakpoint-classes {
+    ##{$fortitude-app-id} &-float-left {
+        float: left;
+    }
+
+    ##{$fortitude-app-id} &-float-right {
+        float: right;
+    }
+
+    ##{$fortitude-app-id} &-float-none {
+        float: none;
+    }
+}

data/app/assets/stylesheets/fortitude/trumps/_responsive-font.scss

@@ -0,0 +1,13 @@
+$fortitude-responsive-font-sizes: (alpha: 3.6rem, beta: 3.0rem, gamma: 2.4rem, delta: 1.8rem, epsilon: 1.4rem, zeta: 1.0rem) !default;
+
+@mixin fortitude-font-size-alias($alias, $line-height: false) {
+    @include fortitude-font-size(map-get($fortitude-responsive-font-sizes, $alias), $line-height);
+}
+
+@include fortitude-breakpoint-classes {
+    @each $alias, $size in $fortitude-responsive-font-sizes {
+        ##{$fortitude-app-id} &-#{$alias} {
+            @include fortitude-font-size-alias($alias);
+        }
+    }
+}

data/app/assets/stylesheets/fortitude/trumps/_responsive-height.scss

@@ -0,0 +1,13 @@
+$fortitude-responsive-height-total: 12 !default;
+
+@mixin fortitude-height($fortitude-index) {
+    min-height: $fortitude-base-spacing-unit * $fortitude-index;
+}
+
+@for $i from 1 through $fortitude-responsive-height-total {
+    @include fortitude-breakpoint-classes {
+        ##{$fortitude-app-id} &-#{$i} {
+            @include fortitude-height($i);
+        }
+    }
+}

data/app/assets/stylesheets/fortitude/trumps/_responsive-line-height.scss

@@ -0,0 +1,13 @@
+$fortitude-responsive-line-height-unit-total: 2 !default;
+
+@include fortitude-breakpoint-classes {
+    @for $i from 0 through $fortitude-responsive-line-height-unit-total {
+        ##{$fortitude-app-id} &-inset#{$i} {
+            line-height: $fortitude-base-line-height * $i;
+        }
+
+        ##{$fortitude-app-id} &-inseth#{$i} {
+            line-height: ($fortitude-base-line-height * $i) + halve($fortitude-base-line-height);
+        }
+    }
+}

data/app/assets/stylesheets/fortitude/trumps/_responsive-margin.scss

@@ -0,0 +1,129 @@
+$fortitude-responsive-margin-unit-total: 10 !default;
+$fortitude-responsive-negative-margin-unit-total: 10 !default;
+
+
+@include fortitude-breakpoint-classes {
+    @for $i from 0 through $fortitude-responsive-margin-unit-total {
+        ##{$fortitude-app-id} &-mh#{$i} {
+            margin: $fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit);
+        }
+
+        ##{$fortitude-app-id} &-m#{$i} {
+            margin: $fortitude-base-spacing-unit * $i;
+        }
+
+        ##{$fortitude-app-id} &-mtbh#{$i} {
+            margin-top: $fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit);
+            margin-bottom: $fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit);
+        }
+
+        ##{$fortitude-app-id} &-mtb#{$i} {
+            margin-top: $fortitude-base-spacing-unit * $i;
+            margin-bottom: $fortitude-base-spacing-unit * $i;
+        }
+
+        ##{$fortitude-app-id} &-mrlh#{$i} {
+            margin-right: $fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit);
+            margin-left: $fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit);
+        }
+
+        ##{$fortitude-app-id} &-mrl#{$i} {
+            margin-right: $fortitude-base-spacing-unit * $i;
+            margin-left: $fortitude-base-spacing-unit * $i;
+        }
+
+        ##{$fortitude-app-id} &-mlh#{$i} {
+            margin-left: $fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit);
+        }
+
+        ##{$fortitude-app-id} &-ml#{$i} {
+            margin-left: $fortitude-base-spacing-unit * $i;
+        }
+
+        ##{$fortitude-app-id} &-mbh#{$i} {
+            margin-bottom: $fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit);
+        }
+
+        ##{$fortitude-app-id} &-mb#{$i} {
+            margin-bottom: $fortitude-base-spacing-unit * $i;
+        }
+
+        ##{$fortitude-app-id} &-mrh#{$i} {
+            margin-right: $fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit);
+        }
+
+        ##{$fortitude-app-id} &-mr#{$i} {
+            margin-right: $fortitude-base-spacing-unit * $i;
+        }
+
+        ##{$fortitude-app-id} &-mth#{$i} {
+            margin-top: $fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit);
+        }
+
+        ##{$fortitude-app-id} &-mt#{$i} {
+            margin-top: $fortitude-base-spacing-unit * $i;
+        }
+    }
+    @for $i from 0 through $fortitude-responsive-negative-margin-unit-total {
+        ##{$fortitude-app-id} &-mh-#{$i} {
+            margin: -($fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit));
+        }
+
+        ##{$fortitude-app-id} &-m-#{$i} {
+            margin: -($fortitude-base-spacing-unit * $i);
+        }
+
+        ##{$fortitude-app-id} &-mtbh-#{$i} {
+            margin-top: -($fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit));
+            margin-bottom: -($fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit));
+        }
+
+        ##{$fortitude-app-id} &-mtb-#{$i} {
+            margin-top: -($fortitude-base-spacing-unit * $i);
+            margin-bottom: -($fortitude-base-spacing-unit * $i);
+        }
+
+        ##{$fortitude-app-id} &-mrlh-#{$i} {
+            margin-right: -($fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit));
+            margin-left: -($fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit));
+        }
+
+        ##{$fortitude-app-id} &-mrl-#{$i} {
+            margin-right: -($fortitude-base-spacing-unit * $i);
+            margin-left: -($fortitude-base-spacing-unit * $i);
+        }
+
+        ##{$fortitude-app-id} &-mlh-#{$i} {
+            margin-left: -($fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit));
+        }
+
+        ##{$fortitude-app-id} &-ml-#{$i} {
+            margin-left: -($fortitude-base-spacing-unit * $i);
+        }
+
+        ##{$fortitude-app-id} &-mbh-#{$i} {
+            margin-bottom: -($fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit));
+        }
+
+        ##{$fortitude-app-id} &-mb-#{$i} {
+            margin-bottom: -($fortitude-base-spacing-unit * $i);
+        }
+
+        ##{$fortitude-app-id} &-mrh-#{$i} {
+            margin-right: -($fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit));
+        }
+
+        ##{$fortitude-app-id} &-mr-#{$i} {
+            margin-right: -($fortitude-base-spacing-unit * $i);
+        }
+
+        ##{$fortitude-app-id} &-mth-#{$i} {
+            margin-top: -($fortitude-base-spacing-unit * $i + halve($fortitude-base-spacing-unit));
+        }
+
+        ##{$fortitude-app-id} &-mt-#{$i} {
+            margin-top: -($fortitude-base-spacing-unit * $i);
+        }
+    }
+}
+