Stacks Image 6

Grid

Advanced responsive grid system layout.

Grid

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

Overview.

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.

Instant download.

Version : 1.0.6

Responsive : Yes

First released : 4/2/2016

Last Updated : 22/8/2016

Stacks V 3.0 or greater.

Live demo.

You can see live examples of the stack in action below.

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 646

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

Header

Stacks Image 804

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

Header

Stacks Image 796

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

Header

Stacks Image 788

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

Header

Stacks Image 780

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

Header

Stacks Image 772

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

Header

Stacks Image 764

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

Header

Stacks Image 756

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

Live 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 827

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

Header

Stacks Image 835

Lorem ipsum dolor sit amet, sapien platea.

Header

Stacks Image 843

Lorem ipsum.

Header

Stacks Image 851

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

Header

Stacks Image 859

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

Header

Stacks Image 867

Lorem ipsum dolor sit amet, sapien platea morbi.

Header

Stacks Image 875

Lorem ipsum dolor sit amet,

Header

Stacks Image 883

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

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
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.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

When you drop a Grid into the page it is pre-populated with 4 cells. You can add new cells by clicking the plus button. You can drag cells to a new location within the grid or delete individual cells at any time.

Stacks Image 634

You can literally place anything you like in each of the cells within the Grid. Here we just added some demo images.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

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

There are no known compatibility issues with this stack.

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.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589

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

Grid Stack