Skip to content

A set of LESS mixins that allows creating bi-directional styling without code duplication

License

Notifications You must be signed in to change notification settings

danielkatz/less-bidi

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 

Repository files navigation

LESS-bidi - Direction agnostic stylesheets

LESS-bidi is a set of LESS mixins that allows creating bi-directional styling without significant code duplication.
By using LESS-bidi mixins, it’s possible to create direction agnostic CSS stylesheets, which are faster to write and much easier to maintain. Moreover, the naming convention used throughout the mixins makes it easier to comprehend by keeping the naming of properties as close as possible to the original CSS property names.

Documentation

Paradigm shift

Direction agnostic styling is made possible by using a new approach of referring to both sides of a document as the “start” and “end” of the text as opposed to “left” or “right” of the document. This approach is similar to what is done in flex-box specification (although LESS-bidi does not use or depend on flex-box). The interpretation of the terms start and end depends on the value of the variable @bidi. When @bidi: ltr; than start compiles to left, and end compiles to right, and when @bidi: rtl; it will be exactly the opposite. For example:

@bidi: ltr;
.bidi-text-align(start); // output: text-align: left;

and:

@bidi: rtl;
.bidi-text-align(start); // output: text-align: right;

Basic usage demo

LESS-bidi mixins evaluate to opposite directioned styles depending on the value of @bidi. Thus, it enables you to write your styles once and have them evaluated under two scopes: one for ltr and one for rtl.

LESS-bidi CSS
@import "bidi";

.ltr { .style(ltr); } .rtl { .style(rtl); } .style(@bidi) { .bidi-direction();

h1 {
    .bidi-margin-start(20px);
	margin-bottom: 10px;
}
.two-col article {
    .bidi-float(start);
}
.two-col nav {
    .bidi-float(end);
}

}

.ltr {
  direction: ltr;
}
.ltr h1 {
  margin-left: 20px;
  margin-bottom: 10px;
}
.ltr .two-col article {
  float: left;
}
.ltr .two-col nav {
  float: right;
}
.rtl {
  direction: rtl;
}
.rtl h1 {
  margin-right: 20px;
  margin-bottom: 10px;
}
.rtl .two-col article {
  float: right;
}
.rtl .two-col nav {
  float: left;
}

About

A set of LESS mixins that allows creating bi-directional styling without code duplication

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages