Use box-sizing: border-box with impunity.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
stylesheets
.gitignore
README.md
compass-borderbox.gemspec

README.md

Borderbox for Compass

Use box-sizing: border-box; with impunity. Borderbox outputs equivalent CSS for IE6 & 7

Installation

From the command line:

gem install compass-borderbox

Usage

Add to a project:

require "borderbox"

And then import the mixins to your base SASS/SCSS file:

@import "borderbox";

Mixin

borderbox($width [$height], [$padding], [$border]);

Sets box-sizing-compliant values, as well as legacy values for < IE 8

@include borderbox(200px, 10px 0);

@include borderbox(200px 100px, 10px 5px 0, 4px solid black);

@include borderbox(200px, 10px, 3px 0 3px 5px);

Compiles to:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 0;
width: 200px;
*width: 200px;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 5px 0;
border: 4px solid black;
width: 200px;
*width: 182px;
height: 100px;
*height: 82px;

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
border-width: 3px 0 3px 5px;
width: 200px;
*width: 175px;

Global Variables

$global-border-box: false !default;

Set to true if you prefer declaring a global box-sizing prop (Note: you should do this. Otherwise you must constantly check to see if box-sizing is enabled for a property).

Override in your base SASS/SCSS file:

$global-border-box: true;

Then, add a global CSS rule:

* {
	@include box-sizing(border-box);
}

Afterwards your compiled code will be much more compact:

@include borderbox(200px 100px, 10px 5px 0, 4px solid black);

Compiles to:

padding: 10px 5px 0;
border: 4px solid black;
width: 200px;
*width: 182px;
height: 100px;
*height: 82px;