Responsive Sass - Compass plugin

Responsive Sass mixins currently supports the Frameless grid, background image resizing, killing mobile zoom and works in all modern desktop/mobile browsers. Additional support for Internet Explorer and older browsers is made possible with a small amount of JavaScript using Respond.

Installation

From the command line:

gem install responsive-sass

Add to a Rails project:

// your.scss
@import 'responsive-sass'

Or create a new project:

gem install compass
gem install responsive-sass
compass create -r responsive-sass path_to_project

• Tell Compass to watch your files

    compass watch path_to_project
  

• In your screen.scss add

    @import "responsive-sass";
  

To use with the Serve Gem

 // compass.config
 require 'responsive-sass'

Media Query Mixins:

Note: Setting your elements height or background is not required.

• Your can set your background image by passing your image url to the background variable.
• You can hide any element by passing $display: true

min-width-960

@include min-width-960($width, $height, "/images/high-res.png");

tablet-portrait

@include tablet-portrait($width, $height, "/images/high-res.png");

tablet-landscape

@include tablet-landscape($width, $height, "/images/high-res.png");

mobile-landscape

@include mobile-landscape($width, $height, "/images/high-res.png");

mobile-portrait

@include mobile-portrait($width, $height, "/images/high-res.png");

high-res

@include high-res($width, $height, "/images/high-res.png");

Frameless Config

$font-size: 16px;     // Your base font-size in pixels
$em: $font-size / 1em;  // Shorthand for outputting ems

$column: 48px;  // The column-width of your grid in pixels
$gutter: 24px;  // The gutter-width of your grid in pixels

Column-widths in variables, in ems

 $cols1: ( 1 * ($column + $gutter) - $gutter) / $em;
 $cols2: ( 2 * ($column + $gutter) - $gutter) / $em;
 $cols3: ( 3 * ($column + $gutter) - $gutter) / $em;
 $cols4: ( 4 * ($column + $gutter) - $gutter) / $em;
 $cols5: ( 5 * ($column + $gutter) - $gutter) / $em;
 $cols6: ( 6 * ($column + $gutter) - $gutter) / $em;
 $cols7: ( 7 * ($column + $gutter) - $gutter) / $em;
 $cols8: ( 8 * ($column + $gutter) - $gutter) / $em;
 $cols9: ( 9 * ($column + $gutter) - $gutter) / $em;
 $cols10: (10 * ($column + $gutter) - $gutter) / $em;
 $cols11: (11 * ($column + $gutter) - $gutter) / $em;
 $cols12: (12 * ($column + $gutter) - $gutter) / $em;
 $cols13: (13 * ($column + $gutter) - $gutter) / $em;
 $cols14: (14 * ($column + $gutter) - $gutter) / $em;
 $cols15: (15 * ($column + $gutter) - $gutter) / $em;
 $cols16: (16 * ($column + $gutter) - $gutter) / $em;

Column-widths in a mixin, in ems

 @mixin width ($cols:1) {
   width: ($cols * ($column + $gutter) - $gutter) / $em;
 }

An easy way to zoom your entire layout in or out (as long as it's set in ems). Just change the media queries to activate them. Assuming your base font-size is 16:

• the first one zooms out by a factor of (16-2)/16 = 0.875

• the second one zooms in by a factor of (16+2)/16 = 1.125

  @media screen and (max-width: 1px) { body { font-size: ($font-size - 2) / $em; } }

  @media screen and (max-width: 1px) { body { font-size: ($font-size + 2) / $em; } }

[More Info] (http://framelessgrid.com/)

Normalize.css

Simply use:

@import "normalize";

Misc Mixins:

kill-mobile-zoom

@include kill-mobile-zoom;

kill-tap-highlight

@include kill-tap-highlight;

License:

Copyright (c) 2011 [Nick Treadway] (http://twitter.com/nicktea) All Rights Reserved.

Licensed under the [MIT license] (http://www.opensource.org/licenses/mit-license.php)

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.

[Frameless Grid] (http://framelessgrid.com/) by [Joni Korpi] (http://jonikorpi.com) is licensed under CC0