-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[feature request] Content reordering #13
Comments
Yeah, I thought about this as a demo at one point. I do showcase content reordering in the "Holy Grail" example, but I guess I don't talk about it very much. I also don't end up needing to do this very often in real projects. The only time it's ever been useful for me is to easily get tab ordering to go to the content area before the navigation area, but I'm not sure if I could make a whole demo about that. Anyway, I'll think about it a bit more and update your here on what I decide. Let me know if you have any more thoughts. |
I had it in a specific case where I wanted to have the download buttons on the very top when you are on a phone and under the gallery when you have more space .. somehow I didn't get it to work .. so I thought maybe a specific demonstration would help :) |
@philipwalton - One thought: for the "Holy Grail", how would you get both (Rationale: it seems there is a de facto "standard" emerging that mobile views expect content first, nav at the bottom.) Thanks! |
@dajare since the content is already first in the source, the way to get it to appear first on mobile is to just remove all Also, can you point me to some examples of this emerging standard? It seems to me that primary navigation is still usually at the top. |
I should have styled my "Rationale: it seems there is..." more like: "Rationale: it _seems_ there is..."! But having said that, I think I might have picked up this idea from a tuts+ tutorial that referenced other articles, in particular, Luke Wroblewski (this recent video provides analysis and explanation). "Content first, nav second" features at various points in the Brad Frost article. It also seems to be implied in some of the navigation threads on UX.StackExchange (one example). This is highly impressionistic on my part, and perhaps I've got the wrong end of the stick (or screen, as the case may be). But that's what prompted my comment. Thanks (once again! you gave me some flex-related "sticky footer" tips on Twitter) for your help. |
Not really sure if this is the right use for it, but I recently had code like the following: <header>
<h1>Logo</h1>
<button>Foo</button>
<button>Bar</button>
</header> I used |
Quoting Phil Walton:
As it happens, not quite all order declarations. It seems Safari still doesn't play nice, so I needed to do it this way (showing commented-out bits for clarity): .HolyGrail-nav{
-webkit-box-ordinal-group:0;
-webkit-order:-1;
/* -moz-box-ordinal-group:0;
-ms-flex-order:-1;
order:-1 */
} And that did the trick. I get the "nav" column on the left in wide view, and at the bottom in "mobile" view. (In case anyone is interested.) |
I would love to see your solution for that :D
The text was updated successfully, but these errors were encountered: