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.
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
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.
Header
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
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.
Header
Lorem ipsum dolor sit amet, sapien platea.
Header
Lorem ipsum.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc.
Header
Lorem ipsum dolor sit amet, sapien platea morbi.
Header
Lorem ipsum dolor sit amet,
Header
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.
This is the margin between each of the cells in the grid. Independent of its vertical counterpart.
This is the margin between each of the cells in the grid. Independent of its horizontal counterpart.
Vertically aligns any uneven cell content on a row by row basis to either the top, middle or bottom of each row.
The number of columns to display at or above the iPad landscape size.
The number of columns to display at or below this device size.
The number of columns to display at or below this device size.
The number of columns to display at or below this device size.
By default the breakpoints for each device type are set to their real world counterparts. You can override these sizes by selecting this option.
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.
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.
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.
This stack is supported in all modern browsers. Any exception to this rule will be listed below.
Safari
Chrome
Firefox
Explorer
There are no known compatibility issues with this stack.
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.
Get Social
Quick Links
Company
Resources
© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™