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.
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.
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.
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.
Beautiful grid-based layouts like this are something that is hard to achieve with standard columns stacks.
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.
Let's have mother nature do the hard work for us. Sun brewed iced tea saves us energy, and imparts the perfect flavor.
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.
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.
Creating complex, overlapping designs is easy with Flux. Build compelling layouts that will help bring your page's content to life!
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.
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.
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.
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.
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:
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: