1LD Tutorials & Blogs

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

New Release: Shifting Panels

The Shifting Panels stack allows you to easily create awesome looking background and image animations with a customizable grid of up to 800 panels. It can function as an animated banner, content container, or image element. The stack can be customized to fit just about any project design and is made to be compatible with most themes and stack frameworks.
Check it out

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

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

RapidWeaver is a trademark of Realmac Software