Tutorials stack icon

Flex

Killer expandable content sections for RapidWeaver like you've never seen before - by Weavium

Table of Contents

  • How to use
  • Edit Mode Goodies
  • General
  • Items
  • Items > Hover
  • Items > Opened
  • Items > Shared Colors
  • Open All Toggle


Introduction

Here you can learn how to use the Flex stack from Weavium. Of course, if you have any questions along the way, you are always welcome to visit the support page and leave us a message. _-


How to Use

Flex is fairly easy to set up! Really, all you have to do is drag the stack onto the page, and then add Items using the ( + ) button, then edit the Titles, Icons, Colors, etc, and you are good to go!

The quickest way to get Flex setup, is to add a few items, and then simply change the background colors to a nice color scheme from the web! The default settings are well-thought-out and you can have something super sleek up in a matter of minutes~

There are tons of layout and customization options as well!


Edit Mode Goodies

Collapse Content

As a great way to save space there is an option for collapsing all content in edit mode~


General

Here you will find a couple of general properties that pertain to the entire stack such as the Maximum width, Responsive breakpoints, and other general toggles.

Open All on Start (Checkbox)

If this option is checked all Flex content sections will be open when the stack is initially loaded.

Collapse Siblings (Checkbox)

If this option is checked, all other Flex content sections will collapse when another is opened. Uncheck this option if you want users to be able to open more than one section at a time.

Max Width

The max width simply determines the maximum width that the stack can stretch. It will automatically respond to fit mobile devices.

Breakpoints

Flex includes many options that can be set for Desktop, Tablet, and Mobile devices. Here you will find inputs for setting the pixel widths that the Tablet, and Mobile settings will apply.


Items

Here you will find general settings for editing Flex items such as layout, padding, text & icon sizes, etc.

Note, that colors are meant to be set individually for each item! Although, if you go to the Items > Shared Colors section, you will find the ability to make all of the items share specific colors. (Neato!)

Header Padding (Vertical & Horizontal)

The header area is the area that contains the title, icon, and dropdown-arrow icons. Headers are displayed when closed, and be expanded or shrunk on hover or when an item is opened.

Here you will find two inputs for the padding of the header, Vertical and Horizontal

Content Padding

The content is the area that displays when an item is opened. You will also find Vertical and Horizontal padding options for this area.

Title Font Size (Desktop, Tablet, Mobile)

Here you will find 3 inputs for setting the font size of all titles. You can customize the size individually for Desktop, Tablet, and Mobile.

Icon Font Size (Desktop, Tablet, Mobile)

Here you will find 3 inputs for setting the font size of all custom icons. You can customize the size individually for Desktop, Tablet, and Mobile.

Dropdown Icon Font Size (Desktop, Tablet, Mobile)

Here you will find 3 inputs for setting the font size of all dropdown (arrow) icons. You can customize the size individually for Desktop, Tablet, and Mobile.

Content Text

Here you will find 3 inputs for setting the font size of default text in the content areas. You can customize the size individually for Desktop, Tablet, and Mobile.

Header & Content Font (Select Menu)

You will see that there is a select menu with a list of default fonts for the header and content sections. There is also an option to add your own custom Google Web fonts!

Flex provides a super quick and innovative way to add Google Web fonts, literally all you have to do is type in the name of the font! 0^


Items > Hover

There are simply 2 options for the hover state of Flex, which is what makes it so easy to set up, and keeps it looking smooth!

Header Padding

When items are hovered, they have a unique stretching effect, which is accomplished by an increase in vertical padding.

This input allows you to set the vertical padding for items when hovered. Adding a higher padding than the default will make items stretch on hover, and adding a lower padding than the default will make items look as if they shrink on hover.

Play around to make some sweet looking Flex sections!

Show Header Overlays on Hover

Header overlays are the slightly shaded areas that appear in the background of a header section when opened.

By default, these overlays only appear when an item is opened, but you can also make it so that the header overlay appears on hover.

Checking this option will make the header overlay color, and the open title/icon colors appear when an item is hovered


Items > Opened

When items are opened, a couple of special things happen.

  1. The headers gain a background overlay

  2. The titles & icons change size and color to their opened state, and the headers shrink/stretch according to the opened state header padding.

  3. Content sections appear

Header Padding

When opened, headers have a neat shrink affect which is accomplished by a new vertical padding amount being added.

This input allows you to set the new vertical padding value when items are opened.

Title Font Size (Desktop, Tablet, Mobile)

When the header is opened, you can also provide a new font size for titles. (slightly smaller sizes are recommended)

You will find 3 inputs for setting the font size of all opened titles. You can customize the size individually for Desktop, Tablet, and Mobile.

Icon Font Size (Desktop, Tablet, Mobile)

When the header is opened, you can also provide a new font size for icons. (slightly smaller sizes are recommended)

You will find 3 inputs for setting the font size of all opened icons. You can customize the size individually for Desktop, Tablet, and Mobile.


Items > Shared Colors

By default, Flex Item colors are meant to be set individually for each item. This is what makes Flex so unique compared to other expanding content stacks.

If you want all items to share certain colors, this is the place to go!

Shared Color Toggles

At the top of this section, you will find a list of toggles for specific colors that can be shared. Simply check the specific color that you want, and all items will share that particular color. This is great for mixing and matching!! The following colors can be toggled:

  • Shared Title Colors
  • Shared Icon Colors
  • Shared Content Text Colors
  • Shared Header Overlays
  • Shared Content Overlays
  • Shared Backgrounds

Title Colors (Closed & Opened)

Here there are 2 inputs for setting the shared color of titles. Both Closed & Opened colors can be set.

Note these colors will only be applied if the Shared Title Colors option is checked.

Icon Colors (Closed & Opened)

Here there are 2 inputs for setting the shared color of icons. Both Closed & Opened colors can be set.

Note these colors will only be applied if the Shared Icon Colors option is checked.

Content Text Color

Here you can set the default color for text in the content areas.

Note these colors will only be applied if the Shared Content Text Colors option is checked.

This color may not be applied if you are using a stack or theme that overrides default text colors.

Header Overlay

The header overlay appears when an item is opened, by default it is set to a slightly transparent black, which adds a neat blending affect. Change this color to anything that you'd like, and also edit the opacity, if you want it to blend with the content.

This option is useful when you want to have a special color when items are opened or hovered.

Note these colors will only be applied if the Shared Heaver Overlays option is checked.

Content Overlay

The content overlay is very similar to the header overlay. It is technically the background of the content area, but it is initially set to a completely transparent black, meaning that content sections have no background by default, they simply share the same background as the item itself.

If you want to add a unique background or a overlayed background color for the content area, then edit this color and increase the opacity.

Note these colors will only be applied if the Shared Content Overlays option is checked.

Background

This simply sets the background for the items.

Note these colors will only be applied if the Shared Backgrounds option is checked.


Open All Toggle

Hide Open All Toggle (Checkbox)

If you do not which to have an open all toggle, check this option. This is great for inline Flex sections that you want to blend in.

Hide On/Off Text

When the open all toggle is checked, small text appears inside of the toggle that read 'on' or 'off'. You can hide this text if you want by clicking this option.

Hide Open All Text

This option simply hides the 'Open all' and 'Close all' text that appears next to the toggle.

Open & Close Text

Here you can set the actual text content for the 'Open all', and 'Close all' text next to the toggle.

ON & OFF Colors

These color options refer to the background of the toggle switch in its ON and OFF states.

Switch Color

This is the color of the circle inside of the toggle switch

Text Color

This is the color of the 'Open all' & 'Close all' text

Flex Changelog

Version 1.0.0

  • Ability to customize expand/shrink sizes on hover & open
  • Ability to style items individually or with shared styles
  • Open/Close all toggle with customizable colors & text
  • Ability to nest multiple Flex stacks inside one another!
  • Ability to add custom icons
  • Ability to set sizing option on Desktop, Tablet, and Mobile devices!

Version 1.0.1

  • Added ability to adjust corner radius on Desktop, Tablet, and Mobile Devices