BootSnap is Stacks + Theme!
It's important to understand that BootSnap Stacks are designed to work exclusively with the BootSnap 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. They are designed from the ground up to work with the BootSnap theme.
Installation
When you purchase BootSnap, 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 BootSnap as your theme. Then add as many Stacks 2 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.
BootSnap Theme
BootSnap theme is basically an un-theme. Its settings are very minimal as it's essentially an EMPTY theme. BootSnap Theme's job is to stay out of your way and make all the BootSnap stacks responsive. That said, if you look at the Style Settings for BootSnap theme, you'll notice there are only TWO style settings.
- NavBar
Fixed - the NavBar will stay in a fixed position at the top of the page, the NavBar will ALWAYS be present in the top of the brower, even as the user scrolls down through content.
Relative - the NavBar will be at the top of your document. If the user scrolls down, they will need to scroll back up to view the NavBar.
Hide - the NavBar is completely disabled - this is recommended if you wish to manually place a NavBar Stack elsewhere in your page. - Themes (from Bootswatch.com)
IMPORTANT If you want to use BootSwatch themes, RapidWeaver CSS Consolidation MUST be disabled. External CSS from the theme site can't be called in if the project's CSS is consolidated. To disable CSS Consolidation, go to RapidWeaver Menu -> Preferences -> Publishing. Remove the checkbox from CSS Consolidation)
BootSnap Stacks
The BootSnap Suite includes the BootSnap theme and 16 content stacks. These stacks provide a variety of ways for you to add responsive content to the BootSnap theme.
2 Column Stack
This stack creates two columns with drop zones for additional stacks. As long as space is available on the viewing browser, two columns will be rendered. If space is not available on the viewing browser (for example, iPhone or iPad) then the columns will be displayed vertically. In vertical view, the left most column will appear on top followed by successive columns to the right. Take a note of the Column Span Stack's settings in the right hand side of your Stacks page. Twitter Bootstrap breaks the page into units of 12 spans. By default, both columns are set to equal widths of 6 units. You can adjust the number of units assigned to each column, just be sure to end up with a value of 12 or less for ALL columns.
3 Column Stack
This stack creates three columns with drop zones for additional stacks. As long as space is available on the viewing browser, three columns will be rendered. If space is not available on the viewing browser (for example, iPhone or iPad) then the columns will be displayed vertically. In vertical view, the left most column will appear on top followed by successive columns to the right. Take a note of the Column Span value in the Stack's settings in the right hand side of your Stacks page. Twitter Bootstrap breaks the page into units of 12 spans. By default, all three columns are set to equal widths of 4 units. You can adjust the number of units assigned to each column, just be sure to end up with a value of 12 or less for ALL columns.
4 Column Stack
This stack creates four columns with drop zones for additional stacks. As long as space is available on the viewing browser, four columns will be rendered. If space is not available on the viewing browser (for example, iPhone or iPad) then the columns will be displayed vertically. In vertical view, the left most column will appear on top followed by successive columns to the right. Take a note of the Column Span value in the Stack's settings in the right hand side of your Stacks page. Twitter Bootstrap breaks the page into units of 12 spans. By default, all four columns are set to equal widths of 3 units. You can adjust the number of units assigned to each column, just be sure to end up with a value of 12 or less for ALL columns.
Accordian
Accordian creates a collapsible layer with content concealed until the viewer selects the Group Title text. When this is selected, all content placed in the Drop Zone of the Accordian Stack will be displayed. The number of layers is set in the Stack settings, simply move the slider to increase/decrease the number of layers. By default, content in the FIRST accordian tab is displayed when the page loads. When other layers are selected, the first group will be hidden and the selected group will be displayed.
Alerts
Alert Stacks created styled notifications which are probably best used inside Modal alert window stacks. This stack allows inputs for an Alert Title (larger, bold text) and Alert Text (smaller text displayed below the Alert Title). Alert Stack has four style options in the Stack Settings window:
- Warning Yellow Background
- Success Green Background
- Error Red Background
- Info Blue Background
You also have the option in the Stack Settings to enable the Close icon - this is the X symbol in the upper right hand corner of the Alert box.
Block Quote
Block Quote is a text stack designed to display a quotation. This stack consists of a text input for the quote itself (top text input) as well as a quote attribution (the bottom text input). This stack has only one setting option in Stack Settings - Enabling the Pull Right checkbox will cause both the quotation and attribution to be right aligned (text is aligned left by default)
Button Bar
This stack creates a button-styled tab pane to organize content. The Button Bar stack can have up to 8 panes of content. The number of panes is controlled via Pane Count slider in Stack Settings. Each pane will contain an additional dropzone for further content to be placed. Each pane consists of a Tab Button and content area. The matching buttons and content panes are denoted by numerals. All buttons are located at the top of the stack and the content pane that matches the button has a corresponding number below. Button labels can be customized by simply double clicking on the button.
Buttons are further styled in the Stack Settings. There are a variety of color options available under Style and four sizes are available under the Size pulldown menu (Default, Mini, Small, Large).
Code
Code Stack is available for you to display html, php, javascript etc code samples without the code rendering on the page. Note that code entered in a Code Stack must be converted to html entities. There are several free tools to do this, here's a quick and simple converter: Centricle Encode HTML Entities
This stack has two options in Stack Settings. Google Prettify offers enhanced Syntax highlighing. Line Numbers adds line numbers to the left of your code display, this can be useful in allowing others to reference specific lines of code.
Hero Unit
Hero Unit is an attention getter, it's like adding a Jumbotron text callout to your site. Hero unit includes a large text title, a detailed text input and a drop zone for additional content. Warning - this stack is an attention grabber!
Modal
Modal Stack creates modal views, essentially a popup dialog box that requires the viewers attention/input to dismiss. Modal consists of a button that launches the popup, Modal Header, a drop zone for content and a Close button. The Launch and Close buttons can be modified by simply doubleclicking on the buttons in edit view. Modal header is displayed at the top of the popup, immediately above whatever content you place in the drop zone. An Alert stack makes a great content stack for Modal. The Modal stack includes a few options in Stack Settings as well. The animate option allows you to enable or disable the included animation. When animate is enabled, the Modal window will appear to drop down from the top of the browser. When disabled, the modal simply appears with no animation effect. Additionally, you can style your modal with custom colors (Button Style) and sizes (Size).
Navbar
You can use Navbar stack to place your site's navigation anywhere you like - if you use Navbar, you'll probably want to disable the theme's Navigation in the Page Inspector -> Style Settings. NavBar will generate a navigation bar base on your RapidWeaver site's structure and you can place the stack as desired on the page. This page has one option in Stack Settings - Show Brand. Enabling this checkbox will display your Site's Title as entered in the RapidWeaver Site Setup.
Page Header
Page Header is designed to be.....well....a Page Header. It contains two text elements, a Page Header (large text) and Subheading Text (smaller text) followed by a horizontal rule. The size of the header can be controlled via the Heading Size slider in Stack Settings.
Popover
Popover creates a button element that displays a popup info dialog when a user hovers over the element. The button can also be set as a link when clicked. The button text itself can be modified by double clicking the button in Stacks edit mode. This stack has several settings in the Stacks Setting pane:
- Style - select from one of the seven style/color options for the Popover button
- Size - select from one of the four size options for the Popover button
- Link - specify a page in your RW project or an external URL as the link opened by the popover button when clicked.
- Popover Title - the larger text that is the top/bold text in the Popover content area
- Popover Content - content text displayed in the popup underneath the Popover title
Tabs
This stack creates tabbed panes to organize content. The Tab stack can have up to 8 panes of content. The number of panes is controlled via Pane Count slider in Stack Settings. Each pane will contain an additional dropzone for further content to be placed. Each pane consists of a Tab Button and content area. The matching buttons and content panes are denoted by numerals. All tab titles are located at the top of the stack and the content pane that matches the tab has a corresponding number below. Tab labels can be customized by simply double clicking on the Tab titles at the top of the stack in edit mode.
Tabs are further styled in the Stack Settings. There are two styles to choose from: Tab and Pills. Tabs are like filing folder tabs whereas Pills are rounded buttons. Tab bar placement is also controlled in Settings - you can place the tab bar at the top, bottom, left or right of your content panes.
Well
Use the well as a simple effect on an element to give it an inset effect. The well is a grey area stack that contains one drop zone for content.
0 Comments