Create powerful, grid-based layouts like never before
Flux provides a powerful platform to build both simple and complex grid designs. It uses CSS Grid technologies to allow you to build robust and versatile layouts with fine tuned control.
Highlights
Flux is intended for users who want to take their layout building to the next level. It allows you to create advanced layouts, while removing the need to code from the equation.
You can use Flux to create basic columnized layouts, or gridded designs with ease, but Flux really shines when it comes to constructing interlocking or overlapping layouts.
Responsive design
Flux gives you the ability to restructure your layouts at each of the three, individual responsive breakpoints. This gives you greater control over your designs and adds to the versatility of the stack.
Columns & Rows
Flux allows you to specify not only how many rows and columns will make up your grid, but you can also define them independently at each responsive breakpoint, allowing you to tweak your design for each.
Spans
The real magic of this stack comes from its column and row spans. It allows you to specify how much space in the grid that each grid item will take up, as well as to optionally specify exactly where inside the grid individual items will appear. Flux's spans will give you the tools to build complex, interlocking and overlapping designs.
Styling
Individual Flux items can be styled with backgrounds, rounded corners, padding and shadows. This allows for unique, creative designs that can be customized for each breakpoint.
Distribution
Content within items can be justified using start, center or end positioning. You can also use CSS Grid's unique Space Around and Space Between settings as well.
Gutters
Set gutters for your grid items at each breakpoint to adjust your design just how you like it. You can even choose what unit types you'd like to use for the gaps at each breakpoint.
Animated items
For most items within your Flux layout you'll be using normal Flux child stack items. Every now and again though it might be useful to include some animated elements within your grid. For that we've built a separate child stack that you can add to your layout to achieve simple, scroll-based animations.
Links
Flux allows you to easily add a link to child items. This allows you to turn a n entire Flux item into a clickable area, linking to other pages on your site or outside websites. Links can even open in a new tab or window.
Unparalleled
Flux allows you to go beyond what you can do with basic columns.
Mastering Flux layouts
Flux is a tool that gives back as much as you put into it. You can great simple columnized layouts, or complex interlocking grids, and so much more. In fact the two columns above that contain our tutorial video and the call to action are a simple column layout built with Flux.
Below we've created several different types of grid-based designs using Flux that go beyond simple column layouts. These are just a few of the ways you can use Flux though. It is a tool that really does have almost infinite possibilities. We find it is also a tool that benefits from examples when learning its controls and nuances. Because of that we've put together several project files full of examples that comes with your purchase, and can be downloaded below. This gives you the ability to look through how these designs were created.
More Videos
In addition to the Getting Started video above, we have other tutorials available on the Flux stack's documentation page.
Speaking of the documentation page -- Our Support Hub also helps you navigate the expansive number of features and settings in the Flux stack. Be sure to check out Flux's detailed documentation and video tutorials.
Samples
Mesmerizing designs that leverage your imagination and capture your visitor's attention
Let's take a look at some stunning layouts built using Flux. Below you'll find an assortment of smaller, grid-based designs that go beyond basic columnized layouts. Each is included in the sample project file.
Interlocking grid
This sample shows off Flux's ability to interlock grid items in a way that no normal columns stack could achieve. This is a fairly easy layout to create in Flux, but one that really does look eye-catching and unique.
Great Outdoors
Beautiful grid-based layouts like this are something that is hard to achieve with standard columns stacks.
Overlapping content
In this example we've used three Flux items. One of them has an image background and with the second items we've applied a nice gradient. The third item contains our headers, paragraph and button. We've used the settings within each item to place them in specific locations and give them specific spans for their column and row settings. Doing so has allowed us to create a nice overlapping effect.
We've applied these settings to the items at the tablet breakpoint, and disabled the desktop breakpoint. This means both the tablet and the desktop breakpoint will have the same layout. The mobile breakpoint has been configured completely differently to give us a different design on smaller devices.
Sun brewed
How to get perfect iced tea, every time
Let's have mother nature do the hard work for us. Sun brewed iced tea saves us energy, and imparts the perfect flavor.
Spiral
Here we've used five items to create a simple spiral-like pattern of images around our logo. This gives a beautiful design that looks far more complex than it is. This example is included in the project file that you can download, and which also comes with your purchase. This layout could be used as a sort of banner for the top of a page. In this example though we've round the corners of our images to give it a nice standalone look.
We cover how to create a layout like this in our Introduction tutorial video above, and on the documentation page for Flux.
Staggered Images & Text
This stylish, magazine worthy layout is much simpler to build that it might seem. This design uses just 5 child stacks to supply our images, accent color square and our text container. We simplify things at the Mobile breakpoint to make for a better user experience. With a little pre-planning designs like this are easy to achieve using Flux for RapidWeaver.
Bright & Bold
Creating complex, overlapping designs is easy with Flux. Build compelling layouts that will help bring your page's content to life!
Asymetrical Grid
Creating beautiful style layouts is an easy task for Flux. Below we've built a very straightforward layout, again with just five Flux child stack items. This asymmetrical grid retains the same look at both the Tablet and Desktop breakpoints, and rearranges itself at the Mobile breakpoint to better serve our visitors on smaller devices. The floating logo between the four asymmetrical grid items provides a unique look that would be hard to pull of with other columns stacks.
Yoga for beginners
Healing the mind & body
More Examples
Above we've shown some simpler, isolated examples of what you can achieve with the Flux stack and a little pre-planning. We've also created a few more complex, larger layouts using Flux that we wanted to share, but felt they looked better on their own as standalone pages. Below you'll find links to these examples. In addition we've included these project files with your purchase.
Please Note: While the Agency and Fitness demos were built in Foundry, you can use Flux within a normal RapidWeaver theme as well. It is not limited to the Foundry framework.
Agency
In this example we've built out a fictional photography business, with a slew of images and text, forming complex looking grids. Flux makes layouts like these really sing.
Fitness
Our faux fitness site is ready to pump, you up. In this example we use Flux to create interlocking grids and overlapping content. We've even include animated Flux item child stacks as well.
Documentation
What does this setting do?
In addition to the tutorial walk through video, further up on this page, we also offer detailed documentation for each of the settings within the Flux stack. This not only helps you when creating your site but as well as in making the decision to purchase Flux for your next project.
You can find the full documentation and tutorials for Flux, as well as all of our other products in the Elixir Support Hub.
Requirements
What will you need?
This stack relies on the Stacks API to load icons and other tools needed for features in this stack. Let's look at the required software as well as the browser support for this stack.
What you need
As mentioned, we use the latest Stacks API for this stack to help facilitate its functionality. You'll need the following tools to make use of it for your site:
- RapidWeaver v8 or newer
- Stacks v4 or newer
Works with Foundry
This add-on works great with Foundry v3 as well as the legacy Foundry v2.
Browser support
This stack is designed with modern browsers in mind to give your visitors the best experience possible. It will work nicely in the most recent versions of these browsers:
- Safari
- Firefox
- Chrome
- Edge