Putting http://adapt.960.gs into Contao as a module

Putting http://adapt.960.gs into Contao as a module, giving an alternative approach to @media queries and implementing the ability to render pages based on the 960.gs grid.

To do so, ck_adapt implements a fully featured set of CSS-files for various screen resolutions, i.e. for mobile devices, different desktop-resolutions up to 2560 px.

Installation

Load ck_adapt either from Contao extension repository or get latest revision from https://github.com/kikmedia/ck_adapt as a zip-file. In this case, simply put the files into your Contao structure (i.e. @ /plugins and /system/modules folder).

There will be no need to make a database update.

Usage

a. Integrating into page layout

Afterwards, add the provided 'moo_adapt' template to your page layout (Contao will select the appropriate version depending of HTML or XHTML selected).

b. Putting .classes into elements

As using every other grid system, you have to put classes into your pages, articles or content elements to get them floating in your grid.

Don't expect a tutorial on this here. Probably you will have a look at http://960.gs

Now, ck_adapt will help to load different grid-based CSS-files depending on your screen resolution without the hazzle of using @media-queries. You easily will be able to create a layout which will adapt to nearly every screen resolution.

At the moment, ck_adapt supports the following screen resolutions / CSS-Files: 
'0px to 760px = mobile.css',
'760px to 980px = 720.css',
'980px to 1280px = 960.css',
'1280px to 1600px = 1200.css',
'1600px to 1940px = 1560.css',
'1940px to 2540px = 1920.css',
'2540px = 2520.css'

The adapt.js script makes it possible to respond not only on different viewport sizes but also on changes made, for example when resizing the browser window. Let's say, if a site loads, the viewport is @ 1100 Px - so the file 1200.css is loaded. If a user resizes the window to 800 px, the 720.css will be loaded on the fly, overwriting the width of the grid elements and triggering a re-rendering of the site.

c. Other magic

Ck_adapt will extend #wrapper with class="container_12", so there will be no need to edit fe_page-templates.

d. Drawbacks

As every JS-based plugin, ck_adapt will not work without javascript activated. On the other side, if JS is deactivated it does nothing at all, and so no mischief is managed.