BootSnap3 Addon Kit #1

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 BootSnap.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 #1 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.

Carousel Stack

This stack creates a revolving carousel of images that include a variety of style options.

Item Count - Controls the # of drop zones available for images. Increasing this slider count increases the # of drop zones.
Max Width - Sets the maximum width of images within the stack.
Max Height- Sets the maximum height of images within the stack.
Interval - The time (in milliseconds) to display each image before transitioning to the next. 5000ms = 5 seconds.
Background Color - The background color that will show through for each image that doesn't span the maximum width/height as established above.
Caption - Enabling this option will add a text field to each drop zone area, this text field will be a caption displayed with the image above it.
Pause on Hover - This option will allow the carousel to pause (i.e., ignore interval) any time the cursor is hovered over an image.
Wrap - When enabled, the carousel will start from the first image again once the last image has been displayed. Essentially a looping option for the carousel.

Contact

The Contact Stack adds a simple contact form to your BootSnap3 page. NOTE: This is a SIMPLE contact form. Users looking for more complex form configurations should consider our FormSnap Suite.

The Contact Stack displays a preview of the contact form when placed on a page in Edit mode. Making changes to settings will update the preview. This stack places a TRIGGER BUTTON on the page, when clicked, the form will open in a modal view. The form can also be used in Inline mode where the form is present upon page load.

Contact Main

Recipient - destination email address for form results to be sent to
Subject - The subject of the form generated email.
Placement - Modal (Form opens in modal window when trigger button selected) or Inline (always present)
Button Style - Color scheme for form buttons
Button Size - Mini/Small/Large - a preference for button size
Auto Reply - enable to send an automatic reply to the sender's email address. When enabled, an additional text area is presented in the contact area of the stack. The desired text of the auto reply can be entered here. Note that it's not possible with this stack to add form-supplied data to the auto reply (users needing this type of functionality should consider FormStack Suite)
Required: - color selection for the * Reqiured symbol on form fields

Text Settings - These settings can be used to modify the language / text on the form and buttons:

Name Label - text label for Name input
Email Label - text label for Email input
Message Label - text label for Message area input
Test Question - text for human validation question
Test Answer - answer required to satisfy human validation equation above (hint: Math questions are great universal human validation questions)
Send Button - text for button utilized to submit the form
Cancel Button - text for button utilized to reset (clear) the form

Sticky Footer

The footer stack adds a "sticky" footer content area to your page - the footer stack is located persistent to the bottom of the browser window. The footer stack is a wrapper stack for other stacks, nesting any stack inside the footer stack will place that content at the bottom of the page. This stack has one option, a color picker for custom background color.

List Group

This stack allows you to create an unordered list of text items. Utilize the Tab Count to control the number of items in the list (1-40 items may be present in each instance of the stack)

Additionally Badges may be enabled on this stack. Badges are an additional numeric input displayed adjacent to list items.

Media

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content. Essentially a stack to mix images and text in a responsive manner.

Image - Select an image to display (image should be properly sized in an image editing application)
Alignment - This is image alignment, choose to place the image on the left or right side of the stack.
Shape - Label - Image shape affect can be applied, if desired
Heading - heading/title text for the stack

Progress Bar

Provide feedback on the progress of a workflow with simple yet flexible progress bars. For example, if you had a form consisting of four pages, you could place an instance of Progress Bar on each page. Indicators could be established at 25/50/75/100 % complete to provide a visual display status of progress through the four part form. Additionally, progress bar can be used to create simple graphs as shown in the example page at: http://yabdab.com/demo/bootsnap/addonkits/addonkit...

Title - Text for this bar's title, will be placed inside the bar
Percentage - The level to be marked as achieved
Style - General purpose color schemes (Default/Info/Success/Warning/Danger)
Striped - Enable a striped effect on the completed portion of the progress bar
Animated - When striped is enabled, you can optionally animate the stripe, this adds a motion effect to the stripe.

Topper

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.

Tool Tip - Instructional text displayed when users hover cursor over the Topper button
Button Style -General purpose color schemes (Default/Primary/Info/Success/Warning/Danger/Link)
Size - Control the size of the Topper button (Mini/Small/Large)

Responsive Video

Embed video into your page and it will scale according to the viewport size. Video stack allows you to bring in video from Youtube.com, Vimeo.com and Dailymotion.com. Simply publish your video to one of these three providers. Once published, your video will be assigned an ID which you'll add to the Video Stack settings. ProTip: Place the Video stack inside a Modal Stack to open the video in it's own lightbox.

Type - Select the provider you've published the video to (YouTube, Vimeo or Daily Motion)
Video ID: - The numeric ID of the published video

Bootsnap 3 AddonKit #1 Manual