Plumber extension to align boxes to the vertical grid.

Use this mixin whenever you need to add margins, paddings, and borders to a flexible container element without breaking the grid.

First, make sure to install and import plumber-sass before using plumber-box.

Download and extract the latest release, move _plumber-box.scss into the vendor folder of your project and import it:

@import "vendor/plumber-box";

Install:

# NPM
$ npm install plumber-box --save-dev

# Yarn
$ yarn add plumber-box --dev

And import it in your project:

@import "node_modules/plumber-box/plumber-box";

Install:

$ bower install plumber-box --save-dev

And import it in your project:

@import "bower_components/plumber-box/plumber-box";

1. Set up the grid height for Plumber if you haven't done it before:

@include plumber-set-defaults($grid-height: 1rem);

2. Include the plumber-box mixin. Specify margins and paddings as multiples of the grid height.

blockquote {
	@include plumber-box(
		$margin: 2 0, // top margin: 2, bottom margin: 0
		$padding: 1 1 // top padding: 1, bottom padding: 1
	);
}

This will generate the following CSS:

blockquote {
	margin-top: 2rem;
	padding-top: 1rem;
	margin-bottom: 0;
	padding-bottom: 1rem;
}

Borders can be set on the inside or on the outside of the box, taking away some space from the padding or margin respectively.

Add the $border parameter to the mixin, define borders and box-sizing:

blockquote {
	@include plumber-box(
		$margin: 2 0,
		$border: 2px 2px,
		$padding: 1 1
	);

	border: 2px solid gold;
	box-sizing: border-box;
}

The border width will be substracted from the padding.

Inside borders cannot be used with 0 padding.

Use the CSS outline property to add outside borders:

blockquote {
	@include plumber-box(
		$margin: 2 0,
		$padding: 1 1
	);

	outline: 2px solid gold;
}

The outline will visually decrease the margin but it is not included in the element size so it won't break the grid.

Rounded borders are not possible with this method.

You can use shorthands to set the same top and bottom values:

blockquote {
	@include plumber-box(
		$margin: 2, // top and bottom margin
		$border: 1px // top and bottom border
		$padding: 1 // top and bottom padding
	);
}

The main mixin.

Parameters: All parameters are optional, the default grid height can be set with plumber-set-defaults.

Output: margin-top, margin-bottom, padding-top, padding-bottom properties with the same unit as the grid height.

MIT License