Fluid

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

Examples
State Manager
ID:
active
OFF
new_releases
Everything you see on this page was created entirely with the Fluid Stack. That includes all layouts, text, icons, images, buttons, and transforms and animations… everything.
What is Fluid?
A Revolutionary Build Tool for RapidWeaver.
Fluid It is a highly-compact and powerful set of stacks that allow you to create anything you can imagine.
A Layout State Manager
Create and manage different states for your app such as: Light Mode, Mobile, Active, Open… and then transform your content based on whether or not those states are turned ON or OFF.
A Transformable Layout Tool
Every Fluid Stack comes equipped with the ability to apply multiple transforms based on your layouts states. This means completely different styles for Containers, Text, Icons, Buttons, Images and more, live in seconds.
Fluid will change the way we make sites for RapidWeaver forever… Believe it 🥳
State Manager
ID:
box_bg
OFF
box_opacity
OFF
box_radius
OFF
box_min_size
OFF
box_max_size
OFF
box_margin
OFF
box_rotate
OFF
box_reset
OFF
box_text_size
OFF
text_fields
Reset All
box_bg, box_opacity, box_min_size, box_max_size, box_rotate, box_radius, box_margin, box_text_size, box_reset
refresh
Text Size
box_reset
box_text_size
Background
box_reset
box_bg
Opacity
box_reset
box_opacity
Radius
box_reset
box_radius
Margin
box_reset
box_margin
Min Size
box_reset
box_min_size
Max Size
box_reset
box_max_size
Rotation
box_reset
box_rotate
Fluid – States & Transforms

What makes Fluid so magical and revolutionary is it's ability to control multiple States and then transform content based on whether or not those states are turned on or off.

Play with the toggles here and watch the Fluid Container transform!

settings_input_component
States

Each of the properties listed in the box here (and more!) are connected to a State in the Fluid Layout stack. When a toggle is clicked, the state is triggered and turned ON or OFF.

swap_calls
Transforms

All Fluid build stacks (Containers, Text, Icons, Buttons, Images) can have multiple transforms applied to them based on any State. For example… if the background_state is set to ON then the background of the container here will transform.
State Manager
ID:
Fluid Triggers
The Fluid Trigger stack is used to change STATES based on different actions
On Click
State Manager
ID:
active
OFF
active_state
ON
OFF
active
mouse
On Hover
State Manager
ID:
active
OFF
active_state
ON
OFF
active
near_me
On Scroll
State Manager
ID:
active
OFF
active_state
ON
OFF
Scroll Down
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
active
format_line_spacing
Window Resize
State Manager
ID:
active
OFF
active_state
ON
OFF
active
Resize your browser to less than 720px
aspect_ratio
State Manager
ID:
menu_open
OFF
menu_hover
OFF
This menu was made entirely with Fluid!
folder
calendar_today
favorite
face
menu_open
menu_hover
add_circle
calendar_today
State Manager
ID:
menu_open
OFF
Menu
menu_open
menu
arrow_back
Made with Fluid
This menu was made entirely from Fluid stacks! Yes… entirely… amazing right?
With changeable states & transforms Fluid is truly the ultimate build tool for RapidWeaver. If you can dream it, you can create it. Not only can you create it, but you change transform it too… based on tons of different triggers like Click, Hover, Scroll, and even Browser Size. Believe it.
account_circle
Account
today
Calendar
favorite
Favorites
notifications_active
Notifications
State Manager
ID:
Check out Some Real-life Examples Below!
State Manager
ID:
light_mode
OFF
mobile_state
OFF
mobile_state
music_video
MUSIC
verified_user
For You
verified_user
Library
verified_user
Browse
verified_user
Radio
search
Search….
mic
light_mode
Click Here to turn OFF the light_mode state
Click Here to turn ON the light_mode state
brightness_high
Light Mode
brightness_2
Dark Mode
State Manager
ID:
card_hover
OFF
card_hover
Drake
card_hover State ON
State Manager
ID:
card_hover
OFF
card_hover
Ellie Goulding
card_hover State ON
State Manager
ID:
card_hover
OFF
card_hover
Adele
card_hover State ON
2018 Grammy Awards
See All
State Manager
ID:
album_hover
OFF
album_hover
Photograph
Ed Sheeran
album_hover State ON
State Manager
ID:
album_hover
OFF
album_hover
Suffer
Charlie Pluth
album_hover State ON
State Manager
ID:
album_hover
OFF
album_hover
I'm the Man
The Killers
album_hover State ON
State Manager
ID:
album_hover
OFF
album_hover
Work it Harder Do it….
Daft Punk
album_hover State ON
State Manager
ID:
album_hover
OFF
album_hover
Down
Brandon Burnette
album_hover State ON
Only the Best Music
See All
whatshot
What's Hot
card_giftcard
On Sale
event_seat
Wind Down
favorite
Your Favorites
Top Albums
See All
State Manager
ID:
album_hover
OFF
album_hover
1
Awaken My Love
Childish Gambino
$1.29
album_hover ON
State Manager
ID:
album_hover
OFF
album_hover
2
Scorpion
Drake
$1.29
album_hover ON
State Manager
ID:
album_hover
OFF
album_hover
3
Coexist
The XX
$1.29
album_hover ON
State Manager
ID:
album_hover
OFF
album_hover
4
Melodrama
Lorde
$1.29
album_hover ON
State Manager
ID:
album_hover
OFF
album_hover
5
Riot
Paramore
$1.29
album_hover ON
State Manager
ID:
album_hover
OFF
album_hover
6
Dangerous
Michael Jackson
$1.29
album_hover ON
State Manager
ID:
album_hover
OFF
album_hover
7
Oh By the Way
Pink Floyd
$1.29
album_hover ON
State Manager
ID:
tab_1
OFF
tab_2
ON
tab_3
OFF
mobile_state
OFF
mobile_state
directions_car
directions_bus
flight
Tabs Example
This example uses state and transforms to create tabs and change backgrounds!
directions_car
directions_bus
flight
tab_2, tab_3
tab_1
Car
tab_1, tab_3
tab_2
Bus
tab_1, tab_2
tab_3
Flight
Traveling by car?
These tabs were made completely with Fluid! Yahoo… The number of different layouts and configurations that can be created with Fluid is truly unbelievable. It will change the way we make layouts for RapidWeaver forever.
directions
GET DIRECTIONS
Traveling by bus?
These tabs were made completely with Fluid! Yahoo… The number of different layouts and configurations that can be created with Fluid is truly unbelievable. It will change the way we make layouts for RapidWeaver forever.
directions
GET DIRECTIONS
Traveling by plane?
These tabs were made completely with Fluid! Yahoo… The number of different layouts and configurations that can be created with Fluid is truly unbelievable. It will change the way we make layouts for RapidWeaver forever.
directions
GET DIRECTIONS
State Manager
ID:
slide_1
ON
slide_2
OFF
slide_3
OFF
slide_4
OFF
mobile_state
OFF
mobile_state
FRUITS
Search. . .
search
verified_user
Home
verified_user
About
verified_user
Shop
shopping_cart
Button Text
slide_2, slide_3, slide_4
slide_1
State Manager
ID:
item_hover
OFF
item_hover
Fresh Appricots
All organic fresh appricots provided directly to your door step.
slide_1, slide_3, slide_4
slide_2
State Manager
ID:
item_hover
OFF
item_hover
Fresh Apples
All organic fresh apples provided directly to your door step.
slide_1, slide_2, slide_4
slide_3
State Manager
ID:
item_hover
OFF
item_hover
Fresh Blueberries
All organic fresh blueberries provided directly to your door step.
slide_1, slide_2, slide_3
slide_4
State Manager
ID:
item_hover
OFF
item_hover
Fresh Kiwis
All organic fresh kiwis provided directly to your door step.
Appricots & Cream
Type:
Organic
Grown in:
Russia
$12.99
star
BEST
shopping_cart
Add to Cart
Sweet Apple Pie
Type:
Organic
Grown in:
Russia
$12.99
star
BEST
shopping_cart
Add to Cart
Hand Picked Blueberries
Type:
Organic
Grown in:
Russia
$12.99
star
BEST
shopping_cart
Add to Cart
Hand Picked Blueberries
Type:
Organic
Grown in:
Russia
$12.99
star
BEST
shopping_cart
Add to Cart
State Manager
ID:
mobile
OFF
active
OFF
accent_purple
OFF
accent_red
OFF
mobile
Ashworth
Couch
home
Living Space
Description
This transformable section was made completely from Fluid and it's included stacks. When the "Details" button is clicked, the "Active" state is set to on and transforms are applied… It's beatiful and responsive.
active
arrow_forward
Details
arrow_back
Back
11
– 2018
Specifications
2000mm X 1000mm X 900mm
Accent Color
accent_purple, accent_red
accent_red
accent_purple
accent_purple
accent_red
State Manager
ID:
card_1_hovered
OFF
card_2_hovered
OFF
card_3_hovered
OFF
mobile_state
OFF
mobile_state
State Manager
ID:
active
OFF
hover
OFF
card_1_hovered
$ 300.00
Oxelo Town 9
This is an awesome bike… as you can see, it's totally awesome. More description about this sick motorcycle.
active
Show Details
arrow_downward
close
Key Features
favorite
Reputation
verified_user
Tested
ev_station
Efficient
Specifications
Wheel
200mm
Weight
5.6kg
Speed
9.5/10
arrow_forward
Buy Now
State Manager
ID:
active
OFF
hover
OFF
card_2_hovered
$ 300.00
Oxelo Town 9
This is an awesome bike… as you can see, it's totally awesome. More description about this sick motorcycle.
active
Show Details
arrow_downward
close
Key Features
favorite
Reputation
verified_user
Tested
ev_station
Efficient
Specifications
Wheel
200mm
Weight
5.6kg
Speed
9.5/10
arrow_forward
Buy Now
State Manager
ID:
active
OFF
hover
OFF
card_3_hovered
$ 300.00
Oxelo Town 9
This is an awesome bike… as you can see, it's totally awesome. More description about this sick motorcycle.
active
Show Details
arrow_downward
close
Key Features
favorite
Reputation
verified_user
Tested
ev_station
Efficient
Specifications
Wheel
200mm
Weight
5.6kg
Speed
9.5/10
arrow_forward
Buy Now
State Manager
ID:
login_state
OFF
mobile_state
OFF
mobile_active
OFF
mobile_state
Already have an account?
Click here to login in now
login_state
verified_user
LOGIN
Click here to turn the login_state ON
Don't have an account?
No problem! Click here to sign up and get started today
login_state
verified_user
SIGN UP
Click here to turn the login_state OFF
Login to Your Account
Login to your account to contine editing and buildilng your onboarding flows
mobile_active
verified_user
Don't have an account?
Email
Enter your email address
Password
Enter your password
check_box_outline_blank
check_box
Remember Me
Forgot Password
verified_user
Login
Or login using
Button Text
Button Text
Button Text
Signup for an Account
Signup now to start editing and buildilng your onboarding flows today!
mobile_active
verified_user
Already Signed Up?
First Name
Your First Name
Last Name
Your Last Name
Email
Enter your email address
Password
Enter your password
check_box_outline_blank
check_box
Remember Me
Forgot Password
verified_user
Login
Or login using
Button Text
Button Text
Button Text
State Manager
ID:
section_1
OFF
section_2
OFF
section_3
OFF
section_4
OFF
section_5
OFF
Create Stunning Layouts with Scroll Transforms
section_1
Logo
verified_user
Plan & Pricing
verified_user
How It works
verified_user
Download
verified_user
Login
Find a Comfortable Workspace Near You
A workspace that encourages self-awareness is an environment where the most productive, curious, and innoative peopel thrive
arrow_forward
Learn More
section_2
Find a Comfortable Workspace Near You
A workspace that encourages self-awareness is an environment where the most productive, curious, and innoative peopel thrive
search
Search
section_3
How It Works
This is some example text… this entire site was made using only Fluid!
Scroll RuangApp
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
info
Check it out!
Book a Place
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
info
Check it out!
Get Ready to Work
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
info
Check it out!
section_4
Find Spaces Near You
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Google Play
Apple Store
Signup Today!
Setup takes just minutes : )
arrow_forward
Get Started
section_5
Find a Comfortable Workspace Near You
A workspace that encourages self-awareness is an environment where the most productive, curious, and innoative peopel thrive
your_email@site.com
search
Subscribe