_floats.scss

// =============================
// Enable Private Variables
// =============================

$_floats-enable:          true !default;
$_viewport-floats-enable: true !default;

// =============================
// Core Float Utility Helper Classes
// =============================

// Un-namespaced Classes are to be used globally when an elements layout is consistant across all viewports.

@if ($_floats-enable) {
	.float-left,
	%float-left  {
		float: left  !important
	}
	.float-right,
	%float-right {
		float: right !important
	}
	.float-none,
	%float-none  {
		float: none  !important
	}
}

// =============================
// Core Viewport Float Utility Helper Attributes
// =============================

//
// Core Viewport Margin Utility Helper Attributes are generated via the below loop to create attributes for certain viewports.
// The advantage to this, is it allows floats to be added to a certain element specifically for a breakpoint which you have defined.
// Example Use - data-desk="float-left" data-lap="float-none".
//

@if ($_viewport-floats-enable) {
	@each $viewport, $breakpoint in $viewport-values {

	  // Attributes only apply once certain breakpoint is triggered.

		@include media-query($from: nth($breakpoint, 1),
		                     $to:   nth($breakpoint, 2)) {
	    [data-#{$viewport}~="float-left"]  { float: left  !important }
	    [data-#{$viewport}~="float-right"] { float: right !important }
	    [data-#{$viewport}~="float-none"]  { float: none  !important }
	  }

	}
}