Float: Requirements

---

Float: Variables

The following float values are the most common. However, there are other values you can add. Be careful. Because display values are tied to breakpoints your css can get rather large.

/* --------------- Float Variables --------------- */

/* Float - The following float values are the most common. However, there are other values you can add. Be careful. Because display values are tied to breakpoints your css can get rather large. */
$floats: ('left', 'right', 'none');

/* --------------- /Float Variables --------------- */

---

Float: Clearfix

The Float Class can be written as follows.

Class	Effect
.clearfix	Allows parent elements to clear floated elements.

---

Float: Class Prefix Options (Required)

The Float Class Prefix can be written in different ways depending on your desired specificity.

Minimal	.fl
Strict	.float

Float: Class Breakpoint Extensions (Required)

The following breakpoint extension can be customized and extended in the variable-settings.scss file.

Ext	Def	Breakpoint	Device
-tn	tiny	0px	Small Phone
-xs	extra-small	480px	Phone
-sm	small	640px	Small Tablet
-md	medium	768px	Tablet
-lg	large	992px	Laptop
-xl	extra-large	1200px	Desktop
-pr	print	Printed Page	All Devices

Float: Class Value Extensions (Required)

The following Float values are provided as they are the most commonly used. Float values can be altered in the variable-settings.scss file. Be careful. Float values are tied to breakpoints. Your css can get rather large.

-right

-left

-none

Float: Example Code

<!-- Minimal: Float right then float left if the screeen is 768px wide. -->
<div class="clearfix">
	<div class="fl-tn-right fl-md-left">Float</div>
</div>

<!-- Strict: Float left then float right if the screeen is 768px wide. -->
<div class="clearfix">
	<div class="float-tn-right float-md-inline-left">Float</div>
</div>