Flexible Framework: Float

_float.scss

Float: Requirements

_breakpoint-variables.scss

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>