Overview
The Simple Columns stack is a Stacks add-on that adds multiple fixed width column elements to your layout. It's great for building very specific column layouts, but since the column elements flow onto the page and can be almost any size, it can also easily be used to build grids and table layouts as well.
Requirements
You'll need to have Stacks v1.3 or newer in order to use the Simple Columns stack.
Installation
To install the Simple Columns stack:
- Open the Simple Columns disk image (.dmg file) that you downloaded.
- Double click on the SimpleColumns.stack file.
- If RapidWeaver is running, restart.
Simple Columns is now installed ready to use.
Adding Simple Columns
Simple Columns is a stack, which means that you should see it inside your Stacks Elements Library. To get started, you should have a Stacks page in a RapidWeaver file already created. If you don't have a Stacks page already, create one by choosing Add Page in RapidWeaver and selecting Stacks.
- Click the Stack Elements Library icon.
- Scroll to the bottom of the Stacks Elements Library and click the triangle next to Other Stacks.
You should see an item named Simple Columns near the bottom. - Drag the Simple Columns icon into your layout.
A three part Simple Columns stack will appear in your layout. It will be empty to begin with. You can add content to it by dragging other stacks into it. To get started, try dragging a Text stack (at the top of the Stacks Elements Library) into each of the empty drop-zones of the Simple Columns element.
Now you have three columns of text to work with.
Configuring Simple Columns
Simple Columns is a stack, so it comes with all the basic stack configurations, like Border, Margin, Padding, and Background. See the Stacks manual for information about those. Simple Columns also comes with three of its own settings: Columns, Column Width, and Column Margin.
To view and modify these options, select the Simple Columns stack. The options are listed in the Simple Columns section of the settings area on the right of the window.
Columns
You can choose between 1 and 15 columns.
Column Width
Each column will be exactly this width in pixels.
Column Margin
The column margin is space added to the outside of each of the columns to offset it from the others and from the container that they're inside.
Floating Content
Simple Columns are actually built from HTML floating elements. This is a very powerful tool that you can use to build many things, especially on a fluid website. However it does comes with a few gotchas:
- Columns "float" in from left-to-right, top-to-bottom.
This means that if columns are of odd heights, then they can create tiled layouts that are not always lined up in complete rows. In order to avoid this, ensure that all elements are the same height or create your page in such a way that the columns do not wrap around (the total width of the page is greater than the total width of the columns). - Columns behave differently on very old browsers.
Although fewer and fewer people are using IE6 as it is very old, there are still some PC users that do. Simple Stacks does display its content very similarly IE6, but does not flex in quite the same way. When the web page gets much narrower than the columns the columns may not be centered in the same way that they will in every other browser. However this should not create problems or cause your site to be any less great.
0 Comments