diff --git a/compass/stylesheets/_toolkit-no-css.scss b/compass/stylesheets/_toolkit-no-css.scss index 4208483..c99b684 100644 --- a/compass/stylesheets/_toolkit-no-css.scss +++ b/compass/stylesheets/_toolkit-no-css.scss @@ -51,4 +51,9 @@ ////////////////////////////// // Import Equal Height Columns ////////////////////////////// -@import "toolkit/equal-height-columns"; \ No newline at end of file +@import "toolkit/equal-height-columns"; + +////////////////////////////// +// Import Pixel to Rem +////////////////////////////// +@import "toolkit/pixel-to-rem"; \ No newline at end of file diff --git a/compass/stylesheets/_toolkit.scss b/compass/stylesheets/_toolkit.scss index 4d49bd1..30b4135 100644 --- a/compass/stylesheets/_toolkit.scss +++ b/compass/stylesheets/_toolkit.scss @@ -56,4 +56,9 @@ ////////////////////////////// // Import Equal Height Columns ////////////////////////////// -@import "toolkit/equal-height-columns"; \ No newline at end of file +@import "toolkit/equal-height-columns"; + +////////////////////////////// +// Import Pixel to Rem +////////////////////////////// +@import "toolkit/pixel-to-rem"; diff --git a/compass/stylesheets/toolkit/_border-box.scss b/compass/stylesheets/toolkit/_border-box.scss index 8d34fc3..7983e5f 100644 --- a/compass/stylesheets/toolkit/_border-box.scss +++ b/compass/stylesheets/toolkit/_border-box.scss @@ -1,5 +1,5 @@ ////////////////////////////// -// Box Sizing anda wesome Border Box! +// Box Sizing and awesome Border Box! ////////////////////////////// @import "box-sizing"; diff --git a/compass/stylesheets/toolkit/_pixel-to-rem.scss b/compass/stylesheets/toolkit/_pixel-to-rem.scss new file mode 100644 index 0000000..dc30d3d --- /dev/null +++ b/compass/stylesheets/toolkit/_pixel-to-rem.scss @@ -0,0 +1,46 @@ +////////////////////////////// +// Pixel to rem functions. +////////////////////////////// + +$legacy-support-for-ie8 : true !default; +$base-font-size : 16px !default; + + +@mixin pixel-to-rem($item: 'font-size', $value: 16px, $base-size: $base-font-size) { + @if $legacy-support-for-ie8 { + #{$item}: $value; + } + + @if (type-of($value) == 'number') { + #{$item}: pixel-to-rem-calc($value, $base-size); + } + @else if (type-of($value) == 'list') { + $values: null; + + @each $num in $value { + $new: pixel-to-rem-calc($num, $base-size); + @if $values == null { + $values: $new; + } + @else { + $values: append($values, $new); + } + } + #{$item}: $values; + } +} + +@function pixel-to-rem-calc($value, $base-size: $base-font-size) { + @if $value == 0 { + @return 0; + } + + $rem-value: ($value / $base-size); + + @if unit($rem-value) == "px" { + @return ($rem-value / (1px)) + rem; + } + @else { + @return $rem-value + rem; + } +} diff --git a/config.rb b/config.rb index 21aa3d5..1729b4f 100644 --- a/config.rb +++ b/config.rb @@ -1,6 +1,7 @@ -require 'susy' -require 'breakpoint' -require 'respond-to' +require 'compass' +require 'singularitygs' +require 'sassy-strings' +require 'color-schemer' # Require any additional compass plugins here. diff --git a/sass/screen.scss b/sass/screen.scss index a15c748..6e78a97 100644 --- a/sass/screen.scss +++ b/sass/screen.scss @@ -132,4 +132,9 @@ $colors: red, white, blue; @include equal-height-columns($widths, $colors); -} \ No newline at end of file +} + +#pixel-to-rem { + @include pixel-to-rem(font-size, 18px); +} + diff --git a/stylesheets/screen.css b/stylesheets/screen.css index a4affed..93b6c6d 100644 --- a/stylesheets/screen.css +++ b/stylesheets/screen.css @@ -1,9 +1,8 @@ -*, -*:after, -*:before { +*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + *behavior: url('/stylesheets/../behaviors/box-sizing/boxsizing.php'); } img, video { @@ -47,5 +46,11 @@ img, video { background-image: -webkit-linear-gradient(left, #ff0000, #ff0000 25%, #ffffff 25%, #ffffff 75%, #0000ff 75%, #0000ff 100%); background-image: -moz-linear-gradient(left, #ff0000, #ff0000 25%, #ffffff 25%, #ffffff 75%, #0000ff 75%, #0000ff 100%); background-image: -o-linear-gradient(left, #ff0000, #ff0000 25%, #ffffff 25%, #ffffff 75%, #0000ff 75%, #0000ff 100%); + background-image: -ms-linear-gradient(left, #ff0000, #ff0000 25%, #ffffff 25%, #ffffff 75%, #0000ff 75%, #0000ff 100%); background-image: linear-gradient(left, #ff0000, #ff0000 25%, #ffffff 25%, #ffffff 75%, #0000ff 75%, #0000ff 100%); } + +#pixel-to-rem { + font-size: 18px; + font-size: 1.125rem; +}