Tutorials stack icon

Fluid

Fluid – The build tool that will change RapidWeaver forever – by Weavium

Table of Contents

  • Getting Started (Start Here)
  • States Triggers and Transforms (Basics) – States – Triggers – Transforms
  • Build Stacks – Intro – Fill Mode
  • Fluid Container
  • Fluid Text
  • Fluid Icon
  • Fluid Image
  • Fluid Button
  • STATE MANAGERS (IN DETAIL)
  • TRIGGERS (IN DETAIL)


How to use

Get up in running with Fluid in seconds!

The first thing you need to do is simply drag the Fluid stack onto your page. You'll notice that inside of the Fluid stack is a State Manager. This is the main state manager. If you want to use states, you can, but it is not necessary. Really all you need to do is start dragging and dropping the included Fluid build stacks (Fluid Container, Text, Icon, Button, Images) onto your page and start creating layouts! 🥳



States, Triggers, and Transforms

States

Fluid comes with an extremely powerful stack called "State Manager". You'll notice that by default, there is always one parent state manager in the main Fluid stack.

State Managers allow you to create different states for your application such as activestate, openstate, lightmode, backgroundred, or really anything you want.

Each of these states will either be ON or OFF

A State Manager looks like this:

Notice how we have the active_state and it is initially set to OFF

Now we can create a trigger to turn this state ON and then transform content based on this state.

Triggers

Now that we have a state setup in our layout, we want to create a trigger to turn this state ON/OFF. We can do so using the included Fluid Trigger stack.

The Fluid Trigger stack allows you to turn states ON/OFF based on different actions such as:

  • Click
  • Hover
  • Scroll
  • Window Resize

Here's what a trigger looks like in action:

You'll notice that the trigger is set to "Click", which will change a state when the inner content is clicked.

You will also notice 3 sections in the trigger.

  • The 1st is for states that will be turned OFF
  • The 2nd section is for states that will be turned ON
  • The 3rd and most useful section is for states that will be toggled from ON>OFF or OFF>ON

As you can see we are going to toggle the active_state each time the inner content is clicked.

Inside we simply have a Fluid Button.

That's it! Whenever the inner content is clicked the activestate will be toggled : )

Now let's learn about Transforms so that we can do awesome things with our content based on states & triggers!

Transforms

In order to apply transforms, we'll need some content. Let's grab a Fluid Container stack and slap some Fluid Text inside:

Now we are ready to apply some transforms. First, select the Fluid stack that you want to transform, in our case it is going to be the Fluid Container. Then, in the settings panel, at the top of the stack you'll see a Transforms section, and an option to 'Apply Transforms'.

Click this option to start transforming the stack!

You'll now see a transforms section added to the top of the container stack, with one transform added initially.

You can add more transforms by clicking the ( + ) button.

There is no limit to the number of transforms that you can add!

Note: the order of transforms is important, later transforms with overlapping styles will take priority

Next let's customize our Transform!

First we will need to click on the transform stack:

If you click on the Transform stack, you'll see that in the settings panel we can select which State will cause this Transform to be applied, and then a list of various properties that can be transformed!

All you need to do is type the state that you want to cause the transform to be applied, and then toggle the different properties that you want to transform 😮 EASY!

Here you can see that our transform will be applied to the container when the active_state is ON

In this example we are going to change the background color of the container, so let's check the 'Transform Background' option, and set it to a red color, like so:

And that is it!

The results

Now we've setup our Fluid layout with an active_state and a Clickable Trigger that will toggle this state on and off.

When the active_state is turned on our container transform will be applied, and the background will be transformed to red!!!

INSERT VIDEO



Build Stacks

Intro

At its' core Fluid is the ultimate layout building stack. It comes with 5 highly refined stacks for building incredible layouts:

  • Fluid Container
  • Fluid Text
  • Fluid Icon
  • Fluid Image
  • Fluid Button

Each one of these stacks can have custom transforms applied to them based on any states in your layout!

In the settings panel of each Build Stack you will see a Transform Section and an option called Apply Transforms.

If you check this option you will be able to apply transforms to this stack. All of the transforms are specified to fit that specific stack.

Fill Mode

All of the Fluid Build stacks have a Fill Mode option which will determine the width of the stack. There are 2 width options to choose from:

  • Shrink (Fit to content)
  • Grow (Fill empty space)

The shrink option is for elements that you want to be inline or only expand the width of their content.

The Grow option is for elements that you want to fill any empty space that is remaining next to the stack.

Here is an example in action:

  • Setup

  • Result

If you place multiple grow items next to each other, they will evenly distribute themselves, like so:

  • Setup

  • Result


Finally, you will notice that there is an option titled Stretch on Mobile above the fill mode of each item.

If you check this option, the item will stretch to fill the full width on mobile devices!

You can find the mobile breakpoint in the settings panel of the main Fluid stack

This is the basics of the Fluid Fill Mode. It applies to all Fluid stacks, and is a key option to setting up layouts.

Now let's go into each of the build stacks in detail!



Fluid Container

The first and most useful/important build stack is the Fluid Container.

(For any of you that have used Gsheet, it is quite similar to the Gsheet box stack, only more advanced.)

The Fluid Container is one of the key components to building layouts with Fluid. It allows you to create layouts with Vertical/Horizontal content, and many more specific alignment options.

It also comes with all of the bells-and-whistles that you would need for any container element on a website such as:

  • Show/Hide
  • Font
  • Opacity
  • Text Color
  • Background
  • Z Index
  • Min Size (Width & Height)
  • Max Size (Width & Height)
  • Margin (Set your own units)
  • Radius (In pixels)
  • Padding (In pixels)
  • Border
  • Box Shadow
  • Shift
  • Rotate
  • Zoom
  • Positioning (Inline, Absolute, Fixed) ADVANCED

All of these options can be set on the container, and when a Transform is applied to a Fluid Container, all of these options can be transformed! 🤩


Content Direction

All of the basic styling options are quite straight-forward and easy to manipulate.

One important thing to understand is the content direction and alignment options for the Fluid Container. Let's take a look.

First of all, there are 2 options for content direction:

  • Top-to-Bottom ( ↓ ) Default
  • Left-to-Right ( → )
Top-to-Bottom ( ↓ )

Top to bottom will stack content vertically one on top of the other. This is the natural flow of content on the web.

Once this option is selected you will see 2 more alignment options for the stacked content:

Vertical Content Alignment
+ Top

+ Bottom

+ Center

+ Split (Vertically)

Horizontal Content Alignment
+ Left

+ Right

+ Center

+ Stretch (Horizontally)

KEEP IN MIND THESE ALIGNMENT OPTIONS ONLY APPLY TO ITEMS THAT ARE SET TO FILL-SHRINK

If an item is set to fill-grow then it will stretch to fill empty space, regardless of the containers content alignment.

Left-to-Right ( → )

Left to right will stack content horizontally, one next to the other.

Once this option is selected you will see 2 more alignment options for the side-by-side content:

Vertical Content Alignment
+ Top

+ Bottom

+ Center

+ Stretch (Vertically)

Horizontal Content Alignment
+ Left

+ Right

+ Center

+ Split (Horizontally)

KEEP IN MIND THESE ALIGNMENT OPTIONS ONLY APPLY TO ITEMS THAT ARE SET TO FILL-SHRINK

If an item is set to fill-grow then it will stretch to fill empty space, regardless of the containers content alignment.

Wrapping Content

Another important option that you will want to pay attention to on the Fluid Container is the Wrap content on Mobile option.

If you check this option, then all of the child items set to Stretch on Mobile will wrap on mobile, even if aligned left-to-right.

If you turn off the Wrap content on Mobile option, then the content of that particular container will not wrap. It is turned on by default.

You will also notice a drop-down for selecting the mobile point of the container. You can choose to inherit the mobile point from the main Fluid stack OR you can set your own custom mobile breakpoint for that particular container.

Overflow

The last important options on the container that you will want to pay attention to are the Overflow options.

You can set individual overflow options for both X and Y directions.

For each you can choose:

  • Hide overflowing content
  • Show overflowing content (without scroll)
  • Scroll overflowing content (Height may be required)

By default overflowing content is visible. If you want to hide it, then you can do so, or if you want the content to be scrollable, then you can choose scroll

Units

For some options in the container stack you will need to provide your own units inside of the input field.

This includes, Min/Max Sizes, and Margins. If there is not a unit next to the input-field group, you will need to provide your own.



Fluid Text

The Fluid Text stack is quite simple to understand and super useful.

Like all build stacks it also has 2 fill modes:

  • Shrink (for inline shorter text content)
  • Grow (for longer text like paragraphs etc.)

You also have the option to select between basic text or Markdown.

Styling

As for styling, you can edit the following properties:

  • Show/Hide
  • Opacity
  • Color
  • Style (Bold, Italic, Underline, Strike-through)
  • Alignment (Left, Right, Center, Justify) ONLY FOR FILL-GROW
  • Margin (Supply your own units)
  • Shift (Move along X or Y axis)
  • Rotate (Rotate by # of degrees)
  • Zoom (Scale larger or smaller)

When a transform is applied to the Fluid Text stack, all of the properties above can also be changed! 🥳

Fluid Icon

The Fluid Icon stack is the perfect stack for adding icons anywhere inside of your layout!

The awesome thing is that transforms can be applied to Icons too!

Here you can learn how to change icon codes, and set basic icon properties.

Icon Codes

In the settings panel of the Fluid Icon stack you will see a dropdown for selecting the Icon Font.

You can choose between:

Simply select the font that you want to use and then, enter the code in the Icon Code input section.

Above you will see the links to all of the icon sites. You can find the icon codes on their websites.

Styling
  • Show/Hide
  • Opacity
  • Icon Color
  • Icon Size
  • Margin (Supply your own units)
  • Shift (Move along X or Y axis)
  • Rotate (Rotate by # of degrees)
  • Zoom (Scale larger or smaller)


Fluid Image

The Fluid Image stack is quite simply to use. Simply add the stack where you want to place the image and then use the input select your image file.

One important option to pay attention to is the image sizing option. There are 2 options for sizing images:

  • Automatic (Full width & auto height)
  • Specific Dimensions (Select your own height & width)

No need to worry about responsiveness, we've got you covered!

Even when an image is set to specific dimensions, it will magically become responsive at the appropriate width~

You are welcome 🥳



Fluid Button

The Fluid button is also really easy to setup. Simply select the fill-mode:

  • Shrink (for inline buttons)
  • Grow (for buttons that you want to be full width)

Then edit the styles to your liking. The following properties can be edited for the Fluid Button:

Styling
  • Max Width
  • Show/Hide
  • Opacity
  • Text Color (Initial & Hover)
  • Background Color (Initial & Hover)
  • Text Size
  • Radius (In pixels)
  • Padding (In pixels)
  • Margin (Supply your own units)
  • Border
  • Shift (Move along X or Y axis)
  • Rotate (Rotate by # of degrees)
  • Zoom (Scale larger or smaller)
Adding Icons

You can also add icons to your Fluid Buttons! At the bottom of the Fluid Button settings panel you will find a setion called "Button Icon". Here you will find a checkbox option titled "Add button icon". If you check this option an icon will be added and you can then set the icon code and other icon options, such as alignment, sizing, etc.



STATE MANAGERS (IN DETAIL)

Above we covered the basics of State Managers, Triggers and Transforms. Here will will cover State Managers in detail.

What are they?

Some of you may be wondering what is the State Manager stack and what does it do exactly? We will try to explain it for your better here.

Modern websites are becoming more and more sophisticated as time goes by, and content can be displayed in so many different ways.

We see all sorts of dynamic displays with Light/Dark Modes, Hover states, Expanding boxes, Items being hidden/shown, Items sliding in, popping out, you name it!

Developers and designers use different States to trigger these content changes and animations.

For example, a dark_mode state. When turned ON the background might change to black, all text will change to white, and other elements on the page will change.

The Fluid State Manager stack is used for exactly this. It allows you to create your OWN states, and then turn them ON/OFF with the Fluid Trigger stack. Awesome right?

The idea is that you create ONE layout, and then change that layout based on STATES that change. This saves markup and time.

Multiple State Managers

By default, there is always ONE main State Manager surrounding all fluid content. You don't have to use it, but it is always there.

You aren't limited to using just one State Manager though, in fact, if you look search "Fluid" in the stacks library, you will find that the State Manager stack is it's own separate app that can be added anywhere inside of Fluid!

These means that you can add multiple State Managers inside of your layout. It's perfect for creating lists of cards/items that each have their own expanded or hover state.

Below we will take a look at a nice example:

Here we have a stunning layout built completely with Fluid. It has a set of cards at the top, some albums on the left and a list of albums on the right. You'll also notice a "Light Mode" button in the top right corner.

The layout itself is beautiful, but under the hood there is a bunch of magic going on. There are actually Multiple State Managers running in the one layout:

  • #1 The main State Manager surrounding all content (with the light_mode state)
  • #2 A State Manager surrounding all 3 image cards at the top (with a card_hover state)
  • #3 A State Manager surrounding all albums on the left (with an album_hover state)
  • #4 A State Manager surrounding all list items on the right (with an album_hover state)

That's right, each individual card, album, and list-item has it's own state that can be triggered to transform the inner content. Take a look at what happens when each item is hovered:

Also, take a look at what happens when we click on the "Light Mode" Button:

So how is this set up?

Light / Dark Mode

At the very top of our Fluid stack, we have the main State Manager with the light_mode state.

Then, in various parts of the content, we have transforms added that are applied when the light_mode state is turned ON. like so:

We also have a trigger surrounding the Light Mode button, which toggles the light_mode state ON/OFF:

This is how the lightmode changes occur. Now when the trigger is clicked, the lightmode state is turned to ON and the corresponding transforms are applied!

List Item Hover Set Up

Now let's take a look at the list of albums in the bottom right corner.

Each one of these items is surrounded by it's own State Manager, like this:

Each one of them as an album_hover state that is initially set to off.

You'll also notice that the entire list item content is surrounded by a trigger that toggles the album_hover state to ON when the item is hovered

Lastly, all we've down is add some transforms to the list item content parts, like so:

That's about it!

That is about all there is to it when it comes to State Managers. They keep track of different states in your layout, and you can add as many as you'd like.

One warning is that Nested State Managers should not have similar state names to their parents. This is because transforms can access states from parent state managers and nested ones at the same time. No need to worry about conflicting names with State Managers that are not nested. Those names can be the same.

(It was a lot of work... we hope you enjoy 😅)



TRIGGERS (IN DETAIL)

Here we are going to take a closer look at Fluid Triggers!

Remember that Fluid Triggers are used to turn States ON/OFF based on different actions such as:

  • Click
  • Hover
  • Scroll
  • Window (Re)size

Let's get started:

Example Setup

Suppose we have the following Fluid setup, with one active_state in the Main State Manager, and then a Fluid Container on the inside set to 200x200 pixels wide:

Now let's add a Trigger that will toggle our active_state:

Notice that we placed our Fluid Container inside of our trigger. Now our Container will act as part of our trigger, so that we don't have to add an extra button for Clicks & Hovers.

Let's take a look at the settings panel for our trigger:

There are a few different options that you will want to pay attention to when setting up triggers:

  • When to Trigger

Here you can choose the type of action that will set the trigger off (Click, Hover, Scroll, Resize)


  • What States to Trigger

Here you can choose which states to change! Notice that there are 3 different ways to affect states:

(Toggle, ON, OFF)

Toggle (Switches states from ON>OFF or OFF>ON) most common

ON (Turn these states from OFF > ON ONLY)

OOFF (Turn these states from ON > OFF ONLY)


  • What State Manager the trigger will affect (advanced)

By default, Triggers will automatically change the states related to their parent State Manager. Although, it is actually possible to trigger ANY state manager on the page. 😯

For example, maybe you have a nested State Manger, but you actually want to change the state from the Main outer State Manager. In this case you can change the "State Manager" dropdown from Parent to Select by ID.

Now you can enter the ID of the State Manager that you want to affect.

Each state Manager has it's own custom ID, which you will find at the top of the stack in edit mode, like so:

The easiest way to grab the ID of a State Manager is to right click on the ID, and select copy:

Now that you have the ID, you can simply paste it into the "State Manager" field of your Trigger stack, and Voila the trigger will now change the states of that particular State Manager!

This is quite an advanced feature, but it may be useful for some.

Playing with Different Trigger Types

Now let's play around with different Trigger Types

First, let's add a transform to our container, so we can see the change when our trigger toggles the active_state

Now, when the active_state is turned on, we have told the container to transform these properties:

  • Opacity
  • Background
  • Radius
  • Rotation

Next, we can see what happens on different trigger types.

Click

In our above example we placed our container inside of our trigger, and set the trigger to "Click".

This will result in the following:

Hover

Now, let's change our Trigger from Click to Hover

The result will the be same, only this time it will happen when the trigger is hovered instead of clicked:

Scroll

Next, let's try out the trigger on Scroll feature.

You'll notice that we can set the Scroll Parent, and the Offset. By default the parent will be the window, and the offset is set to 100px before the trigger. That means that when the top of the window reaches 100px before the trigger, the trigger will be set off and the active_state will be toggled.

First we will need to move our Container outside of our Trigger, as the Fluid Trigger stack no longer accepts content when set to scroll:

We also added some text content around the container and trigger, so that the window will be scrollable.

This results in the following:

Window (Re)Size

Lastly, we are going to check out the Trigger on Window Resize type.

If you change the trigger type to "Window Resize", you will see that we now have the option to select:

  • Greater than / Less Than
  • A specific pixel width

Notice that we have told our trigger to go off when the Window is less than 720px wide.

We will also make sure that our container is outside of the Trigger. Because the trigger no longer accepts content. Whenever you have a scroll/resize trigger, it can be placed anywhere inside of the State Manager it will affect.

Now, lets see what happens when we resize our browser!

DONE!!

Wow, we know that is a lot of information, but we truly believe that Fluid is going to change the way we create sites in RapidWeaver and we are so excited to start using it ourselves : )

Enjoy!!

Fluid Changelog

Version 1.0.3

  • Internal restructuring of transforms & major speed improvements in edit mode

Version 1.0.2

  • Fixed bug causing markdown text size not to transform

Version 1.0.1

  • Basic speed improvements
  • Changing of some default settings
  • Improvements to Fluid Button stack

Version 1.0.0

  • Initial Release