SmartFloat Manual

The number of options in the SmartFloat stack may look a bit overwhelming at first sight, but don’t worry. In fact, using this stack is really easy. Below, all options are explained.

SmartFloat: general settings
Here you can set the stack to be responsive, so the floating element will shown above the wrapping element below a given viewport width. The space between the two elements can also be set.

SmartFloat: wrapping element
Here you’ll find the settings for background color, background image and border of the wrapping element.

SmartFloat: floating element
In this part, things are getting interesting, so let’s go through them a little more in detail:
float: position the floating element to the left or right.
When the stack is set to be responsive, the floating element will always be on the top below the breakpoint. If you want content to wrap around it on three sides (above, left/right and bottom), you will need to use another stack above the SmartFloat stack with part of the content. See example #1 for more details.
width: the width of the floating element will be measured from the outer border (left or right) to the middle between the side of the wrapping element and the wrapping content (see example #2).
full width image: when you drag a built in Image stack into the floating element drop zone, the image will be full width and scaled proportionally.
set min. width, set max. width: these options allow you to set the minimum and maximum width of the floating element. They will overrule the width setting if applicable (see example #3 and example #4).
Settings both options to the same value will result in a fixed width floating element (see example #5).
settings for background color, background image, border, border radius: different options can be set for below the breakpoint:
do nothing: the same settings will be used both on big and small screens
use different settings: separate settings will be applied both on small screens
use the setting of the wrapping element: on small screens, the floating element and the wrapping element will have the same background color/background image/border/border radius
Using different background colors or background image on small screens is an important feature when those images or colors are transparent. For more information, see example #6 (background colors) and example #7 (background images).
space around: sets the distance between the wrapping element and its surroundings. Selecting detailed spacing makes it possible to set different values for all four sides
padding: here’s where you can set the padding for the floating element.
The stack needs this value for its calculations, so please don’t use the padding settings of the stack inside the floating element unless you have a very good reason.
When the stack is set to be responsive, the options mentioned in 5.a
 - 5.c can be set for below the breakpoint.

A special note on the border radius on a big screen: the optimum border radius of the floating element is shown in the stack’s info pane – but only when the option detailed spacing (see below) is not selected. This value is calculated from the border radius of the wrapping element, its border width and the distance between the wrapping element and its surroundings and almost always gives the best result. If you use it, you may want to define a different border radius for small screens.

N.B.
some disagree that this is the best way to calculate the inner radius when it is zero. If you agree with that, no problem. You can always overrule this value.

Using the optimum border radius for the floating element on big screens when the option detailed spacing (see below) is selected:
temporarily deselect the option detailed spacing
set the border width and border radius of the wrapping element
set the floating element space around to the value you'll be using with detailed spacing for both the top and the outside (left when floating left; right when floating right)
apply the calculated optimum border radius for the floating element (as shown in the stack’s info pane, fig. 3) to the floating element
select the option detailed spacing again
set the floating element spacing for both the top and the outside to the value you used in step 3.
On screens wider than 768px, this element ‘floats’, so the text on the right (the wrapping element) wraps around it.

On smaller screens, this element is shown above the wrapping element.
This wrapping element has a border width of 12px and a border radius of 60px.

The spacing between the floating element and the edge of the wrapping element is 20px.

The optimum border radius of the floating element on big screens is [60
 - 12 - 20 =] 28px

On screens wider than 768px, this element wraps around the element on the left (the floating element).

On smaller screens, this element is shown below the floating element.
SmartFloat stack info pane
fig. 3
Change the width of your browser window to see the responsive characteristics of the SmartFloat stack.
© 2015-2017 Marathia Web Design | Contact