From b88228cae64abd4a2cebaed2c95c778bb386d7c7 Mon Sep 17 00:00:00 2001 From: Kaelig Date: Fri, 13 Dec 2013 17:52:46 +0000 Subject: [PATCH] Initial commit --- CHANGELOG.md | 3 +++ LICENSE | 13 +++++++++++++ README.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++ _rem.scss | 32 +++++++++++++++++++++++++++++++ bower.json | 8 ++++++++ 5 files changed, 110 insertions(+) create mode 100644 CHANGELOG.md create mode 100644 LICENSE create mode 100644 README.md create mode 100644 _rem.scss create mode 100644 bower.json diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..c2edefd --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,3 @@ +## 1.0.0 (2013-12-13) + +Public release. diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..7bac282 --- /dev/null +++ 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. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..663f039 --- /dev/null +++ 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: ``). 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; +} +``` \ No newline at end of file diff --git a/_rem.scss b/_rem.scss new file mode 100644 index 0000000..5a09b20 --- /dev/null +++ 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 new file mode 100644 index 0000000..f82368d --- /dev/null +++ b/bower.json @@ -0,0 +1,8 @@ +{ + "name": "guss-rem", + "version": "1.0.0", + "main": "_rem.scss", + "ignore": [ + "CHANGELOG.md" + ] +} \ No newline at end of file