bulma icon indicating copy to clipboard operation
bulma copied to clipboard

CSS logical properties for better RTL support

Open mohannadize opened this issue 3 years ago • 1 comments

This is a new feature with improvements and bug fixes.

Support for CSS logical properties to provide better support for RTL websites.

This PR also fixes the following issues

  • #2347 Better nomenclature for css modifiers with is-end instead of is-right
  • #3437 Fix Border radius on RTL
  • #3426 Fix loading spinner on input and select
  • #3419 Fix RTL is-right by providing is-end
  • #3409 Fix RTL is-right by providing is-end

Proposed solution

Use of CSS logical properties such as inset-inline-start instead of left read more here. This solves a lot of the issues with the RTL support and simplifies the development of The Bulma CSS framework.

Tradeoffs

  • A Learning curve for logical properties and the bundle size increased by 10 KB
  • Can I Use CSS Logical Properties shows 84.64% full support and 13.1% with partial support.

Testing Done

Yes, testing was done by testing the documentation after generating a new bundle for it that uses this version.

Changelog updated?

Yes

mohannadize avatar Feb 21 '22 04:02 mohannadize

@mohannadize awesome idea!

Could you check my PR please?

daniil4udo avatar Apr 27 '22 13:04 daniil4udo