If the total of columns equals 100% or less, then those columns will be displayed horizontally. If the total of the columns exceeds 100% in width, then they begin to tile vertically down the page. It’s a very simple approach, one with a proven track record to work; and is very well suited to modern, responsive websites.
Here are some other key features of AdaptiveGrid:
- Pure CSS and HTML. No complicated PHP, Flash or Javascript code is used; meaning that AdaptiveGrid is fast to load, lightweight and extremely durable
- In Stacks edit mode, grid columns are stacked vertically. This makes setup and editing of the grid system much easier and far less tedious on smaller screens
- Grid boxes respect the order in which they are setup and will not move-about or change order. This is a problem in some other column stacks, where the centre columns can sometimes switch sides (to the outside)
- Superb print and PDF output that beats many other competing stacks. There is no such thing as a paperless office; and lots of people still want to print your web pages and expect it to work
- Freedom to define what constitutes as a phone, tablet, laptop or desktop device. You can easily define the widths of these devices in the stack settings
- Mobile first; which basically means we deal with layout on mobile devices first and gradually work our way up towards desktop browsers. The net result is that mobile devices have to process less code. Mobile-first design is an emerging trend in website development and many experts are adopting it
- Percentages instead of pixels. This approach means that your completed AdaptiveGrid stacks scale fluidly at all times. There is no ugly ‘stepping’ effect as the page gets made narrower
- Option to apply custom classes on every column, to let you perform more advanced tasks and take more control over your grid layouts
- Embed AdaptiveGrid stacks directly into any theme ExtraContent container. This simplifies your workflow and means you can build pages with less stacks
- Every grid box can have padding applied in percentage or em units of measurement; and again you can control how much padding is applied on different screen sizes
- Options to apply responsive image and video scaling to content nested within AdaptiveGrid stacks
- Grid boxes do not need to be equal widths in this stack. Some grid boxes can be made wider than others, giving the ability to build flipbook, masonry-grid and magazine style page layouts.
All along we’ve focused on making AdaptiveGrid as simple as possible to use. Most people will have no difficulty in picking up and using AdaptiveGrid. With some trial and error, you’ll be able to build some beautifully responsive page layouts. Equally so, AdaptiveGrid includes many advanced features for expert RapidWeaver users to take advantage of, within increasingly complicated projects. AdaptiveGrid is built on the success of the free UsefulGrid stack.
Examples
Here are some examples of the AdaptiveGrid stack in use. You may wish to resize your web browser window to see how each example is displayed at different screen sizes. Rounded grey boxes are used to help illustrate where each grid column is rendered. We start with an AdaptiveGrid stack using the default settings:100% wide / 0% padding @ phone
50% wide / 2% padding @ tablet
50% wide / 3% padding @ laptop
25% wide / 4% padding @ desktop
100% wide / 0% padding @ phone
50% wide / 2% padding @ tablet
50% wide / 3% padding @ laptop
25% wide / 4% padding @ desktop
100% wide / 0% padding @ phone
50% wide / 2% padding @ tablet
50% wide / 3% padding @ laptop
25% wide / 4% padding @ desktop
100% wide / 0% padding @ phone
50% wide / 2% padding @ tablet
50% wide / 3% padding @ laptop
25% wide / 4% padding @ desktop
Odd numbers of grid boxes (like 5) can be a very tough job for some grid systems, but AdaptiveGrid handles it with ease:
100% wide / 0% padding @ phone
50% wide / 2% padding @ tablet
20% wide / 3% padding @ laptop
20% wide / 4% padding @ desktop
100% wide / 0% padding @ phone
50% wide / 2% padding @ tablet
20% wide / 3% padding @ laptop
20% wide / 4% padding @ desktop
100% wide / 0% padding @ phone
50% wide / 2% padding @ tablet
20% wide / 3% padding @ laptop
20% wide / 4% padding @ desktop
100% wide / 0% padding @ phone
50% wide / 2% padding @ tablet
20% wide / 3% padding @ laptop
20% wide / 4% padding @ desktop
100% wide / 0% padding @ phone
50% wide / 2% padding @ tablet
20% wide / 3% padding @ laptop
20% wide / 4% padding @ desktop
Variable width grid columns? No problem. For best results, set column padding to use EM units of measurement (for more equal spacing between grid columns):
100% wide / 0em padding @ phone
30% wide / 0.50em padding @ tablet
30% wide / 0.50em padding @ laptop
30% wide / 0.50em padding @ desktop
100% wide / 0em padding @ phone
40% wide / 0.50em padding @ tablet
40% wide / 0.50em padding @ laptop
40% wide / 0.50em padding @ desktop
100% wide / 0em padding @ phone
30% wide / 0.50em padding @ tablet
30% wide / 0.50em padding @ laptop
30% wide / 0.50em padding @ desktop
Lots of grid boxes together (in this example 8) of equal width:
50% wide / 1% padding @ phone
33.33% wide / 2% padding @ tablet
25% wide / 3% padding @ laptop
12.5% wide / 4% padding @ desktop
50% wide / 1% padding @ phone
33.33% wide / 2% padding @ tablet
25% wide / 3% padding @ laptop
12.5% wide / 4% padding @ desktop
50% wide / 1% padding @ phone
33.33% wide / 2% padding @ tablet
25% wide / 3% padding @ laptop
12.5% wide / 4% padding @ desktop
50% wide / 1% padding @ phone
33.33% wide / 2% padding @ tablet
25% wide / 3% padding @ laptop
12.5% wide / 4% padding @ desktop
50% wide / 1% padding @ phone
33.33% wide / 2% padding @ tablet
25% wide / 3% padding @ laptop
12.5% wide / 4% padding @ desktop
50% wide / 1% padding @ phone
33.33% wide / 2% padding @ tablet
25% wide / 3% padding @ laptop
12.5% wide / 4% padding @ desktop
50% wide / 1% padding @ phone
50% wide / 2% padding @ tablet
25% wide / 3% padding @ laptop
12.5% wide / 4% padding @ desktop
50% wide / 1% padding @ phone
50% wide / 2% padding @ tablet
25% wide / 3% padding @ laptop
12.5% wide / 4% padding @ desktop
Setup
AdaptiveGrid has been engineered to be setup as quickly and as easily as possible; while at the same time still providing a high-degree of customisability for web developers building complicated webpages or web apps in RapidWeaver. Follow these instructions to get started:- Once installed, drag and drop an AdaptiveGrid stack into your page
- Enable or disable columns in the stack settings on the right, to determine how many columns to display within your grid
- If necessary, change the breakpoint settings for phone, tablet, laptop and desktop
- Alter the padding settings if required. Padding is the spacing between the outside edge of the column and your column content
- Change any of the column width settings for mobile, tablet, laptop or desktop
- Place content within each grid column. AdaptiveGrid supports styled text, images, video, buttons and basic HTML code.
Compatibility
AdaptiveGrid is tested an confirmed to work with IE9, IE10, IE11 and the most recent versions of Safari, Chrome, Firefox and Opera web browsers. It's ideally suited to use in ThemeFlood RapidWeaver themes and will happy work alongside existing web development toolkits like Twitter Bootstrap. If a page featuring AdaptiveGrid stacks is printed or saved as a PDF, columns are automatically stacked vertically and span the full 100% width of the printout.Custom classes
The fundamental idea of custom classes is to allow you to 'hook' desired styling or behaviour onto individual grid columns. This holds particularly true if you want to 'do stuff' with columns at specific screen sizes. AdaptiveGrid has several custom classes built-in already. You can enter custom class names against columns, to target them with your own CSS code, if you prefer. Here is a list of custom classes available to use in AdaptiveGrid:Display classes
no-phone The column will be hidden from view on screen sizes equal to or greater than smartphone devices
display-phone The column will be shown on screen sizes equal-to and greater-than smartphone devices
no-tablet The column will be hidden from view on screen sizes equal to or greater than tablet devices
display-tablet The column will be shown on screen sizes equal-to and greater-than tablet devices
no-laptop The column will be hidden from view on screen sizes equal to or greater than laptop devices
display-laptop The column will be shown on screen sizes equal-to and greater-than laptop devices
no-desktop The column will be hidden from view on screen sizes equal to or greater than desktop devices
display-desktop The column will be shown on screen sizes equal-to and greater-than desktop devices
no-print The column will not show on printouts or PDF's
no-screen The column will be hidden on screen and will only print
Setting up your own custom classes
If you've got basic knowledge of CSS, then you can create you own custom rule-sets to perform many advanced tasks and build some incredibly integrate page layouts which display wonderfully well across a broad range of web browsers and different devices. The first thing to do is to enter a custom class name against a column. Or if you want the rule to be applied to multiple columns, then go ahead and apply the same class name to all columns you want to modify. The class selector must not contain spaces or special characters; using CamelCase formatting is a good idea. So you could go ahead and apply a new custom class name like this, in the Custom Class box of one or more grid columns:
PhoneNoLeftPadding.PhoneNoLeftPadding .ColumnInner {
padding-left: none;
}
@media screen and (min-width: 768px) {
.PhoneNoLeftPadding .ColumnInner {
padding-left: 3%;
}
}It may appear complicated at first, but it's a very precise and future-proof method of serving different sets of CSS to different screen sizes. As always, a quick Google search will reveal loads of information and detailed tutorials covering all aspects of CSS, mobile-first design and responsive web development.
