Initial commit

guardian · Dec 13, 2013 · b88228c · b88228c
commit b88228c
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 1.0.0 (2013-12-13)
+
+Public release.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,13 @@
+Copyright 2014 Guardian News & Media Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/README.md b/README.md
@@ -0,0 +1,54 @@
+# Guss Utilities: rem
+
+## Installation
+
+```
+bower install guss-rem --save
+```
+
+```scss
+@import "path/to/_rem.scss";
+```
+
+## Features
+
+Use rem units in your CSS in a retro-compatible way.
+
+- `rem()` is a Sass function converts pixel values into their rem equivalents
+- `rem(())` is a Sass mixin that takes a set of properties and outputs their
+  equivalent in rem units with a fallback in pixels for older browsers.
+
+Calculations are done assuming a 10px baseline on the `:root` element (ex: `<html style="font-size: 62.5%">`). You can adjust this baseline by changing the value of `$guss-rem-baseline` before importing this Sass partial.
+
+## Example
+
+```scss
+.test {
+    @include rem((
+        padding: 20px 0 0px 3vh,
+        margin: 0 auto 20px,
+        width: 300px,
+        height: 350px,
+        line-height: 20px
+    ));
+    height: rem(20px);
+}
+```
+
+Outputs:
+
+```css
+.test {
+  padding: 20px 0 0px 3vh;
+  padding: 2rem 0 0 3vh;
+  margin: 0 auto 20px;
+  margin: 0 auto 2rem;
+  width: 300px;
+  width: 30rem;
+  height: 350px;
+  height: 35rem;
+  line-height: 20px;
+  line-height: 2rem;
+  height: 2rem;
+}
+```
diff --git a/_rem.scss b/_rem.scss
@@ -0,0 +1,32 @@
+$guss-rem-baseline: 10px !default;
+
+// Transform a value into rem
+// Assuming baseline is set to 10px on :root/html
+@function rem($value, $baseline: $guss-rem-baseline) {
+    @if $value == 0 { @return 0; } // 0rem -> 0
+    @if type-of($value) == list {
+        $result: ();
+        @each $e in $value {
+            $result: append($result, rem($e));
+        }
+        @return $result;
+    } @else {
+        @return if(type-of($value) == number and unit($value) == px, $value / $baseline * 1rem, $value);
+    }
+}
+
+// Output rem units with px fallback
+// Expects $properties to be a Sass map
+// Usage: see font-size mixin below
+// or http://sassmeister.com/gist/7451284
+@mixin rem($properties) {
+    @each $property, $value in $properties {
+        @if (type-of($value) == number and $value != 0) {
+            // Turn any value into pixels
+            $value: if(unitless($value), $value * 1px, $value);
+        }
+
+        #{$property}: $value;
+        #{$property}: rem($value);
+    }
+}
diff --git a/bower.json b/bower.json
@@ -0,0 +1,8 @@
+{
+  "name": "guss-rem",
+  "version": "1.0.0",
+  "main": "_rem.scss",
+  "ignore": [
+    "CHANGELOG.md"
+  ]
+}