.scss rules and mixins for miscellaneous alignment, floats, margins, and padding

_helpers.scss

//
// Miscellaneous useful HTML classes and responsive overrides
// for alignment, floats, margins, and padding
//
.left, %left					{ float: left !important; }
.right, %right					{ float: right !important; }
.clear, %clear 					{ clear: both !important; }
.clear-left, %clear-left 		{ clear: left !important; }
.clear-right, %clear-right 		{ clear: right !important; }
.float-reset, %float-reset		{ float: none !important; }
.clearfix, %clearfix			{ @include clearfix; }
.text-left, %text-left			{ text-align: left !important; }
.text-right, %text-right		{ text-align: right !important; }
.text-center, %text-center		{ text-align: center !important; }
.text-justify, %text-justify	{ text-align: justify !important; }
.hide							{ display: none; }

// use the above classes if you want it to apply to everything (tiny up).
// use the below mixin for overriding as the screen grows in width.
@mixin responsive-helpers($size-up, $size) {
	@media #{$size-up} {
		.#{$size}-left			{ float: left !important; }
		.#{$size}-right			{ float: right !important; }
		.#{$size}-clear 		{ clear: both !important; }
		.#{$size}-clear-left	{ clear: left !important; }
		.#{$size}-clear-right	{ clear: right !important; }
		.#{$size}-clearfix		{ @include clearfix; }
		.#{$size}-text-left		{ text-align: left !important; }
		.#{$size}-text-right	{ text-align: right !important; }
		.#{$size}-text-center	{ text-align: center !important; }
		.#{$size}-text-justify	{ text-align: justify !important; }
		.#{$size}-hide			{ display: none; }
	}
}
@include responsive-helpers($small-up, small);
@include responsive-helpers($medium-up, medium);
@include responsive-helpers($large-up, large);
@include responsive-helpers($xlarge-up, xlarge);
@include responsive-helpers($xxlarge-up, xxlarge);

// @mixin
// Padding and Margin adjustments. 
// $type: "padding" or "margin".
// $sizes: the different size names used --> tiny, small, medium, large
// $adjust: the base number used for adjustments to margins and paddings
@mixin layout-adjustments($types, $sizes, $adjust: rem-calc(20)) {
	@each $type in $types {
		@each $size in $sizes {
			$multiplier: null;
			@if $size == tiny 		{ $multiplier: $tiny-multiplier; }
			@if $size == small 		{ $multiplier: $small-multiplier; }
			@if $size == medium		{ $multiplier: $default-multiplier; }
			@if $size == large 		{ $multiplier: $large-multiplier; }

			@if $type == margin {
				
				.margin-pull-up-#{$size} 		{ margin-top: -$adjust * $multiplier; }
				.margin-pull-right-#{$size} 	{ margin-right: -$adjust * $multiplier; }
				.margin-pull-down-#{$size} 		{ margin-bottom: -$adjust * $multiplier; }
				.margin-pull-left-#{$size} 		{ margin-left: -$adjust * $multiplier; }

			} // end @if $type == margin

			.#{$type}-top-#{$size} 		{ #{$type}-top: $adjust * $multiplier; }
			.#{$type}-right-#{$size} 	{ #{$type}-right: $adjust * $multiplier; }
			.#{$type}-bottom-#{$size} 	{ #{$type}-bottom: $adjust * $multiplier; }
			.#{$type}-left-#{$size} 	{ #{$type}-left: $adjust * $multiplier; }

			.#{$type}-horiz-#{$size}	{ #{$type}-top: $adjust * $multiplier;
										              #{$type}-bottom: $adjust * $multiplier; }

			.#{$type}-vert-#{$size}		{ #{$type}-left: $adjust * $multiplier;
										              #{$type}-right: $adjust * $multiplier; }

			.#{$type}-all-#{$size}		{ #{$type}: $adjust * $multiplier; }
		
		} // end @each $size in $sizes
	} // end @each $type in $types
}
@include layout-adjustments((margin padding), (tiny small medium large));