• 0
Sign in to follow this  
Followers 0

DMS 2 Grid system in RTL


Question

Posted · Report post

Hey,

 

I have a multilingual site in both RTL and LTR.

On the RTL version, I'd like the grid to act accordingly (have margins and floats from the right instead of the left).

 

I tried but I couldn't get it to work without messing grid responsive breaking points.

 

How can I achieve this?

Remember that the grid responsive breaking points ONLY resets margin-left to 0 so that needs to be taken into consideration.

 

Thanks in advance,

-kedmyster

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted · Report post

Unfortunately, I can't.

 

I ended up doing the following(which worked btw),

I'd appreciate your thoughts:

 

For the dimensions of the grid, I edited the style.less of a child's theme and add this code:

// GRID
// --------------------------------------------------

@fluidGridColumnWidth:   7.49999999925%;
@fluidGridGutterWidth:    0.83333333325%;

// Default 1200px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         90px;
@gridGutterWidth:         10px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@gridRowSpace:            @baseLineHeight;

And for the RTL version for the grid, I used this code in the custom code section:

html[dir="rtl"] {
	.row > [class*="span"], .row-fluid > [class*="span"], .editor-row > [class*="span"], .row-no-response > [class*="span"] {
		float: right;
		margin-left: 0;
		margin-right: 0.83333333325%;
		margin-bottom: 21.7px;
	}
	.row.row-closed > [class*="span"], .row.row-set > [class*="span"], .row-fluid.row-closed > [class*="span"], .row-fluid.row-set > [class*="span"], .editor-row.row-closed > [class*="span"], .editor-row.row-set > [class*="span"], .row-no-response.row-closed > [class*="span"], .row-no-response.row-set > [class*="span"] {
		margin-left: 0;
		margin-right: 0;
	}
	.row > [class*="span"]:first-child, .row > section:first-of-type, .row .sortable-first, .row-fluid > [class*="span"]:first-child, .row-fluid > section:first-of-type, .row-fluid .sortable-first, .editor-row > [class*="span"]:first-child, .editor-row > section:first-of-type, .editor-row .sortable-first, .row-no-response > [class*="span"]:first-child, .row-no-response > section:first-of-type, .row-no-response .sortable-first {
		margin-left: 0;
		margin-right: 0;
		clear: both;
	}
	.row .offset12, .row-fluid .offset12, .editor-row .offset12, .row-no-response .offset12 {
		margin-left: 0;
		margin-right: 100.83333332325%;
	}
	.row .offset12.sortable-first, .row .offset12:first-child, .row-fluid .offset12.sortable-first, .row-fluid .offset12:first-child, .editor-row .offset12.sortable-first, .editor-row .offset12:first-child, .row-no-response .offset12.sortable-first, .row-no-response .offset12:first-child {
		margin-left: 0;
		margin-right: 99.99999999%;
	}
	.row .offset11, .row-fluid .offset11, .editor-row .offset11, .row-no-response .offset11 {
		margin-left: 0;
		margin-right: 92.49999999075%;
	}
	.row .offset11.sortable-first, .row .offset11:first-child, .row-fluid .offset11.sortable-first, .row-fluid .offset11:first-child, .editor-row .offset11.sortable-first, .editor-row .offset11:first-child, .row-no-response .offset11.sortable-first, .row-no-response .offset11:first-child {
		margin-left: 0;
		margin-right: 91.6666666575%;
	}
	.row .offset10, .row-fluid .offset10, .editor-row .offset10, .row-no-response .offset10 {
		margin-left: 0;
		margin-right: 84.16666665825%;
	}
	.row .offset10.sortable-first, .row .offset10:first-child, .row-fluid .offset10.sortable-first, .row-fluid .offset10:first-child, .editor-row .offset10.sortable-first, .editor-row .offset10:first-child, .row-no-response .offset10.sortable-first, .row-no-response .offset10:first-child {
		margin-left: 0;
		margin-right: 83.333333325%;
	}
	.row .offset9, .row-fluid .offset9, .editor-row .offset9, .row-no-response .offset9 {
		margin-left: 0;
		margin-right: 75.83333332575%;
	}
	.row .offset9.sortable-first, .row .offset9:first-child, .row-fluid .offset9.sortable-first, .row-fluid .offset9:first-child, .editor-row .offset9.sortable-first, .editor-row .offset9:first-child, .row-no-response .offset9.sortable-first, .row-no-response .offset9:first-child {
		margin-left: 0;
		margin-right: 74.9999999925%;
	}
	.row .offset8, .row-fluid .offset8, .editor-row .offset8, .row-no-response .offset8 {
		margin-left: 0;
		margin-right: 67.49999999325%;
	}
	.row .offset8.sortable-first, .row .offset8:first-child, .row-fluid .offset8.sortable-first, .row-fluid .offset8:first-child, .editor-row .offset8.sortable-first, .editor-row .offset8:first-child, .row-no-response .offset8.sortable-first, .row-no-response .offset8:first-child {
		margin-left: 0;
		margin-right: 66.66666666%;
	}
	.row .offset7, .row-fluid .offset7, .editor-row .offset7, .row-no-response .offset7 {
		margin-left: 0;
		margin-right: 59.16666666075%;
	}
	.row .offset7.sortable-first, .row .offset7:first-child, .row-fluid .offset7.sortable-first, .row-fluid .offset7:first-child, .editor-row .offset7.sortable-first, .editor-row .offset7:first-child, .row-no-response .offset7.sortable-first, .row-no-response .offset7:first-child {
		margin-left: 0;
		margin-right: 58.3333333275%;
	}
	.row .offset6, .row-fluid .offset6, .editor-row .offset6, .row-no-response .offset6 {
		margin-left: 0;
		margin-right: 50.83333332825%;
	}
	.row .offset6.sortable-first, .row .offset6:first-child, .row-fluid .offset6.sortable-first, .row-fluid .offset6:first-child, .editor-row .offset6.sortable-first, .editor-row .offset6:first-child, .row-no-response .offset6.sortable-first, .row-no-response .offset6:first-child {
		margin-left: 0;
		margin-right: 49.999999995%;
	}
	.row .offset5, .row-fluid .offset5, .editor-row .offset5, .row-no-response .offset5 {
		margin-left: 0;
		margin-right: 42.49999999575%;
	}
	.row .offset5.sortable-first, .row .offset5:first-child, .row-fluid .offset5.sortable-first, .row-fluid .offset5:first-child, .editor-row .offset5.sortable-first, .editor-row .offset5:first-child, .row-no-response .offset5.sortable-first, .row-no-response .offset5:first-child {
		margin-left: 0;
		margin-right: 41.6666666625%;
	}
	.row .offset4, .row-fluid .offset4, .editor-row .offset4, .row-no-response .offset4 {
		margin-left: 0;
		margin-right: 34.16666666325%;
	}
	.row .offset4.sortable-first, .row .offset4:first-child, .row-fluid .offset4.sortable-first, .row-fluid .offset4:first-child, .editor-row .offset4.sortable-first, .editor-row .offset4:first-child, .row-no-response .offset4.sortable-first, .row-no-response .offset4:first-child {
		margin-left: 0;
		margin-right: 33.33333333%;
	}
	.row .offset3, .row-fluid .offset3, .editor-row .offset3, .row-no-response .offset3 {
		margin-left: 0;
		margin-right: 25.83333333075%;
	}
	.row .offset3.sortable-first, .row .offset3:first-child, .row-fluid .offset3.sortable-first, .row-fluid .offset3:first-child, .editor-row .offset3.sortable-first, .editor-row .offset3:first-child, .row-no-response .offset3.sortable-first, .row-no-response .offset3:first-child {
		margin-left: 0;
		margin-right: 24.9999999975%;
	}
	.row .offset2, .row-fluid .offset2, .editor-row .offset2, .row-no-response .offset2 {
		margin-left: 0;
		margin-right: 17.49999999825%;
	}
	.row .offset2.sortable-first, .row .offset2:first-child, .row-fluid .offset2.sortable-first, .row-fluid .offset2:first-child, .editor-row .offset2.sortable-first, .editor-row .offset2:first-child, .row-no-response .offset2.sortable-first, .row-no-response .offset2:first-child {
		margin-left: 0;
		margin-right: 16.666666665%;
	}
	.row .offset1, .row-fluid .offset1, .editor-row .offset1, .row-no-response .offset1 {
		margin-left: 0;
		margin-right: 9.16666666575%;
	}
	.row .offset1.sortable-first, .row .offset1:first-child, .row-fluid .offset1.sortable-first, .row-fluid .offset1:first-child, .editor-row .offset1.sortable-first, .editor-row .offset1:first-child, .row-no-response .offset1.sortable-first, .row-no-response .offset1:first-child {
		margin-left: 0;
		margin-right: 8.3333333325%;
	}
	.row-fluid .thumbnails {
		margin-left: 0;
		margin-right: 0;
	}
	input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"], .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width:767px) {
	html[dir="rtl"] {
        .row-grid {
            width: 100%;
        }
		.row {
			margin-left: 0;
			margin-right: 0;
		}
		.row > [class*="span"], .row-grid > [class*="span"], .editor-row > [class*="span"], .row > [class*="offset"], .row-grid > [class*="offset"], .editor-row > [class*="offset"], .row.row-closed > [class*="span"] {
            float: none;
            display: block;
            width: auto;
			margin-left: 0;
			margin-right: 0;
		}
		.row > [class*="offset"]:first-child, .editor-row > [class*="offset"].sortable-first {
			margin-left: 0;
			margin-right: 0;
		}
	}
}

@media (min-width:768px) and (max-width:979px) {
	html[dir="rtl"] {
		input, textarea, .uneditable-input {
			margin-left: 0;
			margin-right: 0;
		}
	}
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI,

 

Can you provide a link to the site in question so we can take a closer look please.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for sharing.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0