Merge pull request #7 from walmokrani/em-support

Add em support
hiulit · Nov 10, 2015 · 38e7ff7 · 38e7ff7
2 parents 84652c7 + a6dcf1a
commit 38e7ff7
Show file tree

Hide file tree

Showing 5 changed files with 384 additions and 180 deletions.
diff --git a/css/main.css b/css/main.css
@@ -1,33 +1,47 @@
 body {
-  font-size: 1em;
-  line-height: 1em; }
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+}
 
 h1 {
-  font-size: 3.375em;
-  line-height: 4em;
-  margin-bottom: 1em;
-  margin-top: 2em; }
+  font-size: 4.22222em;
+  line-height: 1.15789em;
+  margin-bottom: 0.28947em;
+  margin-top: 0.57895em;
+}
 
 h2 {
-  font-size: 2.25em;
-  line-height: 3em;
-  margin-bottom: 1em;
-  margin-top: 2em; }
+  font-size: 47px;
+  line-height: 66px;
+  margin-bottom: 22px;
+  margin-top: 44px;
+}
 
 h3 {
-  font-size: 1.5em;
-  line-height: 2em;
-  margin-bottom: 1em;
-  margin-top: 1em; }
+  font-size: 29px;
+  line-height: 44px;
+  margin-bottom: 22px;
+  margin-top: 22px;
+  font-size: 1.8125rem;
+  line-height: 2.75rem;
+  margin-bottom: 1.375rem;
+  margin-top: 1.375rem;
+}
 
 h4 {
-  font-size: 1em;
-  line-height: 1em;
-  margin-bottom: 1em;
-  margin-top: 1em; }
+  font-size: 18px;
+  line-height: 22px;
+  margin-bottom: 22px;
+  margin-top: 22px;
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  margin-bottom: 1.375rem;
+  margin-top: 1.375rem;
+}
 
 p, ul, ol, pre, table, blockquote {
-  margin-bottom: 1em;
-  margin-top: 1em; }
-
-/*# sourceMappingURL=main.css.map */
+  margin-bottom: 22px;
+  margin-top: 22px;
+  margin-bottom: 1.375rem;
+  margin-top: 1.375rem;
+}
diff --git a/scss/_config.scss b/scss/_config.scss
@@ -1,29 +1,46 @@
-// Scale factor variables.
-// Don't change these variables!
-$minorSecond: 1.067;
-$majorSecond: 1.125;
-$minorThird: 1.2;
-$majorThird: 1.25;
-$perfectFourth: 1.333;
-$augmentedFourth: 1.414;
-$perfectFifth: 1.5;
-$minorSixth: 1.6;
-$goldenSection: 1.618;
-$majorSixth: 1.667;
-$minorSeventh: 1.778;
-$majorSeventh: 1.875;
-$octave: 2;
-$majorTenth: 2.5;
-$majorEleventh: 2.667;
-$majorTwelfth: 3;
-$doubleOctave: 4;
+// Scale factor constants.
+// Don't change them ever!
+$MINOR_SECOND: 1.067;
+$MAJOR_SECOND: 1.125;
+$MINOR_THIRD: 1.2;
+$MAJOR_THIRD: 1.25;
+$PERFECT_FOURTH: 1.333;
+$AUGMENTED_FOURTH: 1.414;
+$PERFECT_FIFTH: 1.5;
+$MINOR_SIXTH: 1.6;
+$GOLDEN_SECTION: 1.618;
+$MAJOR_SIXTH: 1.667;
+$MINOR_SEVENTH: 1.778;
+$MAJOR_SEVENTH: 1.875;
+$OCTAVE: 2;
+$MAJOR_TENTH: 2.5;
+$MAJOR_ELEVENTH: 2.667;
+$MAJOR_TWELFTH: 3;
+$DOUBLE_OCTAVE: 4;
 
 // Default font size.
-// Don't change this variable!
-$defaultFontSize: 16;
+// Don't change it ever!
+$SGL_DEFAULT_FONT_SIZE: 16;
 
 // Configurable variables.
 // Ok... You can change these variables! :D
-$baseFontSize: 16;
-$baseLineHeight: 1;
-$scaleFactor: $perfectFifth;
+
+/// Base unit
+///
+/// @type string
+$sgl-base-unit: "pxrem" !default;
+
+/// Base font size
+///
+/// @type number
+$sgl-base-font-size: 18 !default;
+
+/// Base line height
+///
+/// @type number
+$sgl-base-line-height: 1.2 !default;
+
+/// Scale factor
+///
+/// @type number
+$sgl-scale-factor: $GOLDEN_SECTION !default;
diff --git a/scss/_functions.scss b/scss/_functions.scss
@@ -0,0 +1,122 @@
+
+// EXPONENT
+// @see https://github.com/Team-Sass/Sassy-math.
+
+@function exponent($base, $exponent) {
+    @if pow(2, 2) == 4 {
+        @return pow($base, $exponent);
+    }
+
+    $value: $base;
+
+    @if $exponent > 1 {
+        @for $i from 2 through $exponent {
+            $value: $value * $base;
+        }
+    }
+
+    @if $exponent < 1 {
+        @for $i from 0 through -$exponent {
+            $value: $value / $base;
+        }
+    }
+
+    @return $value;
+}
+
+
+
+
+
+// CASTING A STRING TO A NUMBER
+// @see http://hugogiraudel.com/2014/01/15/sass-string-to-number/
+
+@function _length($number, $unit) {
+    $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
+    $units:   1px  1cm  1mm  1%  1ch  1pica  1in  1em  1rem  1pt  1pc  1ex  1vw  1vh  1vmin  1vmax;
+    $index: index($strings, $unit);
+
+    @if not $index {
+        @warn "Invalid unit `#{$unit}`.";
+        @return false;
+    }
+
+    @return $number * nth($units, $index);
+}
+
+@function number($string) {
+    // Matrices
+    $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
+    $numbers:  0   1   2   3   4   5   6   7   8   9;
+
+    // Result
+    $result: 0;
+    $divider: 0;
+    $minus: false;
+
+    // Looping through all characters
+    @for $i from 1 through str-length($string) {
+        $character: str-slice($string, $i, $i);
+        $index: index($strings, $character);
+
+        @if $character == '-' {
+            $minus: true;
+        }
+
+        @else if $character == '.' {
+            $divider: 1;
+        }
+
+        @else {
+            @if not $index {
+                $result: if($minus, $result * -1, $result);
+                @return _length($result, str-slice($string, $i));
+            }
+
+            $number: nth($numbers, $index);
+
+            @if $divider == 0 {
+                $result: $result * 10;
+            }
+
+            @else {
+                // Move the decimal dot to the left
+                $divider: $divider * 10;
+                $number: $number / $divider;
+            }
+
+            $result: $result + $number;
+        }
+    }
+
+    @return if($minus, $result * -1, $result);
+}
+
+
+
+
+
+// UNIT MANAGER
+// @see https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss
+
+@function _strip-unit($num) {
+    @return $num / ($num * 0 + 1);
+}
+
+@function _convert($unit, $value, $base-value: $SGL_DEFAULT_FONT_SIZE) {
+    $value: _strip-unit($value) / _strip-unit($base-value) * number(1 + $unit);
+
+    @if ($value == (0 + $unit)) {
+        $value: 0;
+    }
+
+    @return $value;
+}
+
+@function em-calc($value, $base-value: $SGL_DEFAULT_FONT_SIZE) {
+    @return _convert("em", $value, $base-value);
+}
+
+@function rem-calc($value, $base-value: $SGL_DEFAULT_FONT_SIZE) {
+    @return _convert("rem", $value, $base-value);
+}