Pure Grids
Stacks Image 8547
Be sure to drag/drop the Pure Core Stack into your stacks editor. This stack enables the use of all Pure Stacks. Do this only once per Stacks page.
1: Creating Columns
Stacks Image 15968
By default Pure Grids is set to a single column for use as framework (See tutorial 4: Creating Frameworks). To set a multi column layout , just change the column values from "off" to a fraction/percentage. When doing this make sure your column values add up to 1 for fractions or 100% for percentages. This ensures that the columns will take up the full width of your content area.

Example: For an even three column layout set the first three columns to 1/3. If you want an uneven layout you could set the columns to 2/5, 2/5, 1/5. For a two column layout with a sidebar you could use the values 2/3, 1/3 or 3/4, 1/4.
3: Adjusting the Content Width and Alignment
Stacks Image 23469
The content width is adjusted in the "Settings" menu. By default the content width is set to 1024px and center aligned. In the image below I have set the width to 640 and the alignment left.
The content is now floated to the left and is more narrow. If you were to set the width to "none" your content would fill to entire width of the browser. Keep in mind that the browser width varies greatly from visitor to visitor, especially for mobile device visitors, so a "none" or full width content area may not be favorable for text based content. The best use for a "none" or full content width setting is for images, a slider/banner, or when using the Grid stack as a framework for a header, footer, or sidebar.
5: Breakpoints (Added v.1.5.0)
Stacks Image 16095
Enabling Breakpoints

Enabling Breakpoints will allow you to define the responsive behavior of your Grids Stack. There are two “Breakpoints” that you are able to define. The first one titled “Tablet” is set to 840px which is Pure’s default width for tablet browsers. The second one is titled “Mobile” and is set to 640px which is Pure’s default width for mobile browsers. Adjusting the column values underneath each section will change the grid layout for browser widths that are equal to or lesser than the breakpoint value.

Example
If I set 3 columns in the grid stack to 1/3 widths and leave columns 4-6 Off
Stacks Image 24616
and set the “Tablet” breakpoint to 840px. I can change the 3 column widths to: 1, 1/2, 1/2 to create a layout the fits tablets screens better.
Stacks Image 24637
Note: You do not need to adjust the values of columns 4-6 since we have turned them off in the Width Settings menu.
Now I right click the Stacks page and select “Preview Page With…” and then select my browser.
Stacks Image 24661
I then adjust my browser width to a narrow 840px size to see how the Grids Stack responds.
Stacks Image 24677
The “Tablet” breakpoint now defines the layout above for tablet browsers and shows the layout below to desktop browsers who have more width room to fit content.
Stacks Image 24748
More on Breakpoints

If the default breakpoint values do not fit your specific site well you may adjust by increasing or decreasing them until you get a good fit. It should be said that you are not limited to making adjustments to tablet and mobile browsers (These are just titles with matching default values ). You can set the value to whatever you like, for example 1024px which would allow you to adjust for small desktop screens. If you would like to only have one breakpoint, you can even set the “Mobile” value to 0px and only use the “Tablet” section.

Here are some default breakpoint values that work well with Pure for RapidWeaver: 1280px (Desktop), 1024px (Small Desktop), 840px (Tablet), 640px (Mobile).

Hiding Content

Along with setting different width values for each breakpoint, you are also able to choose to hide certain content. Just select the “Hide” value in the breakpoint settings or the width settings if you would like to hide content on desktop browser widths.

Example
If I want to have unique content for each of these browser widths (Desktop, Tablet, and Mobile) I can add a Grids Stack with columns 1-3 set to 1(100%), hide, and hide. And set columns 4-6 to Off.
Stacks Image 24701
Now in the breakpoint settings I will set the Tablet column values to hide, 1(100%), hide and the Mobile column values to hide, hide, 1(100%).
Stacks Image 24724
Now in the editor I will have three “Drop Stacks Here” sections for columns 1-3. Anything I place inside column 1 will only display to desktops, things in column 2 will only display to tablets, and things in column3 will only display to mobile browser widths.
Stacks Image 24740
2: Adjusting the Gutter
After you set up your columns you will notice that there is no space between each column. This could be undesirable if your content is text. See below.
Normally, this is fixed by adding padding to each of the text Stacks. However, this will add space to the outside edges and things may not line up well in some situations. You could also specify a detailed padding so that there is no padding on the outside edges but that can cause things to get ugly when the page is viewed on a small device (the alignment will be off).

The solution is to use the gutter option to only force space in-between each column. This option keeps everything looking nice when the window is resized. In the example below I have set the gutter to 4%.
4: Creating Frameworks
Pure Grids can also be used to create a framework for a custom designed website. Below is an example of how to create a simple framework.
In the example above I have used six Pure Grids Stacks. I have placed five of them inside of one parent Grids Stack (Labeled in the image as Wrapper). I have also made the Main Content Stack into two columns and placed another Grids Stack inside the right column (Labeled Sidebar). The footer Stack has been split into three columns. Below is a breakdown of each of the Stack's settings.

The wrapper is used as a background for our design. This stack's background is set to "Tiled Image" and an image has been added (Find awesome free background patterns at
subtlepatterns.com). The content width is set to 1024px and the alignment is set to Center. This will make all the inner Grids Stacks 1024px wide and center aligned.

Other important settings have been highlighted in red in the image above and below is what the preview would look like if content was added to each of the Grids.
6: Other Settings
Stacks Image 24577
Content Width

These options are best for when the Grids Stack is the outermost Stack and you would like your content nicely centered in the browser window. Set the option “None” if you are not using the stack as a part of the framework. Options 640px - 1680px allow you to set tier based content widths. As the width of the browser gets smaller the content will switch between all the values starting at the highest value you have set the Stack to. As of version 1.5.0 you are now also able to select an option titled “padding %” which allows you to declare a padding percentage that will allow your content to be nicely centered without the tier based content widths.

Sticky

This option is for when you want to have a menu "Stick" (set to a fixed position) to the top of the window when a visitor scrolls past it. Just place a Pure Menus Stack inside of a Pure Grids Stack and check this option. If you would like to menu to "Stick" but hide when the user is scrolling down your page and re-appear when scrolling back up, choose the "On + Hide" option.

Z-index

The z-index property specifies the stacking order of the Stack. An element with greater stack order is always in front of an element with a lower stack order. If a Stack appears behind of another, increase it's z-index to bring it in front. This option is useful when using "Make Sticky" or when adding Shadows.

Absolute Position (Added v.1.2.0)

Enabling this checkbox will give the grid an absolute position causing it to display over top of any stacks that are placed below it. This is useful when you would like to place text over the top of a stack that does not normally support text.

Margin Top (Added v.1.2.0)

This option appears after enabling Absolute Position. Use this percentage based slider to change the vertical position of the grid's contents. The results will not display in edit mode.
Stacks Image 24581
The Shadows & Shading menu settings are strictly cosmetic.

Shadow

Add CSS3 shadow effects to the outside of your element. Use these to separate content like in the Sidebar found in the "Creating Frameworks" tutorial example.

Shading

The Shading option allows you to add gradients as element backgrounds or use transparencies for see through backgrounds.
Stacks Image 24585
The One Page Navigation Settings are to be used in conjunction with the Pure Menus Stack.

Grid Height (Added v.1.2.0)

When this option is left on "Auto" the height of the grid will be determined by the contents and padding (This is the default behavior for most stacks). The "Match Window Height" option is for when you want to force the grid height to be the same size as a visitors browser window. This option is good for separating content and creating more scroll space on a webpage.

ID (Added v.1.2.1)

This will give the grid and ID that will let Pure Menus know were to navigate to when a Menu Item has been clicked.
Stacks Image 20788

About

Pure for RapidWeaver was created to give RapidWeaver and Stacks users a way to create their own custom designed websites while also making it simple, fun, and extremely fast. In fact, this entire website design was created with it.

Pure for RapidWeaver is a product by 1 Little Designer.
Stacks Image 20803

Latest Releases

Stacks Image 18368
Stacks Image 18241
Stacks Image 21479
Stacks Image 17806
Stacks Image 20808

Email Newsletter

Subscribe to receive updates when new Project Files are released.
© 2016 1LD. RapidWeaver and Pure trademarks and brands are the property of their respective owners and are not affiliated with 1LD.