- This topic is empty.
-
AuthorPosts
-
September 15, 2014 at 4:13 pm #183175
__
ParticipantI’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!
September 15, 2014 at 4:54 pm #183179shaneisme
ParticipantI 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?
September 15, 2014 at 5:18 pm #183183__
ParticipantYes, 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.
September 15, 2014 at 5:21 pm #183185shaneisme
ParticipantYeah, that’s a nice way of doing the sticky footer thing…
September 15, 2014 at 5:29 pm #183187__
ParticipantAnyone have IE 9?
Or Safari/some other browser(s) on a Mac? or mobile thingies?September 15, 2014 at 5:33 pm #183189shaneisme
ParticipantI can check Mac when I get home…
Are you planning to implement break points?
September 15, 2014 at 5:40 pm #183190__
ParticipantYes. 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.September 15, 2014 at 6:04 pm #183191chrisburton
ParticipantI 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.
September 15, 2014 at 6:16 pm #183194__
Participantthe 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).September 15, 2014 at 7:29 pm #183196chrisburton
ParticipantThe 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).
September 15, 2014 at 7:46 pm #183198__
Participantscreenshot?
September 15, 2014 at 7:49 pm #183199chrisburton
ParticipantiPhone screenshot or Chrome?
September 15, 2014 at 8:15 pm #183202__
Participantwhichever look odd. both, I guess. I’d be interested in seeing it.
September 15, 2014 at 8:43 pm #183205September 15, 2014 at 8:51 pm #183206chrisburton
ParticipantI 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/XZDkBrowser: Safari – Version 8.0 (10600.1.8)
OS: OS X Yosemite Beta 10.10
Screenshot: http://cl.ly/XYvkBrowser: 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) -
AuthorPosts
- The forum ‘Other’ is closed to new topics and replies.