AdaptiveGrid was inspired by the CuteGrids system, but doesn’t actually use any code from CuteGrids. We start with a regular divisional container in a page and nest up to 12 grid columns (boxes) inside. 12 is a number commonly associated with website grid systems, so it seemed logical to continue this trend. Each of these grid columns can have its width adjusted for smartphone, tablet, laptop and desktop screen sizes.

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

 
Recreating the responsive Stacks4Stacks.com website footer using AdaptiveGrid:
Click here to reveal the settings used for the footer example shown above
Four AdaptiveGrid columns were activated in the stack settings. Each of the grid columns was configured, comprising of the following settings:
Column 1
100% wide / 1em padding @ phone
100% wide / 1em padding @ tablet
50% wide / 1em padding @ laptop
50% wide / 1em padding @ desktop
Column 2
50% wide / 1em padding @phone
33.33% wide / 1em padding @tablet
16.50% wide / 1em padding @ laptop
16.50% wide / 1em padding @ desktop
Column 3
50% wide / 1em padding @phone
33.33% wide / 1em padding @tablet
16.50% wide / 1em padding @ laptop
16.50% wide / 1em padding @ desktop
Column 4
0.00% wide / 1em padding @phone
33.33% wide / 1em padding @tablet
16.50% wide / 1em padding @ laptop
16.50% wide / 1em padding @ desktop
 
Column 4 also had the no-phone and display-tablet custom classes applied. This sets column 4 to be hidden on smartphone devices, but display on tablet and greater screen sizes upwards. The mobile-first methodology means that rules will take effect on the first breakpoint, and then on all subsequent breakpoints up to desktop. Therefore it is necessary to stipulate when a column should be hidden and when it should get shown again.

Oh yes, and as you can see from this info box, you can use AdaptiveGrid stacks inside Toggle stacks too! ;-)

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
Now you can write some CSS code to perform one all more tasks against any grid columns with this custom class applied. Custom CSS code can either go in the RapidWeaver Page Inspector (within the custom CSS box) or you can open the theme contents and place it in the custom.css file (which will apply the code automatically to all pages using the theme):

.PhoneNoLeftPadding .ColumnInner {
padding-left: none;
}

@media screen and (min-width: 768px) {
.PhoneNoLeftPadding .ColumnInner {
padding-left: 3%;
}
}
'ColumnInner' targets the inner-most container of each grid column. Because we're mobile-first now, we specify styling for mobile devices first, and then adapt the code for wider screens. So in the example CSS code above, we start with the left-padding set to 0px. To stop this code getting inherited by wider screens, a new 'breakpoint' of 768px is introduced and then some new styling gets applied. When you preview the AdaptiveGrid stack, you should find that this particular column has no left padding applied to itself on screen sizes up to 768px wide. Then on screen sizes 768px and wider, 3% of left padding will get applied.

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.

Responsive video

A checkbox option in AdaptiveGrid will load the opensource FitVids plugin, to scale Youtube and Vimeo content responsively. This does not need to be enabled if you are using any of our audio of video stacks in AdaptiveGrid, because our video stacks are already responsive.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.