Stacks Reference Manual

 

Stacks Overview

Stacks is a plugin for RapidWeaver that allows you to build pages that flow text to the dimensions of a theme even if the theme has a variable width. Using a flexible framework, you can build flowing columns, flexible rows, and tiles of images. You can build columns within columns within rows within columns. Or group a stack of objects inside a box.

Installing Stacks

Minimum Requirements

• RapidWeaver 8
• Mac OSX

Remember to Restart

RapidWeaver will not activate a new plugin until the next time you launch RapidWeaver. So you must quit and restart RapidWeaver to use the plugin.

Installation

In order for RapidWeaver to find Stacks, it must be installed into a specific folder inside your user Library folder. However RapidWeaver places it there automatically if use the following instructions.

1 Open RapidWeaver.
This may open open your last used documents. Wait for that to finish.

2 Close any open documents.
This ensures that nothing else is going on in RapidWeaver while you install the plugin, and that the auto-open feature of RapidWeaver and the installation process don’t conflict.

3 Double-click on the Stacks icon in the Finder.
Once you download the plugin from our website, it should be in your downloads folder.

4 Quit RapidWeaver.
The plugin should now be installed and ready to use. The next time you add a page to your site, a new page style should be available.

 Getting Started

To create a new Stacks page:

1 Open RapidWeaver and either open an existing project or create a new one.

2 Add a new page by clicking the Add icon. The Add icon is located in the upper left corner of the RapidWeaver main window.

3 Choose Stacks from the list and click the Choose button.

 You now have a Stacks page in your RapidWeaver website. A new stacks edit window appears.

 The Library

The library contains the different individual stacks that you can add to your page. You can drag individual stacks from the library into the layout. You can have any number of individual stacks on your Stacks page. And you can move them around by simply dragging and dropping them where you want them to be.

Access the library by clicking the Library icon in the upper left area of the edit view. The library lists all of the individual stacks that you have installed. 

You can view the library in three modes:

• a sidebar in the RapidWeaver window
• a floating popover
• a standalone window palette 

To toggle to a different library mode, click  the desired button (Sidebar, Popover, or Window) in the lower area of the library.

You can change the width of the library groups (the left side of the library window). Making the library groups area wider shows the labels for the icons (e.g., Stacks, Partials, Images, etc.)

When the library is a window, you can change the width and height, as well as move it around the screen.

Details

When an individual stack is selected, the area at the bottom of the library shows the name, description, creator, and version of the stack as well as any tags the individual stack has. Tags are determined by the stack developer. See below for more on groups.

You can click the heart icon to mark a stack as a favorite. You can show or hide these details by clicking the Details icon at the bottom of the library window.

You can click the gear icon to access additional options that are specific to the selected stack.

Groups

The left side of the library window shows various groups of stacks. You can view the group names either by icon only or with a text label. To see the text, drag the divider to the right to create space for the text.

• Stacks — shows all the stacks in your library
• Partials — shows all the partials in your library. See below for more on partials (they’re really cool).
• Favorites — shows all the stacks you have marked as a favorite. This gives you quick access to your favorite stacks.
• Built In — shows all the built-in stacks.

Additionally, you can create custom groups. These groups will show in the list on the left of  the library window.

You can create a custom group two ways.

1 Click the plus icon in the lower left of the library window. Then give your group a name.

2 Select a stack, then choose Add to Group from the Action pop up menu in the Details section in the lower right of the library.

Organizing the Library

Stacks gives you more options on how to organize your stacks library. Access these options from the Library Preferences pop up menu in the lower left of the library.

The default settings are Large icon size, sort By Tag, and Sort Built-in Stacks First.

• Icon size — you can show the icons for individual stacks as small, medium, or large icons.

• Arrange stacks — you can arrange the stacks by Author, Tag, or Title.
• Sort Built-In Stacks First — this sorts stacks according to your selection (by Author, Tag, or Title) but built-in stacks will appear first in the library.
• Sort Reverse — this sorts stacks according to your selection (by Author, Tag, or Title) but in reverse order.

• Show Hidden Stacks — Stack developers occasionally include hidden stacks. This is not an option that most users will have a need for.

• Show Stacks Library in Finder — This allows you see the installed stacks in the Finder.

Updating Stacks

Stacks has a robust, new method for updating stacks. You can install updates for stacks either individually or all at once.

To check for updates, click the Updates button at the bottom of the library. To update all stacks, click Update All. To update individual stacks, click the Update button next to the stacks you want to update.

 Partials

A partial is a group of stacks that you can reuse on any page or on multiple pages in your site. You can make edits and changes to the partial (the group of stacks) in one place and the changes are reflected everywhere in the site/document. For the best introduction to partials, check out the video: http://yourhead.com/partials/ 

To create a partial, select the group of Stacks you want to use and click the Partial button at the top of the Edit view. Your view will automatically move into the Partial editing view. You can give the partial a title, subtitle, author, and tags.

You can edit each stack in the partial. They behave just as a “normal” stack does. You can then place this partial in multiple different places in your site and any changes that you make to the partial are reflected in every location of the partial. 

Once you’ve created a partial, it appears in the Partials group of the library. The stacks inside the partial have dotted lines rather than solid. To edit a partial, select it and click the Edit button in the top tool bar. Alternatively, you can double-click the partial to edit it. Once you’ve finished editing the partial, click the Back button. You can re-edit the partial at any time. 

When you first create a partial, the stacks are only editable from with the  partial editor. And all content and styles are the same for every instance of the partial in your site. However, if there is a particular stack in the partial  that you want to be able to change in just one instance of the partial, you can do that! 

When you are editing the partial, click the blue pushpin circle on the stack that you want to customize. That will allow that particular piece to be edited on individual instances of a partial.

For example, in the picture below, the Left Floating Image stack has been designated a partial, but the image stack inside was unpinned. This means that the style of the Left Floating Image stack and the text content are consistent across all instances of the partial and are only editable from within the partial. But we can put a different image in every instance. 

 

Info Pane

All built-in stacks have the following preferences that you can set for each stack. Some individual stacks have additional preferences as noted.

To access the info pane, click the Info button in the upper right of the Stacks edit view.

Background

You can choose to fill a stack with a solid color or with an image. 

To choose a color, click the Color button, then click the color well and select the desired color. To remove the color, click the Color button again.

To choose an image, click the Image button. Then drag and drop the desired image into the image well. Alternatively, you can use the Browse button to navigate to and select the desired image.

You can set the direction of image tiling, the size of the image, and the position of the image. 

To remove the image, click the Clear button next to the image. To remove the image background setting, click the Image button again.

Border

You can add a border up to 10 pixels wide. Click the color well to select the desired color. You can also round the corners.

Layout

The Fill Mode determines how a particular stacks fills the available space.

• Fill—The stack fills the entire space that it is given. This is the default mode.
• Flexible—The stack fills the specified percentage of the space that it is given. The default is 100%, which is the same as “Fill”. You can adjust the slider to the desired percentage. If you choose a width less than 100%, you can also specify the alignment.
• Fixed Size—You can set a fixed width in pixels for the stack and choose the alignment.

• Margin—The Margin is the amount of space between the edge of a stack container and the border. You can think of the margin as the space between two different stacks.
  The default setting is 2 pixels. When you increase the margin, the overall size of the stack does not change. Instead, the content area, including the border, becomes smaller.
  To change the Margin for the selected component, move the Margin slider to the desired setting, from 0 – 20 pixels. To add margins larger than 20 pixels click the plus button to the left of the Margin setting.  

• Padding—The Padding is the amount of space between the border and the content. This applies whether you have a visible border or not.
  The default setting is 2 pixels. When you increase the Padding, the overall size of the stack does not change. Instead, the content area becomes smaller, while the border remains the same size.
  To change the Padding for the selected component, move the Padding slider to the desired setting, from 0 – 20 pixels. To add padding larger than 20 pixels click the plus button to the left of the Padding setting.  

Responsive

Stacks provides options for customizing responsive design. Most stacks provide the option of hiding the stack when viewed in a particular mode - Mobile, Tablet, and Desktop. Column stacks also have the option of stacking the columns on rather than displaying them side by side 

To specify these settings, select the desired stack then click the button that corresponds to where you want to hide the stack or stack the columns. 

The Stacks

The items in the library are called stacks. Each one is building block you can use in your page. The library comes with the basic stacks that you'll need to build up the layout of your page, like columns, images, text, and HTML. You can add other items to the library to extend the functionality of Stacks. For more info about getting more stacks, go to http://realmacsoftware.community/rapidweaver/addons/

Text

A Text stack has the same features that you'll find in a RapidWeaver Styled Text page. Anything that you can do in a styled text page you'll be able to do in a Text stack. That includes adding images, using HTML, or formatting your text. 

Note: Stacks now has a Markdown stack, which allows you to easily add formatted text that is more precise and accurate than that in styled text.

Markdown

Markdown is an simple way to write text with formatting — e.g., headers, bold, bulleted list — that easily translates into HTML. You can use a Markdown stack similarly to a Text stack. The Markdown stack allows you to easily add styles to text that is more precise and accurate than adding the styles in styled text. And the result is much more readable than html.

For more information on how to get started with markdown, check out these sites:

• https://support.squarespace.com/hc/en-us/articles/205813788-Using-the-Markdown-Block
• http://markdowntutorial.com
• https://guides.github.com/features/mastering-markdown/

HTML

The HTML stack can contain any plain text, but is usually used for adding HTML markup to your page. This means it's perfect for adding YouTube snippets, or a bit of extra HTML to your layout. Please be careful when adding HTML. Stacks exports the text as-is. Syntax errors in an HTML stack will appear as errors on the page as a whole.

Image

The Image stack creates a placeholder where you can drag one image. Image stacks accept any valid image format, including JPEG, PNG, TIFF, GIF, animate GIF, and Photoshop files, among others. JPEG, PNG, GIF, and animated GIFs are, by default, exported in their original format. All other formats are exported as PNG, by default. However, you can change the export type

You can use an Image stack to do basic image editing including resizing, rotating and adding borders and drop-shadows.

Column

These stacks create 2 or 5 columns where you can add other stacks. Each column that's created can contain as many other stacks as you like or none at all.

• The 2 Column stack settings allow you to set the width of the gutter and the percentage split of the column width.
• The 3 Column stack settings allow you to set the width of the gutter and the percentage width of the left and right columns.
• The 4 and 5 Column stack settings allow you to set the width of the gutter. 

Float

This stack contains an empty space where you can add any other stack and the text will flow around it. You can set the floating content to be left or right aligned.

Floating Image

These two stacks contain space for an image and text that will flow around it. The text will wrap around under the image when there is enough text to do so.

Note: To keep things simple, edit mode displays the text and image as columns. It will wrap when published. 

Quote

This stack provides a way to highlight a quote of text. It also includes an area for the name of the quoted person. 

Button

This stack creates a simple button. You can change the text of the button. 

Header

This stack provides a simple way to create a header for content on your page.