Image
Stacks add-on

Flux

The Flux stack is a versatile layout tool that provides you the ability to create monumental page designs. Once mastered Flux will completely change how you look at page design.

Below we look at each of the settings included in the Flux stack and talk about what they do, and how they affect the stack's functionality. In addition we have a tutorial and walk-thru video below that helps get you started using the stack, as well as gives you an idea what the stack can do. For examples of the stack in action, please visit the product page.


Tutorials

Getting Started

Overlapping Items
Full-page Layout

Building up your Flux stack skills

Below we look at what each of the settings within the stack does. This is good reference in case you get stuck when building pages, as well as to get an idea of what controls exist in the stack before you purchase it.

Flux has two main components that you'll be working with when building your grid-based layouts -- the main parent stack, which acts as our grid container, and the child stacks which act as our grid items and is where our content lives.

We'll look at both below in their own sections, but know that you'll be working with both throughout the design of your layouts. While having this documentation on hand for reference is important, we find that learning and teaching the grid layout workflow is easier to understand in video form, which is why we offer tutorials above that we highly recommend watching through at least once.

Proper Preparation

Flux is a powerful and versatile design tool. And we all know the wisdom Uncle Ben imparted on a young Peter Parker...

With great power comes great responsibility.

When you're starting to learn how to use Flux it can be easy to get overwhelmed in the large number of settings and controls. We find, at least in the beginning, that it is highly beneficial to plan out your design on a scrap sheet of paper before diving in to create your layout in the Flux stack. Having a plan is the key to success.

Parent Stack

The main Parent stack for Flux acts as our grid container, making up the outer structure of our layout that will contain each of our child stack grid items.

The Parent stack contains three sections of settings -- one for each of the three breakpoints. Each section has very similar controls. This will similarly be seen in our child stacks as well.

By default the Mobile and Tablet breakpoints are enabled. We find that most layouts that work at the Desktop breakpoint also work at the Tablet breakpoint. This saves us a bit of time if building out designs. That said, you can enable the Desktop breakpoint for even more refined control.

Image

All breakpoints

The Mobile breakpoint is always enabled as it is the minimum we need for our design in the mobile-first approach.

FIXED HEIGHT
This allows us to set an overall height for the entire grid container. When enabled you'll be presented with a field for setting the height value for this breakpoint, as well as the ability to choose what unit of measurement will be used to determine this height at this breakpoint. You have the option of choosing from the following unit types:

  • Pixels (px)
  • Percentage (%)
  • View Height (vh) - Default
  • View Width (vw)

GAPS
The Gaps setting is the spacing between our grid items in the layout. Many people also refer to this as the gutters in a layout. You have the option in Flux of setting a different value for both the Gaps between columns and rows.

GAPS UNITS
The gutters, or Gaps, in your layout can be set using either a fixed value by choosing Pixels here, or a variable value by choosing Percentage from the drop down. The Gaps Units defaults to Pixels as it is the most commonly used.

COLUMNS
This is where we'll determine how many columns are going to be in our overall grid container. You can choose a few different ways to determine the column setup. Some settings are pretty straight forward while others can be quite complex. As you learn more and grow into using the grid-based layout of Flux you'll likely venture into the more complex settings. By default we use the "Repeat" setting to make it easy to understand, but you can choose from the following methods:

  • Auto - Tries to base your column count off of the content within them. While auto sounds like the easiest to understand, it is actually a bit more complex as each column can vary in size.
  • Minimum Value - This setting allows the number of columns to expand to fit our content as well, but provides a setting which sets a minimum width for the column, keeping the content inside from ever getting too small for our liking.
  • Repeat (x 1fr) - The Repeat setting is the easiest to use and understand. It creates a specified number of columns all which are 1fr in size. This setting is our default.
  • Advanced - When enabled you'll be given a text field into which you can write your own CSS Grid template definition. This is, without a doubt, a more advanced feature. It gives you a great deal of control, but you'll need to know a bit about CSS Grid to make use of it. This is a setting to grow into.
What is the fr unit?

CSS Grid, which Flux is built around, has access to the fr unit. This unit represents a fraction of the space within our grid layout. This is a flexible measurement unit.

When using our Repeat (x 1fr) setting for example we'll be creating X number of 1fr wide columns. This means the width for each column within a layout with 4 1fr wide columns would be 25% of the overall Flux stack's width.

Advanced Examples

When using the Advanced setting for the Columns and Rows you're actually leveraging CSS Grid's templating definitions.

Let's take a look at some examples of how we can make use of this advanced setting in configuring our columns setup for the parent Flux stack:

EXAMPLE ONE
Here we'll create three rows of varying sizes, and mixed sizing units. This defines our first columns as being a set 300px in size. Our second column, set to 1fr will be a flexible section and will take up the remainder of the space not allotted to columns one and three. Column three, much like column one, will be a fixed size of 150px wide.

300px 1fr 150px

EXAMPLE TWO
In this example we'll use CSS Grid's repeat functionality to create three columns of a fixed size, each being 150px, as well as one last column that is 1fr, which like before will take up the remainder of the space in the parent stack.

repeat(3, 150px) 1fr

NOTE
This can also be applied to Rows as well, when using the Advanced option. You'd simply think of it in terms of rows instead of columns.

ROWS
Much like the Columns configuration you have access to various ways of setting up your row layout within your grid. This is where we'll determine how many rows we'll be using for our grid container. With that said however, rows are often more flexible within CSS Grid and we can often let the container itself decide how many rows we have using the Auto feature. This is why the Rows setting defaults to Auto.

  • Auto - Tries to base your row layout and count on the grid items within your grid. This is our default setting for Rows.
  • Repeat (x 1fr) - The Repeat setting for Rows works just like the Columns configuration. It creates a specified number of rows all which are 1fr in size.
  • Advanced - When enabled you'll be given a text field into which you can write your own CSS Grid template definition for your Rows. This is, without a doubt, a more advanced feature. It gives you a great deal of control, but you'll need to know a bit about CSS Grid to make use of it. This is a setting to grow into.

COLUMNS & ROWS NOTE
The columns and rows for each breakpoint will bleed over into one another depending on your settings.

For example: If you have just the Mobile and Tablet breakpoints enabled in the main parent stack for Flux the Tablet settings for Columns & Rows will be applied to the Desktop breakpoint as well.

Likewise if say you have the Mobile and Desktop breakpoints enabled, and the Tablet breakpoint turned off, the the Mobile breakpoint Columns and Rows settings will be applied to the Tablet breakpoint.

This is called Mobile first design.

PADDING
Here we can set the padding that is applied to the parent stack, around the entirety of our overall grid container. We're able to apply a unified padding to all sides, or we can click on the small plus button to expand the detailed controls and set a different value for each side of the grid.

BORDER
This setting allows us to add a border to the outside of the parent stack, which surrounds our entire grid container. We can choose a unified border size that is applied to all sides, or click the small plus icon to active the detailed settings. With the detailed settings we can apply a different border size to each side individually.

Here you'll also find a color picker for setting the color of the border.

ROUNDED CORNERS
Here we determine the border radius, or roundness of the parent stack's corners. We can set the roundness of the corners, which is applied to the parent stack, uniformly to all corners or we can click on the small plus button to expand the detailed controls and set a different value for each corner of the grid container.

BACKGROUND STYLE
Here we're able to add a background to the main parent stack, or grid container. We can choose from the following background styles for our container grid:

  • Image (drop-and-drop)
  • Remote Image
  • Color Picker (solid color)
  • Gradient
  • None

Depending on your background style selection you'll be presented with controls to assign an image, URL or choose colors using color pickers. As with all of the controls above, you can assign different background styles at each of the three responsive breakpoints.

SHADOW
Allows you to add a drop shadow to the main parent stack. You're given the ability to adjust the shadow's display settings when this feature is enabled.


Child Stacks

The child stacks for Flux act as our grid items. These will make up the individual cells of our grid. We'll be able to set their positioning, styling, sizing and more, at each of the responsive breakpoints.

Flux has two child stacks that can be added to the main parent stack using the small plus button at the bottom of the stack. These two stacks both work the same in terms of the grid layout options. The only difference is that one of the two can have animations applied to it.Below we'll cover the settings for the standard, non-animated version of the child stack, and then at the end we'll take a look at the animation settings found in the animatable version.

The child stacks contain sections of settings for each of the three responsive breakpoints. Each section has very similar controls. This will similarly be seen in our child stacks as well.

By default the Mobile and Tablet breakpoints are enabled. We find that most layouts that work at the Desktop breakpoint also work at the Tablet breakpoint. This saves us a bit of time if building out designs. That said, you can enable the Desktop breakpoint for even more refined control.

Image
Edit Mode

SHOW BACKGROUND
When enabled the background you apply to the Mobile breakpoint (the most common place backgrounds are applied) is shown as the child stacks's background in Edit Mode to give you a reference point. This helps identify grid items at a glance in Edit Mode. You can disable this on a per-stack basis for the grid items child stacks.

Image

All breakpoints

The Mobile breakpoint is always enabled as it is the minimum we need for our design in the mobile-first approach.

SPECIFIC GRID LOCATION
When enabled you will be able to specify the starting column and row location in which this grid item will begin. This is helpful in letting us know exactly where an item will start, and can also let us overlap items. In addition to a starting column and row input, we'll also be given a z-index value field as well which helps with layering items.

This feature is off by default, meaning that each item is laid out in the order it is added to the parent stack in Edit Mode. This also precludes child stacks from overlapping one another or showing in a specific location.

COLUMNS & ROWS SPAN
This setting allows us to specify the size of the area we wish to have our grid item span. We can set, individually, the number of columns and the number of rows that the item will take up within our grid container, or parent stack.

JUSTIFY CONTENT
One of the benefits of CSS Grid, which is the basis of Flux, is that we can justify our content vertically within each item. This means we can choose to have the content align, in the following ways, within the grid item at each of the responsive breakpoints:

  • Start - This begins our content at the top, or start, of the grid item.
  • Center - Using this setting will center our content vertically within the grid item.
  • End - The places our content at the bottom, or end, of our grid item.
  • Space Around - The spreads our content out vertically within the confines of the grid item. It keeps a uniform spacing between items within this grid item. It also adds the same uniform spacing around the items at the start and end of the grid item.
  • Space Between - The spreads our content out vertically within the confines of the grid item. It keeps a uniform spacing between items within this grid item. Unlike Space Around though, the Space Between setting does not add spacing at the start or end of the grid item.

Justify Tip: Each stack added into a Flux child stack is considered when applying Justify Content. To have several items be treated as one you can place them into a plain Stacks 1 column stack. This provides a wrapper to signify to Flux's child stack that these items should be treated as one.

ALIGN ITEMS
This setting is similar to the Justify Content setting, but in this case instead of working with the vertical placement of content in our grid item we're adjusting the horizontal alignment of our content. We can choose to have the content align, in the following ways, within the grid item at each of the responsive breakpoints:

  • Start - This begins our content at the left-hand side, or start, of the grid item.
  • Center - Using this setting will center our content horizontalley within the grid item.
  • End - The places our content at the right-hand side, or end, of our grid item.

MINIMUM HEIGHT
This setting allows you to set a minimum height for your grid item. This can be useful for grid items that don't have content, but only a background applied to them. Depending on your layout the minimum height of one item may affect the height of other items within its row. This usually only occurs when not using the Specific Grid Location feature.

PADDING
Here we can set the padding that is applied to individual child stacks. We're able to apply a unified padding to all sides, or we can click on the small plus button to expand the detailed controls and set a different value for each side of the child stack grid item.

ROUNDED CORNERS
Here we determine the border radius, or roundness of the child stack's corners. We can set the roundness of the corners uniformly to all corners of the child stack, or we can click on the small plus button to expand the detailed controls and set a different value for each corner of the grid item.

BACKGROUND STYLE
Here' we're able to add a background to individual child stacks, or grid items. We can choose from the following background styles for our container grid:

  • Image (drop-and-drop)
  • Remote Image
  • Color Picker (solid color)
  • Gradient
  • None

Depending on your background style selection you'll be presented with controls to assign an image, URL or choose colors using color pickers. As with all of the controls above, you can assign different background styles at each of the three responsive breakpoints.

SHADOW
Allows you to add a drop shadow to the grid item child stack. You're given the ability to adjust the shadow's display settings when this feature is enabled.

More Settings

All of the above settings for the child stack can be adjusted individually at the Mobile, Tablet and Desktop breakpoints. Now let's look at the remaining settings for the child stack which are set for all breakpoints.

Border

BORDER STYLE
Allows you to choose the type of border to be applied to the individual child stack grid item.

BORDER COLOR
Here you can adjust the color of the child stack's border uniformly for all four sides of the grid item. Clicking the small plus icon gives us the detailed view, which lets us set a different color for each individual side of the child stack.

BORDER SIZE
Adjusts the thickness of the border around our grid item. You can do this uniformly or by clicking the small plus icon you'll be given the detailed view, which lets us set a different width for each individual side of the child stack's border.

Link

ADD LINK TO ITEM
Enabling this feature allows you to add a link to the overall Flux child item. This means that the visitor can click on the item, as a whole, to visit the link you've created.

OPEN IN NEW WINDOW / TAB
When you enable this feature, the link for this item will open in a new window / tab in the visitor's browser, based on their browser settings.

Advanced

OVERFLOW SCROLL (Y-AXIS)
This setting allows us to have content within an item, that may have a fixed height, scroll if the content exceeds the bounds of the item.

INLINE ITEMS

When enabled, stacks added to a grid item child stack will be displayed inline with each other. This also enables some additional alignment options, allowing use to style the layout of those inserted inline stacks.

Animation Settings

The animated grid item child stack has all of the settings of the normal item child stack as well as some additional features that allow you to animate the item(s) as they scroll into view or are hovered over. Let's have a look at these animation specific settings:

ANIMATE TYPE
Here you can choose when your item will animate. This allows us to decide if we want the item to animate when it scrolls into view or when the visitor hovers their mouse cursor over the item.

ANIMATION STYLE
Here we choose the type of animation we wish to apply to our grid item when it is triggered, either through scrolling into view or being hovered over.

TIMING
This allows us to set both the delay and duration for our animation. The delay determines how long between when the trigger occurs and when the animation will play. The duration is the length of time it takes for the animation to complete. The smaller the number, the quicker the animation.

EASING
Here we can choose our easing type as well as whether we want it to ease in, ease our, or both.

ANIMATE ONLY ONCE
This makes sure that the animation will only play one time after being triggered and will not trigger again.

On this page