[refs #52] Add order utility

[florianbouvot]

Hi @adamwathan,

Following flexbox split, I propose to think about adding order utility (issue #52).

Best regards, Florian.

[florianbouvot]

I want help and explanations, I don't understand error when I run npm run style

/tailwindcss/src/plugins/order.js
  10:13  error  Replace `'order'` with `order`  prettier/prettier

[adamwathan]

Hey @florianbouvot! It's saying you don't need quotes around the order key. You can fix it automatically by running npm run style --fix.

Will need to update the text fixtures in __tests__/fixtures/tailwind-output.css and __tests__/fixtures/tailwind-output-important.css respectively as well, but I don't mind doing that myself if needed.

Going to keep this open for now as I want to think through the default values a bit, thanks for the contribution though!

[hacknug]

@adamwathan anything we can do to help get this merged in?

[adamwathan]

Not focused on new features right now, so just not prioritizing stuff like this until 1.1 👍🏻

[adamwathan]

We can add this for 1.0 I think, just trying to think on the values that make sense.

Maybe these to match the available default precentage widths?

order: {
  first: '-1',
  last: '999',
  none: '0',
  '1': '1',
  '2': '2',
  '3': '3',
  '4': '4',
  '5': '5',
  '6': '6',
  '7': '7',
  '8': '8',
  '9': '9',
  '10': '10',
  '11': '11',
  '12': '12',
},

[benface]

Haha did you need order utilities on a project? ;P Yeah I think those values are good! At least the first four are really useful, and then 2-12 would be useful if you want to have a fully custom and explicit order for 12 columns when they collapse.

[adamwathan]

Haha still haven't needed them honestly but I know they are useful 👍

[hacknug]

Imho both first and last should share the same absolute value.

Also not sure .order-[1–12] are needed by default. From my experience 90% of the time you'll want to bring something either to the start or to the end.

For the other 10% of cases, having .order-[-50–50] (à la zIndex) would be more useful, allowing you to bring more than one element to the start while saving you from changing the order of the rest. In this case I'd say this is probably something that users can add to their config files and we don't need by default (if we still care about filesize and bloat in the default config).

[florianbouvot]

I totally agree with @hacknug.

[adamwathan]

For the other 10% of cases, having .order-[-50–50] (à la zIndex) would be more useful, allowing you to bring more than one element to the start while saving you from changing the order of the rest.

@hacknug Yeah interesting point, I agree the 1-12 stuff is not as useful as it sounds, mostly because of the fact that you have to add an order to every element for them to really do anything.

A bit conflicted because Bootstrap has 1-12 and I think it's not unreasonable to include them, and even though having multiple negative values and multiple positive values designed in a way that's completely disconnected from any sort of "grid" probably saves you a little bit of effort, it is a bit confusing to wrap your head around at the beginning. I had to think about it for a few minutes to even understand what you were proposing or why it was useful, haha...

At the same time it's also confusing when you try to apply order-3 and that item doesn't automatically become the third item, so maybe that's a completely broken abstraction already.

What's the complete scale you think makes the most sense?

[hacknug]

I'd personally go with a combo of what @florianbouvot, @benface and I proposed on #52:

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

Went with 9999 because of .rounded-full, and none because this is what's in core right now (initial would be just as good– resetting vs setting).

As I said this covers almost every scenario where I've had to use order.

---

At the same time it's also confusing when you try to apply order-3 and that item doesn't automatically become the third item, so maybe that's a completely broken abstraction already.

Agree this might be confusing the first time you use it, but once you understand the default value is order: 0, it kinda makes sense to simply move what you need and leave the rest as is.

The alternative would be setting order for every flex/grid children which is simply a bad idea imho. Consider you have more than 12 items, then you'd have to add new values to your config file just to keep everything in order.

You'd end up with more order values than you ever needed which translates into a bigger CSS bundle that's non-purgeable.

---

Just like you've said no to some extra defaults or new features in the past, I think we can simply ship those 3 classes by default and reconsider in case someone can prove there's a use case for that.

I'm not opposed to having them, I just find them unnecessary and counter-intuitive because of what you already mentioned. In case we want to ship more than those 3 classes, I'd go with a 50-50 positive/negative split. In that case we'd either have 12+12+3 classes or completely abandon the 12-column Bootstrap thing.

[benface]

I agree with everything @hacknug said. 👍

[florianbouvot]

@adamwathan do you accept to change the values before v1.0 ?

[adamwathan]

I think I'm going to change first and last to both use 9999 but I'll probably keep the 12 values. Without something beyond first/last, having support for these utilities doesn't feel any more powerful than just using flex-direction utilities to reverse things.

[florianbouvot]

@adamwathan flex-direction only reverse order base on initial order (so first and last add some power).

[hacknug]

It also changes the order of the whole thing™ instead of just one of those elements.