Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other grid system feedback

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • #183175
    __
    Participant

    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!

    #183179
    shaneisme
    Participant

    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?

    #183183
    __
    Participant

    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.

    #183185
    shaneisme
    Participant

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

    #183187
    __
    Participant

    Anyone have IE 9?

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

    #183189
    shaneisme
    Participant

    I can check Mac when I get home…

    Are you planning to implement break points?

    #183190
    __
    Participant

    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.

    #183191
    chrisburton
    Participant

    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.

    #183194
    __
    Participant

    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).

    #183196
    chrisburton
    Participant

    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).

    #183198
    __
    Participant

    screenshot?

    #183199
    chrisburton
    Participant

    iPhone screenshot or Chrome?

    #183202
    __
    Participant

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

    #183205
    __
    Participant
    #183206
    chrisburton
    Participant

    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)

Viewing 15 posts - 1 through 15 (of 33 total)
  • The forum ‘Other’ is closed to new topics and replies.