Flex-box "order" with responsive helpers

[HellPat]

Hey there,

I'm currently building my first site with Tailwind and it seems that i will finish it tomorrow
(which was really, really fast).

One kind of utilitis I was missing so far was order.
Especially with responsive helpers.

I like that quite a lot for reordering items on desktop or mobile for different viewports.

I'm quite sure you thought about that and you have a reason why you didn't add them. Would you mind sharing your thoughts? As far as I know it's safe to use (or am I wrong).

If they should be added, I suggest adding order from 1 to 5 including responsive utilities. (I don't care about a few more bytes here as we will later find a solution for the component based approach mentioned in #27 (comment)

[adamwathan]

We definitely want to add these and actually have an issue for them already in the old private Tailwind repo 😄

The tricky part is figuring out what values to provide, and whether or not they should be customizable.

For simple layouts right now though, you could use the flex wrapping helpers to reverse the direction of things if you are just swapping two columns 👍

[HellPat]

;-) The swapping is a bit more complicated in my case.
I just added my own utilities for the moment, but thought I open an issue and helo to improve the framework for others.

[thestepafter]

@psren I am looking to do something similar, would you mind sharing your utilities?

[HellPat]

@thestepafter i didn't to any magic or configurability atm.

just:

.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }

stupid and simple is not bad :-D

[thestepafter]

Thanks. I would recommend wrapping it in @responsive like this so you can use it for various breakpoints.

@responsive {
  .order-0 { order: 0; }
  .order-1 { order: 1; }
  .order-2 { order: 2; }
  .order-3 { order: 3; }
  .order-4 { order: 4; }
  .order-5 { order: 5; }
}

[HellPat]

Oh i did that but forgot to C&P it here.
@adamwathan thinks about make it configurable.

IMO nobody ever used order: 6; or higher.
So I'd just skip configurability, add 0-5 with responsive utils and we're good to go.
If somebody missed something there will be a ticket for that.

no premature optimization ;-)

6 lines of code + 5*6 because of the breakpoints is propably too much for a feature many site do not need. But this is not the problem of the order but instead of modularization mentioned in #27 (comment)
@adamwathan do you want to add an issue to that modularization approach so we can link issues to it and discuss it. Would also be nice for documentation so anybody can find the issue and that you're aware of it.

[HellPat]

@adamwathan if you share your opinion I'll be happy to provide a PR for that

[isaacminogue]

IMO, most of the time, when you use order, you either want to position something first, or last.

How I usually do that, is set either an order of -999 or positive 999 so regardless of how many children there are, they always appear either at the beginning or the end. This is good because it doesn't rely on orders being defined for any of the other children.

If you don't apply order to all children, they don't actually appear in the order you set them, eg. order: 1 isn't first. It's last, if it's the only one defined.

So something like this demo could potentially be an option?

https://codepen.io/isaacminogue/pen/yPJarL

[hacknug]

I believe adding 5 order utilities is way more than most people would ever need. I think 3 should be more than enough since most of the time you just need to bring something in front of everything else or place it at the end. Remember that by default all elements have an implicit value order: 0.

Maybe instead of 1, we could change the value to 10, 100 or something else in case some users would really need to sort way more elements than I've ever needed. And maybe also we should just ship with this three by default and allow everyone to customize this in case they need something different.

.order-first { order: -1 }
.order-initial { order: 0 }
.order-last { order: 1 }

[terryupton]

Perhaps an approach like the current z-index but with less options baked in. But allows a user to extend it to more values if required?

[adevade]

Since Tailwind 0.5 added the ability for plugins, I decided to make one for this issue!

Just pull it in through npm or GitHub.

The plugin adds classes for .order-# and .-order-# for negative numbers. You can choose which numbers you want it to generate, but it defaults to responsive variants for -1 through 5.

[florianbouvot]

I agree with @hacknug about 3 utilities but I prefer none to initial.

.order-first { order: -1; }
.order-last { order: 1; }
.order-none { order: 0; }

[benface]

initial makes more sense to me, as 0 is the initial value of order. I also think that values greater than 1/-1 would be better since they're called first and last, the same way rounded-full has a border-radius of 99999px "just in case".

@adamwathan Would you be interested in a PR that adds the following classes to the flexbox module?

.order-first { order: -99999 }
.order-last { order: 99999 }
.order-initial { order: 0 }

[florianbouvot]

@benface LGTM.
I was thinking about none because tailwindcss use a lot of -none in classname 😀.