Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Use box-sizing: border-box with impunity.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 lib
Octocat-spinner-32 stylesheets
Octocat-spinner-32 .gitignore
Octocat-spinner-32 README.md
Octocat-spinner-32 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;
Something went wrong with that request. Please try again.