CSS responsive grid

Hi,

I recently build my version of a CSS responsive grid: Metal Responsive CSS Grid


I'm currently building websites with it so it should be pretty stable.

Feedback appreciated even if they are spelling mistakes.

Thank you [ed. note: cipa last edited this post 14 years, 7 months ago.]

Helo cipa,

Thanks for this! It looks really solid. I've used the 1140px grid system quite a bit and like it alot. What would you say sets your solution apart from the 1140 system?

I honestly don't know which one is better(probably 1140px) but all I can say is that as far as I know:

- mine is 0.2 not 2.0
- you don't need a last class for the last row
- metal doesn't work in ie7 because of the nth-child and media-query support for css. Hopefully I will release a js for this or maybe responsive.js can help(suggestions welcomed), 1140 uses css3-mediaqueries.js <- I'll look into this
- I have integrated support for multiple screen resolutions(1140 has only 1023px and 767px)
- by default, my solution doesn't go from 4 columns to 1 column but it goes from 4 to 2 to 1. 1140 can do the same if you use the correct media queries.
- I have support for what I call morphable columns, meaning: a 4,8 grid will morph by default to a 5,7 grid on a smaller resolution then to a 6,6 grid and in the end you will have 2 rows not 2 cols. This is more like a concept thing, suggestions welcomed.
- support for 5 content columns

In the near future I will work on some helper classes to hide content not needed for small resolutions.

Disclaimer: I am not a expert in this. I recently got into responsive design and honestly all the grids I found were either to hard to understand or too complicated. So I looked around, saw how others are doing it and tried to implement my own solution for my own needs. At the beginning this was just a learning project but now I feel confident in using this on live websites.

Thank you for your interest
[ed. note: cipa last edited this post 14 years, 7 months ago.]

Thanks for the info, cipa! I'll definitely have to check it out for my next responsive site.

Any thoughts on releasing a modx revo-specific version with a base template?

That's the plan, Nick

But first I will release a grid addon that works with tables. Basically you could build responsive sites in Tiny MCE by using tables.
Any table build in TinyMCE, that doesn't have a class or id or has border 0, will be processed(basically I will add some classes) and when you see the table on smaller resolution it will resize and stack accordingly. This will be a js solution.

The second idea I have is to build a MODX plugin that will parse a table without border, class and id and transform it into div rows and cols. The plugin will automatically add grid classes to the newly created divs so they stack and resize accordingly. I already started working on this by introducing the "Grid in Grid" concept. Demo here
[ed. note: cipa last edited this post 14 years, 7 months ago.]

That sounds very intriguing. Looking forward to seeing this implemented!

Hi,

Just wanted to let you know that I released a plugin for MODX Evolution that enables you to transform tables in a div based grid.

Just make sure your table doesn't have a class, id or border defined and the plugin will take the first row of the table and make it a grid. Not sure adding support for multiples rows is necessary; You can always create 2 tables instead of 2 rows

demo here

see the table-grid-in-grid folder on git for more details. The plugin makes use of phpQuery

Cheers