blog-tutorial-post-template

Tutorials

Explanation

Expanse has two states. On load the Stack will be condensed into a “Card”. When a user clicks the open button it will animate open into an expanded state. By default the expanded state will fill the entire screen unless margin has been added in the settings panel. Set up is simple and you only need to add your desired content to the Stack. You can use the settings panel to customize the appearance of the Card when it is condensed and when it is expanded.

Settings

Animation

Animation – Choose from 11 different options that change how the Stack expands.

Speed – Adjust the speed of the expand animation in milliseconds.

Card Layout

Card Type – Choose from 3 options. “Template | Icon Button” is a preset layout with an image and an overlapping round button. “Hover & Click” will make the Stack expand when any part of the card has been clicked on. “Button” will add a button to the Stack that can be clicked to make it expand. These last 2 options do not have a template and will allow you to set up your own layout.

Card Width – Adjust the width of the Stack when it is condensed or in it’s “Card” state. If this width value is more than the value of it’s container, the Stack will scale it’s entire size to fit inside. This will cause the contents and text to shrink. If you do not want the contents to shrink, you will need to adjust this value so that it is equal to or less than the width of the container.

Card Height – Adjust the height of the Stack when it is condensed or in it’s “Card” state.

Margin T/B – Adjust the space below and above the Stack when it is condensed or in it’s “Card” state.

Card Styles

Header Image (“Template | Icon Button” Card Type) – Add an image to display at the top of the the template. The image will automatically scale to fill the entire height and width of the Header. The aspect ratio of this image is 21:9.

Card & Button Colors – BG = Background, Cls = Close

Button Icons (“Template | Icon Button” Card Type) – Choose from 4 different sets of expand and condense icons for the template’s round button.

Border Radius – Add/Adjust the round corners of the Card.

Shadow – Enable/Disable a subtle shadow around the Card.

Title Font – Optionally declare a custom font for the Header Titles in the Card and in the expanded content.

Text Font – Optionally declare a custom font for the text in the Card and in the expanded content.

Hover Animation – Choose from 3 different options that add hover animations to the entire Card. “Overlay & Message” will display a message when the Card is hovered. “Shadow” will add a shadow when the card is hovered. “Opacity” will make the card slightly transparent and opaque when hovered.

Truncate Type – Choose from 3 different options for how the Card handles overflowing content. “Text Ellipsis” will add “…” to any text that overflows at the bottom of the card. This option only works if the content at the bottom of the card is text. “Gradient Fade” will make the content fade out at the bottom of the card. “Clip” will not apply any effect and the content will simply not overflow past the bottom of the card.

Expanded Layout

Content Width – Adjust the width of the expanded content. This option will not effect the width of the stack when it is expanded but rather the content inside of the Stack.

Margin – This will add space around the edges of the expanded Stack equal to the value you set.

Padding T/B – Adjust the top and bottom padding of the expanded Stack’s content.

Padding L/R – Adjust the left and right padding of the expanded Stack’s content.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software