Documentation

BootSnap3 Addon Kit #2

Addon Kit #1 is a group of 8 stacks designed to work with the BootSnap3 theme. It's important to understand that BootSnap Stacks are designed to work exclusively with the BootSnap3 RapidWeaver theme. Third party stacks *may* work with BootSnap theme, but they are not supported. Likewise, the BootSnap stacks may work with other themes, but they are not supported as such.

Installation

When you purchase the Addon Kit #1, you'll receive a file called BootSnapAddOnKit2.dmg. This disk image contains a folder with your RW theme and Stacks. Just select all the items inside the folder and doublclick to install. If RapidWeaver is open, you'll need to close and relaunch RapidWeaver to see your newly installed products.

Getting Started

Designing a fully responsive site with BootSnap is very easy. Simply create a new RapidWeaver project and select BootSnap3 as your theme. Then add as many Stacks 2.5 pages as you like and add any of the BootSnap stacks to your pages. Sticking with BootSnap theme and stacks insures a fully responsive finished product.


BootSnap3 Addon Kit #2 Stacks:

This Addon Kit #1 includes 8 content stacks. These stacks provide a variety of ways for you to add responsive content to the BootSnap3 theme.

Feed

This stack allows you to insert the contents of an RSS feed

  • RSS URL - The full address of the feed you'd like to import (generally ends with .xml)  Be sure to include http:// prefix.
  • Limit - The number of articles to display from the feed URL.  
  • Content - Select Short Content which displayed only approximately the first line of each article, or Long Content which will display the full article.  
  • Load Effect - Feed stack includes a variety of animations you can choose to display your rss content:
    • Show - all articles displayed simultaneously (essentially no animation)
    • Slide - articles display uniformly with top-to-bottom animation
    • Slide Fast - same as above, only with faster animation.
    • Slide Synch - articles open from top-to-bottom with accordion style animation.
    • Slide Fast Synched 0 same as above, only with faster animation.
  • Include Images - Display any images included in feed content
  • Request via SSL - Request secure (ssl) access to the feed URL.

Flip

Flip adds a slick horizontal "flip it over" animation effect to stacks content. This stack contains two drop zones for additional stacks.  When the page loads, the content in the Front stack is displayed.  The visitor can click this content to FLIP the stack and show the content on the back.  The stack has no additional settings, simply drop in your front and back content and go. 


Grid

Grid is a super simple way to add Google Sheets data to your Rapidweaver site.  Simply build your spreadsheet within your Google account.  When you're ready, choose File -> Publish To the Web from your sheet's toolbar.  Choose LINK as the publish type and take note of the URL.  You can also automate publishing to the web by selecting  Automatically Republish When Changes Are Made.  Publish, then go back to Rapidweaver.  In the Sheet URL field, paste in the URL shown on the Link settings when you published.  You will also need to provide the sheet name which should be presented at page load.  By default, Google names this Sheet1, so unless you've changed this, simply enter:  Sheet1 in the Worksheet Name setting.


Notify

This stack allows you to place an alert box a the upper right hand corner of the viewport.  

  • Type - Choose from presets or create a customized color scheme for your Notify box.
    • Default - Yellow Notification style
    • Info - Blue Informational style
    • Success - Green Success style
    • Error - Red Error Style
    • Custom - Selecting custom will enable color pickers, simply select the desired colors for a custom notification box.
  • Title - Text to be presented as the title of the notification box.  This is the largest text in the box.
  • Content - Smaller text presented as the body of the notification.
  • Icon - Enables FontAwesome icon display adjacent to title.
  • Custom Icon - enable to enter the name of your desired FontAwesome icon (see http://fortawesome.github.io/Font-Awesome/icons/)
  • Auto Hide - Notification box will automatically fade off the page in approx 10 seconds.
  • Non-Block - allows the notification box to become transparent when users hover in the box, allowing access to content on the page underneath.
  • Show Close Icon - Presents Close Icon (X) in upper right corner of notification box
  • Close Icon On Hover - Presents Close Icon (X) in upper right hand corner of notification box only when user is hovering cursor within the box
  • Show Pause Icon - Will pause progression or auto disappear of stack to allow reader more time to view/act on content.
  • Pause Icon on Hover - Display Pause icon only when user hovers cursor in notification box.
  • Show Shadow - Places a drop shadow underneath the notification box.
  • Opacity - control the opacity of the notification box.  100% = opaque.  0% = transparent.
  • Sharp Corners - enabling turns off the default rounded corner effect.
  • Fade Effect - adds fade in/out transition animation to the notification box.

Pager

Place content in "pages" within a page.  Renders page navigation system and offers animation between page views.

  • Page Count - Move count slider to increase/decrease the number of "pages" added by the stack.  Each "page" includes its own drop zone for content.
  • Size - Sets the size of the page navigation menu, Small/Default (Medium) or Large.
  • Menu Alignment - Left, Center or Right align the page navigation menu.

Share

Enable users to share your site via the most popular social media sites.

  • Placement - Select placement for the sharing bar - right or left side of page.
  • Show Tooltip - Enable to show tooltip when users hover over any area of sharing bar.
  • Tooltip Prefix - Text to be displayed when user hovers and Tooltip is enabled.  
  • Social Networks - select the desired social networks to be placed in the sharing bar.

 


Steps

This handy stack creates a step-by-step guide and allows you to place other stacks content within each step.  Great for tutorials!  Note that step titles are established in the content area of the stack (not in settings).

  • Steps - Slider control for number of total steps to be presented.  Each step has its own drop zone for additional stacks content.
  • Transition - Select the animation type to display when moving between steps:
    • None - No transition animation.
    • Fade - Current step fades out, next step fades in.
    • Slide - Current step slides out to top, next step slides in from top.
    • Slide Left - steps move right to left forward for  "Next" and left to right for "Previous"
  • Orientation - Present steps horizontally or vertically.
  • Color (Current) - Color used for step bar to denote currently viewed step.
  • Color (Done) -  Color used for step bar to denote past/completed steps.
  • Next - Text label for "Next" button to progress through steps.
  • Previous - Text label for "Previous" button to go back through earlier steps.

Tab Panels

Topper renders at the bottom of your page and provides a simple and fast way for your users to jump back to the top of the page. Clicking the Topper button will return users to the very top of a page. Very useful in mobile views where pages become long.

  • Style - Select style color for Tab Bar:
    • Default - Grey Informational style
    • Primary - Blue Primary style
    • Success - Green Success style
    • Info - Light Blue Info Style'
    • Warning - Yellow Warning Style
    • Danger - Red Alert Style
  • Tab Count -Slider control for number of total tabs to be presented. Each tab has its own drop zone for additional stacks content.
  • Fade Effect - Enabled Fade in/out transition animation when moving between tabs.

Last Update: 2015-09-11T12:16:06Z