peterramsing/lost

Add option to enable both RTL and LTR styles in one stylesheet

Open

#360 opened on Mar 6, 2017

View on GitHub
 (8 comments) (0 reactions) (0 assignees)JavaScript (4,506 stars) (177 forks)batch import
component: corehelp wantedneeds: Workstatus: Backlogtype: Enhancement

Description

Hey, first of all thank you for you work, I used lost grid in several projects and it worked great!

Is this a feature request or a bug report? Feature request.

What is the current behavior? With the current lost grid version (8), it's only possible to use either ltr or rtl styles. To mix them in the same project, you need to define two stylesheets and prefix the related classes "manually" with e.g. [dir="rtl"] (see below).

What is the behavior that you expect? Be able to use rtl and ltr in the same stylesheet.

What's the motivation or use-case behind changing the behavior? I am currently working on a global website, including left-to-right and right-to-left pages which should both rely on the same codebase/stylesheet.

Anything else? I could think of a new value for the direction global option, e.g. @lost --beta-direction both; which would render both ltr and rtl styles, but adding the dir attribute as a selector, e.g. [dir="rtl"] .my-grid-col:nth-child(1n) { margin-left: 40px; margin-right: 0; } [dir="ltr"] .my-grid-col:nth-child(1n) { margin-left: 0; margin-right: 40px; }

Related: https://github.com/peterramsing/lost/issues/351 & https://github.com/peterramsing/lost/pull/352

What do you think?

Contributor guide

Tech stack
javascriptcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
3-5 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
CSS direction understandingPostCSS plugin basicsLostGrid usage
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the current direction handling in the LostGrid PostCSS plugin. The issue suggests adding a 'both' option for the direction global variable that would output both LTR and RTL styles with appropriate [dir] attribute selectors. Look at the plugin's source code, particularly how direction is applied to grid properties like margin left/right. Consider implementing a new mode that generates duplicated rules with prefix selectors [dir="ltr"] and [dir="rtl"] as described in the issue.