First time poster, long time podcast listener…
I’m currently putting together a simple responsive CSS framework for myself, after seeing too many that were just over complicated for a good “starter” platform.
I have this up on Github for anyone to view/use/do as you will: https://github.com/deeve007/responsive-grid-system
A benefit of this one that many don’t do is enable many different widths and number of columns across a row, even if your column items then cascade onto new rows.
At the moment I have two different methods I am looking into, and could use some opinions/tips/criticisms of either of them to help me identify which would be the best one to use going forward.
example.html (can be viewed online here: http://zavahost.com/responsive/example.html) uses a more common “float” method.
The only issue arises if a column is of a different height, and then perhaps a column that should on the next row doesn’t clear properly.
You can see that issue in this example: http://zavahost.com/responsive/example-broken.html
So trying to address this, I thought I’d look at using “inline-block” instead of float, and came up with this solution: http://zavahost.com/responsive/example-block.html
As you can see, even with the very tall column, the next row still breaks clearly below this one.
I’ve tested across a few different browsers and it seems to work just as well as the float version, but solving this issue. Wondering if anyone else can see any issues, or maybe has some other suggestions/ideas?
For the same reason you mention (elements wrapping to next row nicely even when they are unequal heights) I’m using inline-blocks as my main layout tool too. It avoids the need of needing row wrappers so the markup stays clean as well. The only issue I can see might be the way you eliminate the space between columns, will that work with any font or do you need to tweak the number?
Remember to help out our older IE friends by adding:
…just below the inline-block declaration. http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
> And I will have to do some more testing about the whole “row” div thing, as you say for some layouts it wouldn’t be necessary at all.
I would even say for most layouts it wouldn’t be necessary. You can set the negative letter-spacing on any parent (and reset it back to normal on any sibling).
I don’t know about typography but something that generates some nice vertical rhythm and typographic scale would be nice, not much more than that. Maybe some default optimizations like `text-rendering: optimizeLegibility;` and `-webkit-font-smoothing: antialiased;`.
You could check out the grid code I’m using for [Cascade Framework](http://cascade-framework.com/ “Cascade Framework”).
It supports two techniques :
+ [Semantic grid](http://cascade-framework.com/grid.html “Semantic grid”)
+ [Presentational grid](http://http://cascade-framework.com/grid-presentational.html “Presentational grid”)
For responsive behavior, the framework supports both fluid layouts and a fixed layout with breakpoints.
I’m new to this forum. I apologize if my post doesn’t adhere to any written or unwritten forum rule.
Anyway, the OP asked for “opinions/tips/criticisms” on his grid structure. As a response, I gave him examples of how I did it in my framework, which can be downloaded and freely modified (MIT license). Sounds very much on topic to me, and it should be able to help him with his project.
Also, I didn’t feel like creating a separate thread to advertise my framework. Still, as you suggested it, I created [this thread](http://css-tricks.com/forums/discussion/24391/new-css-responsive-framework-i039m-working-on#Item_18“).
You must be logged in to reply to this topic.