Created
September 23, 2011 21:47
-
-
Save renz45/1238523 to your computer and use it in GitHub Desktop.
Sass mixins I use for responsive design to calculate width percents quickly
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//responsive Design mixins, it's recommended that if you need a different | |
//pageWidth than the default of 960px that proxy functions be made to change the default ex: | |
// =rwidth1($width) | |
// +rwidth($width, 800px) | |
// | |
//this makes it faster to use | |
//calculates a percentage based width based on the pageWidth constant and the given width | |
=rwidth($width,$pageWidth : 960px) | |
/*! #{$width}/#{$pageWidth}*/ | |
width: percentage($width/$pageWidth) | |
=rmargin($top,$right,$bottom,$left, $pageWidth : 960px) | |
@if $top == 0 | |
$top: 0px | |
@if $right == 0 | |
$right: 0px | |
@if $bottom == 0 | |
$bottom: 0px | |
@if $left == 0 | |
$left: 0px | |
/*! #{$top}, #{$right}/#{$pageWidth}, #{$bottom}, #{$left}/#{$pageWidth} */ | |
margin: $top percentage($right/$pageWidth) $bottom percentage($left/$pageWidth) | |
=rpadding($top,$right,$bottom,$left, $pageWidth : 960px) | |
@if $top == 0 | |
$top: 0px | |
@if $right == 0 | |
$right: 0px | |
@if $bottom == 0 | |
$bottom: 0px | |
@if $left == 0 | |
$left: 0px | |
/*! #{$top}, #{$right}/#{$pageWidth}, #{$bottom}, #{$left}/#{$pageWidth} */ | |
padding: $top percentage($right/$pageWidth) $bottom percentage($left/$pageWidth) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment