blog-tutorial-post-template

Tutorials

Here is a customer review/tutorial by William Winter

Getting Started

Step 0: Download and install stack. 

Step 1: Drag the stack onto the page . After dragging the stack onto the page, select the amount of columns that you want displayed. The selector for that can be found in the stack options under (Column Selection).

columns

Step 2: Input the content that you want into the stack.

 


Grid Activation

The grid is an option that will reduce the amount of times that you have to drag Responsive Grids onto a page.

Step 1: Turn on the grid option to activate it. “note:anything in the stack prior will be disappear

Grid_on

Step 2: Select the amount of rows that you want to use. “The default is 2”

columns Screen Shot 2014-11-20 at 9.30.09 AM

 


Spacing Options

Gutter: The gutter has to option to turn off and on.

Screen Shot 2014-11-20 at 9.38.19 AM

Gutter Width: Select the width of the gutter if you have the Gutter option turned on.

Screen Shot 2014-11-20 at 9.38.36 AM

Bottom Margin: Input how much spacing you want bellow Responsive Grids.

Screen Shot 2014-11-20 at 9.38.47 AM

 


 

Break Points

Break Point 1: Input the break point for the first media query. “This is usually for tablets on portrait mode.” 

break point

Break Point 2:  Insert the amount of pixels you want for the second break point. “This is typically for mobile phones.”

mobile breakpoint

 


 

Advanced options

2 column , single column spacing , single column width , image options

 

2 Column

Split:  Split is an option unique to the 2 columns option. Choose whether you want the stack to be a  50/50, 40/60,  etc.

Split

 

Single Column Spacing

The Spacing option is the option for the padding on the top and bottom of the single column stack. This become very helpful if you are doing a single page website or even a portfolio site.

Step 1: Turn on spacing.      Spacing

Step 2: Select whether you want to use pixels or percentage.

px or perc

Step 3:  Input the amount you want on the top and bottom. “There maybe be more spacing on the bottom if you have an amount higher than Zero on the margin bottom option.”

Screen Shot 2014-11-20 at 9.59.16 AM

 

 

Single Column Width

Control the max width of the single column. This is a great option if you want something to be a certain size and positioned in a certain way. “It will still be responsive! “

Step 1: Turn on the Max-Width option to activate it. 

Screen Shot 2014-11-20 at 10.11.42 AM

Step 2:  Input how large you want your stack to be.

Screen Shot 2014-11-20 at 10.11.58 AM

Step 3: Select the position of the stack. “center is very useful”

Screen Shot 2014-11-20 at 10.12.29 AM

 

 

Image Options

You have a choice to have images be responsive.

Step 1: Activate responsive images.

Screen Shot 2014-11-20 at 10.21.07 AM

Step 2: Input how wide you want your image to be.

Screen Shot 2014-11-20 at 10.21.49 AM

 

 

 

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software