grid system feedback

[__]

I’m building a grid system, mainly for my own work.

This is attribute (not class)-based for two reasons: for consistency with the rest of the project that it is a part of, and also because I am also building scripts that will hook into the grid system.

Right now the most useful feedback will be about browser consistency —this demo isn’t meant to look nice or show the grid’s full potential. That’ll come later.

(But I’ll be happy with feedback/suggestions on any subject.)

Thanks!

[shaneisme]

I actually like it. It’s very simple, short and has some nice features as-is.

I looked at it on a Windows machine with Chrome (latest), FF (latest) and IE10 and saw no differences.

I personally haven’t messed with table-cell grids much. I wonder, does the browser take over rendering to break your widths in certain edge-cases like it would a standard table if the content wouldn’t fit?

[__]

Yes, actually, it works very much like <table>s do. In theory, it should work exactly how tables do (hence the high hopes for cross-browser support).

IMO, this is both its strongest and weakest point. Very flexible, very good support; but there’s a lot of people who don’t know the minutia of how tables actually work. But it’s mainly for me, so I don’t worry. The “safe” route is to always use [at-grid] and [at-row] wrappers if you’re not sure about something.

Another (prettier) example. The “sticky footer” solution is actually what inspired this.

[shaneisme]

Yeah, that’s a nice way of doing the sticky footer thing…

[__]

Anyone have IE 9?

 
Or Safari/some other browser(s) on a Mac? or mobile thingies?

[shaneisme]

I can check Mac when I get home…

Are you planning to implement break points?

[__]

Yes. To start out, the grid and rows will be block (or they might work as-is; need to do testing on this), and columns will be inline-block. The display:table styles will only apply on larger screens.

Also debating if there should be a “middle” size where column widths are all rounded up to “half” or “whole.” Or I could leave the sizing as-is and add a minimum width for mid-size screens, and block for small screens.

[chrisburton]

I am not particularly fluent with using grid systems but the only background-color I’m getting is purple (blue?) on latest-Chrome/Mac.

I definitely like this sticky footer thing you made! I might have to steal the damn thing.

Update: Yeah, there seems to be something weird going on in Chrome with the margins. Safari looks much better.

[__]

the only background-color I’m getting is purple (blue?)

Well, the whole color-coding idea didn’t work out that great, since the columns/rows/grid all stack on top of each other and you’ll only ever see the “top” (column) color. I just wanted to try to give some concept of where the elements laid out. But you can do better by looking at the dev tools.

I definitely like this sticky footer thing you made! I might have to steal the damn thing.

Thanks, but the original idea isn’t mine. Caught it from somewhere a few years ago. Here’s an article (though this is not where I originally found it).

there seems to be something weird going on in Chrome with the margins. Safari looks much better.

The first pen or the second? and what version/OS?
They both look consistent to me (Chrome 35/Linux).

[chrisburton]

The first pen or the second? and what version/OS?
They both look consistent to me (Chrome 35/Linux).

Sorry. I don’t know what version of Chrome but the OS (will check later —on my iPhone) is Yosemite (public beta). I was talking about the first (grid system).

[__]

screenshot?

[chrisburton]

iPhone screenshot or Chrome?

[__]

whichever look odd. both, I guess. I’d be interested in seeing it.

[__]

found it.

[chrisburton]

I decided to give you screenshots of everything.

Browser: Chrome – Version 37.0.2062.120
OS: OS X Yosemite Beta 10.10
Screenshot: http://cl.ly/XZDk

Browser: Safari – Version 8.0 (10600.1.8)
OS: OS X Yosemite Beta 10.10
Screenshot: http://cl.ly/XYvk

Browser: Mobile Safari (can’t detect the version)
OS: iOS 7.1.2 (11D257) — Not sure if CodePen changes this
Screenshot: http://cl.ly/XYZF (best I could do)

[Author]

Posts