RTL Support

[bourhaouta]

Hey,
I really enjoy using your grid system..
But can we have a RTL support with 8 release?
I think it's all about margin-left instead of margin-right and some stuff
Cheers

[corysimmons]

I think this can be done with https://github.com/MohammadYounes/rtlcss can't it?

[bourhaouta]

Yes, but I thought it'll be cool if you can include it within your grid system

[corysimmons]

I'll defer that to @peterramsing

tbh, I'm not sure what the best solution is. Adding rtlcss as a dependency wouldn't be too hard, and adheres to the Unix philosophy of modularity. But there's enough configuring build tools in this world so if we can make it nicer, it might be nice.

Heck, Lost could just rely on rtlcss and expose the same options within Lost, but that starts to feel a bit dirty.

[bourhaouta]

So, I tried a few things.
First I added a new rule called direction.

if (rule.params[0] === 'direction') {
   settings.direction = rule.params[1];
}

For the lost-center I added a direction:

if (lostCenterDirection === 'rtl') {
  decl.cloneBefore({
    prop: 'direction',
    value: 'rtl'
  });
}

And then in the lost-column, I did this to replace right with left:

var lostCenterDirection = settings.direction;
var lostColumnDirection;
if (lostCenterDirection === 'rtl') {
  lostColumnDirection = {
    right: 'left',
    left: 'right'
  };
} else {
  lostColumnDirection = {
    right: 'right',
    left: 'left'
  };
}
// so I can use it like this
newBlock(
  decl,
  ':last-child',
  ['float', 'clear', 'margin-' + lostColumnDirection.right, 'width'],
  ['none', 'none', 0, 'auto']
);

The result:

And yeah, I know the code looks ugly haha but it'll be cool if you can do something about it, instead of using rtlcss which somehow can damage my CSS.

[peterramsing]

Thanks for spiking on this! I think it's something worth taking a look into for sure.

Do you think it should also affect text alignment or should that be done by the users manually?

[bourhaouta]

Thanks for your consideration.
For me, I think it's better done by the users manually.

Cheers.

[peterramsing]

@bourhaouta I think keeping text-alignment on the user is correct, too. I just wanted your insights.

I'll get some time on this later this week hopefully.