Quality stacks to empower your creativity

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

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:

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

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 classesno-phone The column will be hidden from view on screen sizes equal to or greater than smartphone devicesdisplay-phone The column will be shown on screen sizes equal-to and greater-than smartphone devicesno-tablet The column will be hidden from view on screen sizes equal to or greater than tablet devicesdisplay-tablet The column will be shown on screen sizes equal-to and greater-than tablet devicesno-laptop The column will be hidden from view on screen sizes equal to or greater than laptop devicesdisplay-laptop The column will be shown on screen sizes equal-to and greater-than laptop devicesno-desktop The column will be hidden from view on screen sizes equal to or greater than desktop devicesdisplay-desktop The column will be shown on screen sizes equal-to and greater-than desktop devicesno-print The column will not show on printouts or PDF'sno-screen The column will be hidden on screen and will only print

Setting up your own custom classesIf 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):

'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

Pocket

Одноклассники

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!

We use cookies and other services to give you the best possible experience on our website. If you continue without changing settings, we'll assume you are happy with this.

AdaptiveGrid

There are already lots of responsive grid and column stacks available for RapidWeaver, so at this point in time you’re most likely questioning the purpose of yet another! AdaptiveGrid is a free alternative to the others available. It was built mostly for use in ThemeFlood themes, in page elements like horizontal containers, block sidebars, FreeStyle banners and fixed footers, but has proven to be useable elsewhere too. AdaptiveGrid is extremely flexible and massively customisable. It also fixes a few annoying flaws to be found in some other responsive layout stacks.
Free Download