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.
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
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.
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.
- Columnal: a fluid CSS grid, that scales from widescreen laptops down to phones (columnal.com)
- Golden Grid System (goldengridsystem.com)
- 21 top tools for responsive web design | Feature | .net magazine (netmagazine.com)
- Breaking Dev: Responsible & Responsive (lukew.com)
- The Semantic Grid System: Page Layout For Tomorrow (coding.smashingmagazine.com)
- Techniques For Gracefully Degrading Media Queries (coding.smashingmagazine.com)
- The Semantic Grid System (semantic.gs)
- Responsive Web Design Techniques, Tools and Design Strategies (smashingmagazine.com)
- The Semantic Grid System (Less.js-Powered) (webresourcesdepot.com)