Menu icon Foundation
RTL Block grid

How should I use the Block grid under right-to-left sites?
I have 5.2.1 version of foundation but the block grid do not have the proper margins.
See image attached.

Rtlfoundation

Rtlfoundationgrid

block gridrtl

How should I use the Block grid under right-to-left sites?
I have 5.2.1 version of foundation but the block grid do not have the proper margins.
See image attached.

Rtlfoundation

Rtlfoundationgrid
Alexander Assimidis over 5 years ago

Then you have to change some SCSS Files but why do u want to use the RTL?

Denes Dosa over 5 years ago

I have to use RTL, because it is a multilanguage site with some RTL languages and RTL requirements.
I thought that the elements works properly with RTL too in Foundation, I mean out of the box.

Alexander Assimidis over 5 years ago

Did u change ur SCSS FIle usually Foundation Supports both

$text-direction: rtl !default;
<html lang="ar" dir="rtl">


Denes Dosa over 5 years ago

Yes of course.
I tried 2 ways.
Once using SCSS which you mentioned, second is by downloading the normal CSS version from the download page with RTL option selected.
None of them works properly by default.
I think this feature (block-grid) is simply missing from Foundation RTL.

Alexander Assimidis over 5 years ago

I've tried it and it works fine so did u take the SCSS version and changed the things i mentioned?

Denes Dosa over 5 years ago

I can't really believe it, sorry.
block grid does not use $opposite-direction and $default-float variables

Thatswhy both rendered CSS is the same.

LTR
.small-block-grid-2 > li:nth-child(2n+1) {
padding-left: 0rem;
padding-right: 0.75rem; }
.small-block-grid-2 > li:nth-child(2n) {
padding-left: 0.75rem;
padding-right: 0rem; }

RTL
.small-block-grid-2 > li:nth-child(2n+1) {
padding-left: 0rem;
padding-right: 0.75rem; }
.small-block-grid-2 > li:nth-child(2n) {
padding-left: 0.75rem;
padding-right: 0rem; }

I think it should be like this in SCSS, to get it work properly >

.small-block-grid-2 > li:nth-child(2n+1) {
  padding-#{$default-float}: 0rem;
  padding-#{$opposite-direction}: 0.9375rem; }
.small-block-grid-2 > li:nth-child(2n) {
  padding-#{$default-float}: 0.9375rem;
  padding-#{$opposite-direction}: 0rem; }

Alexander Assimidis over 5 years ago

No u don't have to change anythin in your SCSS Foundation File only in the _settings.scss and it is working fine

Denes Dosa over 5 years ago

Can you please attach a screenshot with a 2 column block grid in small view with coloured backgrounds? Otherwise I cant really understand it.
Putting this into the settings is simply not enough
$text-direction: rtl !default;

Alexander Assimidis over 5 years ago

Yea sure i set up a new Project and make a screen.

Denes Dosa over 5 years ago

I thought you tried it.

Denes Dosa over 5 years ago

Hi Alexander!
Thank you for uploading these images.
I see that the borders are correct on your version, but in RTL mode the order of the items also should change. I mean that the first 'fds' item (top left) should be on the top right in RTL mode, as on my screenshot (ITEM1).
With Foundation column grid works properly that way.

i think your declaration ($text-direction: rtl !default;) get override somewhere later in SCSS, thatswhy you have correct margins.

Denes Dosa over 5 years ago

I added a new screenhot with normal grid.

Denes Dosa over 5 years ago

breaking news!
With the new version 5.2.2 works properly.
:)

Alexander Assimidis over 5 years ago

Great news for u :)