RTL Support about design-blocks HOT 2 CLOSED

Although I'm seeing some snippets that are a bit confusing to me if someone could explain :)

In this example both left and right text aligns are called.

According to bootstrap

.text-left {
  text-align: left !important;
}

@media (min-width: 768px) {
...
  .text-md-right {
    text-align: right !important;
  }
...
}

So in screens larger than 768 pixels wide they overlap and given both are being attributed as important it puts lessens the performance while the engine tries to render both and assign priorities.

I'm sorry I'm sure I see how this lines up? :) Thanks!

from design-blocks.

Although using start and end for the text-align CSS property seems like a good idea for RTL, the browser support for these keyword values is not so good. We believe it is more important to have a product that works the same cross-browser than to have a product that works only in some browsers.

Bootstrap classes used for alignment don't have multiple names for the same purpose. They do indeed set the same CSS property, but for different breakpoints. When designing a responsive website, having it look good on mobile is at least as important as how it looks on desktop. What looks okay when aligned to the right on a desktop device may not look okay on mobile. For this reason the classes text-left text-md-right are being used.

It's true that between some breakpoints the rules overlap, which is not ideal, especially for performance, but this is why Bootstrap and the Froala Design Blocks are built mobile first. Since mobile devices are smaller and have lower performance than a desktop, the overlap will happen on the device which is more likely to have more resources.

Froala Design Blocks is currently using Bootstrap and it is best to keep it the way it is, without ditching and replacing basic rules from the project.

from design-blocks.