CSS Framework with Media Queries – Columnal

Columnal is a CSS grid system with lot of features integrated from other grid systems. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.

Columnal makes responsive web design  easier. It is a 1140px wide grid, but since it is fluid, will respond to the width of most browsers.

If the browser gets thin enough, the site will change to a mobile-friendly layout. Try resizing this page to give it a try (Internet Explorer 6-8 will be a fixed width page).

Featues of Columnal

  • Built-in debugging CSS to show the structure of any pages being built
  • Sub-columns (columns within columns) for more layout options
  • Prefix and suffix for extra space within a column before or after content
  • Vertical spacing CSS classes
  • PDF of grid system for sketching out site before building
  • Wireframing templates
  • Columnal is in active development and you may run across bugs

s

Magic of the Media Query

Columnal supports mobile layout through the use of media queries.

Old and new, happy together

Columnal works the best on modern browsers, either desktop or mobile. Mobile support really includes newer smartphones.

Most older browsers will work, Internet Explorer 6 and 7 degrade to either a 12-column 984px or 960px wide version.

Check out the demo of Columnal.

Download Columnal

Tutorial for Columnal

Support for Internet Explorer 6 and 7

“Fixed pixel” css files

There are two fixed pixel dimensions to use for Internet Explorer 6 and 7 built into Columnal since version 0.8. “fixed-984px-ie.css” sets the page width to 984px, and “fixed-960px-ie.css” sets the page width to the popular 960px page width standard.

Full-width images in columns for IE6

Internet Explorer does not provide a great way to resize images. Since images in columns will be wider than the column (since images are meant to scale with the grid in most browsers) this needs to be addressed. The fix built into columnal requires a css be included to address shortcomings specific to the IE6 browser. For images, the two css files for this are “ie6-984px.css” or “ie6-960px.css”, these must be used in pair with the “fixed pixel” css files mentioned previously. Adding a class name of “.fullwidth” sets a width on the image equal to the width of the column it is in, fixing width problems in IE6, but the class name must be used.

Leave a Reply