Stacks Image 1532

Grid

Our proprietary grid layout system.
Instant Download
Requires Rapidweaver & Stacks Plugin v3.5 +

Our proprietary grid system has extremely concise settings, yet is still the most advanced grid layout system to date.

Simple breakpoints : We made it as fast as possible to set-up, by simply adding 4 dropdown select controls in the settings, one for each device size. Simply select the number of columns you’d like the grid to have on each device size.

Re-definable : By default the grid will re-arrange its self at screen sizes that equate to iPad (landscape), iPad(portrait), and iPhone. You can re-define the screen sizes for these device breakpoints if you wish.

Vertical alignment : It’s rare that the content you add to each cell in your grid will be of equal height. We added a vertical alignment option. It can automatically align the contents of the cells to top, middle or bottom, on a row by row basis.

Tiny footprint : There is no javascript involved in the grid, it’s pure CSS, and has a minuscule footprint of just 4kb on disk. This does not increase as the number of cells you add to the grid increases.

Demo

Live demos of the stack in action.

Stacks Image 1557
Demo 1

Try resizing the browser window to simulate different device sizes. Note we have left the settings to the defaults (4 columns on desktop, 3 columns on iPad Landscape, 2 columns on iPad portrait, and 1 column on an iPhone).

Header
Stacks Image 1848

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Header
Stacks Image 2054

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Header
Stacks Image 2056

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Header
Stacks Image 2058

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Header
Stacks Image 2060

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Header
Stacks Image 2062

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Header
Stacks Image 2064

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Header
Stacks Image 2066

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Demo 2

Uneven heights example.

There may be many times you want a grid type layout, but the contents you add to each cell in the grid may not be of equal height. Grid stack can handle this just fine. When you select to make each grid item equal in height, either on a row by row basis, or the entire grid. You are then given further options to set a background colour, a border, border radius, and padding in each of the grid items in the stack. Selecting to equalise the grid heights enables javascript. This demo is set to display every item in the grid the same height as the tallest item (You can select a row by row option if you wish).

Header
Stacks Image 2068

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Header
Stacks Image 2070

Lorem ipsum dolor sit amet, sapien platea.

Header
Stacks Image 2072

Lorem ipsum.

Header
Stacks Image 2074

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Header
Stacks Image 2076

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Header
Stacks Image 2078

Lorem ipsum dolor sit amet, sapien platea morbi.

Header
Stacks Image 2080

Lorem ipsum dolor sit amet,

Header
Stacks Image 2082

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.

Control

A comprehensive list of all available controls.

Stacks Image 1588
Horizontal gutters

This is the margin between each of the cells in the grid. Independent of its vertical counterpart.

Vertical gutters

This is the margin between each of the cells in the grid. Independent of its horizontal counterpart.

Vertical align

Vertically aligns any uneven cell content on a row by row basis to either the top, middle or bottom of each row.

Desktop

The number of columns to display at or above the iPad landscape size.

iPad landscape

The number of columns to display at or below this device size.

iPad portrait

The number of columns to display at or below this device size.

iPhone

The number of columns to display at or below this device size.

Re-define screen sizes

By default the breakpoints for each device type are set to their real world counterparts. You can override these sizes by selecting this option.

Equalize

There may be many times you want a grid type layout, but the contents you add to each cell in the grid may not be of equal height. Grid stack can handle this just fine. When you select to make each grid item equal in height, you are given further options to set a background colour, a border, border radius, and padding in each of the grid items in the stack. Selecting to equalise the grid heights enables javascript.

FAQ

Installation and info.

Stacks Image 1666
Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

No known issues.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

© 2018 Doobox Software. Building premium Software Mac, C4D, & RapidWeaver™