Brockma

Brockma is a Sass toolkit library that contain collections of Sass variables, functions and mixins which are based on the Start-End Direction approach; The library main goal is to help you simplify common use cases in client side developing, and support multi-language websites without adding any additional Sass configuration settings.

⚠ Please note, the library is still under beta, don't use it in production.

What the library solves?

Let's assume you need to publish a two language website, e.g English and Hebrew. As you probably know, if you would like to write a letter in English, you should start writing it from left to right. Now, if we take this letter and convert it to CSS, the direction property will be ltr and the text-align property will be left.
In terms of experts, the left value will be called "Start Direction", and the right value will be called "End Direction".
The "Direction" definition will always be the alignment of the text, so in English the start direction will be left, and the end direction will be right, but what about Semitic Languages? These languages’ start direction is right, and the end direction is left(!).

Unfortunately, most of the time, when developers need to publish a multi-language website that contains a Semitic Language, they use shortcuts by adding more CSS to their main.css file, and hoping they run-over all LTR settings correctly. This method is wrong, by adding more CSS to your main.css file, you are not just causing the code to be long and cumbersome, but you are making sure you will get tons of bugs in your design, in addition your users will experience poor user experience.

Brockma solves this problem by giving you a collection of Sass mixins that adjust their response content behave according to the Start-End Direction you will define.
The library taking out these right and left terms, and pronounce them as start and end. For example: If you would like adding a one side border to an element in your English site, the element will get a border-left property, but as we have already said, Brockma pronounce this differently, so instead of using the border-* property, you will using the Brockma mixin border-start(), i.e: @include border-start( 1px solid #000 );, and the output will be border-left: 1px solid #000;.

With this Brockma technique you can create multiple CSS files and associate each file for a specific direction.

E.G

SASS files:

_index.scss

.card {
  // @include border-start( 1px solid #000 ); // node-sass
  @include brockma.border-start( 1px solid #000 ); // Dart Sass
}

index.ltr.scss

// @import "brockma/index"; // node-sass
@use "brockma"; // Dart Sass, Brockma default start-direction is LTR
@import "index"; // Site components

index.rtl.scss

// @import "brockma/rtl"; // node-sass
@use "brockma/rtl" as brockma; // Dart Sass, using Brockma RTL start-direction
@import "index"; // Site components

CSS output:

index.ltr.css

.card {
   border-left: 1px solid #000;
}

index.rtl.css

.card {
   border-right: 1px solid #000;
}

Installation

npm i --save-dev brockma

Brockma API

Variables:

$direction

`$direction`

Site current direction <direction>

Default : ltr

$direction: <direction>;

Example

Scss:

body {
    direction: $direction;
}

Output:

body {
    direction: ltr;
}

$opposite-direction

`$opposite-direction`

Site opposite direction <direction>

Default : rtl

$opposite-direction: <direction>;

Example

Scss:

body {
    direction: $opposite-direction;
}

Output:

body {
    direction: rtl;
}

$start-direction

`$start-direction`

Site start direction <inset-properties{left,right}>

Default : left

$start-direction: <inset-properties{left,right}>;

Example

Scss:

body {
    text-align: $start-direction;
}

Output:

body {
    text-align: left;
}

$end-direction

`$end-direction`

Site end direction <inset-properties{left,right}>

Default : right

$end-direction: <inset-properties{left,right}>;

Example

Scss:

body {
    text-align: $end-direction;
}

Output:

body {
    text-align: right;
}

$transform-direction

`$transform-direction`

<number{1,-1}>

Default : 1

$transform-direction: <number{1,-1}>;

Example

Scss:

.card {
    transform: translateX( $transform-direction * 200px );
}

Output:

.card {
    transform: translateX( 200px );
    // transform: translateX( -200px ) // In RTL direction;
}

$is_rtl

`$is_rtl`

Is the site on RTL mode

Default : false

$is_rtl: <boolean>;

Example

Scss:

$font_family: Montserrat;
@if( $is_rtl ) {
    $font_family: Rubik;
}

body {
    font-family: $font_family;
}

Output:

body {
    font-family: Montserrat;
}

Mixins:

margin

margin-start( $margin )

`margin-start( $margin )`

Sets the margin area on the start side of an element.

@include margin-start( 15px );

$margin <Unit>

Example

Scss:

.card {
    @include margin-start( 15px );
}

Output:

.card {
    margin-left: 15px;
}

margin-end( $margin )

`margin-end( $margin )`

Sets the margin area on the end side of an element.

@include margin-end( 15px );

$margin <Unit>

Example

Scss:

.card {
    @include margin-end( 15px );
}

Output:

.card {
    margin-right: 15px;
}

margin-h( $margin... )

`margin-h( $margin... )`

Sets horizontal margin area on the start-end sides of an element.

@include margin-h( 15px );

$margin <Unit>

Example

Scss:

.card {
    @include margin-h( 15px );
    // @include margin-h( 15px, 2px ); // Or with two arguments
}

Output:

.card {
    margin-left: 15px;
    margin-right: 15px;
}

margin-v( $margin... )

`margin-v( $margin... )`

Sets vertical margin area on the top-bottom of an element.

@include margin-v( 15px );

$margin <Unit>

Example

Scss:

.card {
    @include margin-v( 15px );
    // @include margin-v( 15px, 2px ); // Or with two arguments
}

Output:

.card {
    margin-top: 15px;
    margin-bottom: 15px;
}

border

border-start( $arguments... )

`border-start( $arguments... )`

Sets all the properties of an element's start border.

@include border-start( 1px solid #000 );

Example

Scss:

.card {
    @include border-start( 1px solid #000 );
}

Output:

.card {
    border-left: 1px solid #000;
}

border-end( $arguments... )

`border-end( $arguments... )`

Sets all the properties of an element's end border.

@include border-end( 1px solid #000 );

Example

Scss:

.card {
    @include border-end( 1px solid #000 );
}

Output:

.card {
    border-right: 1px solid #000;
}

border-h( $arguments... )

`border-h( $arguments... )`

Sets all the properties of an element's horizontal border.

@include border-h( 1px solid #000 );

Example

Scss:

.card {
    @include border-h( 1px solid #000 );
    // @include border-h( 1px solid #000, 2px solid red ); // With two arguments  
}

Output:

.card {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

border-v( $arguments... )

`border-v( $arguments... )`

Sets all the properties of an element's vertical border.

@include border-v( 1px solid #000 );

Example

Scss:

.card {
    @include border-v( 1px solid #000 );
    // @include border-v( 1px solid #000, 2px solid red ); // With two arguments  
}

Output:

.card {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

border-start-width( $width )

`border-start-width( $width )`

Sets the width of the start border of an element.

@include border-start-width( 2px );

$width <Unit>

Example

Scss:

.card {
    @include border-start-width( 2px );
}

Output:

.card {
    border-left-width: 2px;
}

border-end-width( $width )

`border-end-width( $width )`

Sets the width of the end border of an element.

@include border-end-width( 2px );

$width <Unit>

Example

Scss:

.card {
    @include border-end-width( 2px );
}

Output:

.card {
    border-right-width: 2px;
}

border-h-width( $width... )

`border-h-width( $width... )`

Sets the width of the horizontal border of an element.

@include border-h-width( 2px );

$width <Unit>

Example

Scss:

.card {
    @include border-h-width( 2px );
    // @include border-h-width( 2px, 5px ); // Or with two arguments
}

Output:

.card {
    border-left-width: 2px;
    border-right-width: 2px;
}

border-v-width( $width... )

`border-v-width( $width... )`

Sets the width of the vertical border of an element.

@include border-v-width( 2px );

$width <Unit>

Example

Scss:

.card {
    @include border-v-width( 2px );
    // @include border-v-width( 2px, 5px ); // Or with two arguments
}

Output:

.card {
    border-top-width: 2px;
    border-bottom-width: 2px;
}

border-start-style( $style )

`border-start-style( $style )`

Sets the style of the start border of an element.

@include border-start-style( solid );

$style <line-style>

Example

Scss:

.card {
    @include border-start-style( solid );
}

Output:

.card {
    border-left-style: solid;
}

border-end-style( $style )

`border-end-style( $style )`

Sets the style of the end border of an element.

@include border-end-style( solid );

$style <line-style>

Example

Scss:

.card {
    @include border-end-style( solid );
}

Output:

.card {
    border-right-style: solid;
}

border-h-style( $style... )

`border-h-style( $style... )`

Sets the style of the horizontal border of an element.

@include border-h-style( solid );

$style <line-style>

Example

Scss:

.card {
    @include border-h-style( solid );
    // @include border-h-style( solid, dotted ); // Or with two arguments
}

Output:

.card {
    border-left-style: solid;
    border-right-style: solid;
}

border-v-style( $style... )

`border-v-style( $style... )`

Sets the style of the vertical border of an element.

@include border-v-style( solid );

$style <line-style>

Example

Scss:

.card {
    @include border-v-style( solid );
    // @include border-v-style( solid, dotted ); // Or with two arguments
}

Output:

.card {
    border-top-style: solid;
    border-bottom-style: solid;
}

border-start-color( $color )

`border-start-color( $color )`

Sets the color of the start border of an element.

@include border-start-color( #000 );

$color <color>

Example

Scss:

.card {
    @include border-start-color( #000 );
}

Output:

.card {
    border-left-color: #000;
}

border-end-color( $color )

`border-end-color( $color )`

Sets the color of the end border of an element.

@include border-end-color( #000 );

$color <color>

Example

Scss:

.card {
    @include border-end-color( #000 );
}

Output:

.card {
    border-right-color: #000;
}

border-h-color( $color... )

`border-h-color( $color... )`

Sets the color of the horizontal border of an element.

@include border-h-color( #000 );

$color <color>

Example

Scss:

.card {
    @include border-h-color( #000 );
    // @include border-h-color( #000, #fff ); // Or with two arguments
}

Output:

.card {
    border-left-color: #000;
    border-right-color: #000;
}

border-v-color( $color... )

`border-v-color( $color... )`

Sets the color of the vertical border of an element.

@include border-v-color( #000 );

$color <color>

Example

Scss:

.card {
    @include border-v-color( #000 );
    // @include border-v-color( #000, #fff ); // Or with two arguments
}

Output:

.card {
    border-top-color: #000;
    border-bottom-color: #000;
}

border-start-radius( $radius... )

`border-start-radius( $radius... )`

Rounds the top-bottom start corners of an element by specifying the radius.

@include border-start-radius( 6px );

$radius <Unit>

Example

Scss:

.card {
    @include border-start-radius( 6px );
}

Output:

.card {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

border-end-radius( $radius... )

`border-end-radius( $radius... )`

Rounds the top-bottom end corners of an element by specifying the radius.

@include border-end-radius( 6px );

$radius <Unit>

Example

Scss:

.card {
    @include border-end-radius( 6px );
}

Output:

.card {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

border-top-start-radius( $radius )

`border-top-start-radius( $radius )`

Rounds the top-start corner of an element by specifying the radius.

@include border-top-start-radius( 6px );

$radius <Unit>

Example

Scss:

.card {
    @include border-top-start-radius( 6px );
}

Output:

.card {
    border-top-left-radius: 6px;
}

border-top-end-radius( $radius )

`border-top-end-radius( $radius )`

Rounds the top-end corner of an element by specifying the radius.

@include border-top-end-radius( 6px );

$radius <Unit>

Example

Scss:

.card {
    @include border-top-end-radius( 6px );
}

Output:

.card {
    border-top-right-radius: 6px;
}

border-top-radius( $radius... )

`border-top-radius( $radius... )`

Rounds the top corners of an element by specifying the radius.

@include border-top-radius( 6px );

$radius <Unit>

Example

Scss:

.card {
    @include border-top-radius( 6px );
    // @include border-top-radius( 6px, 10px ); // Or with two arguments
}

Output:

.card {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

border-bottom-start-radius( $radius )

`border-bottom-start-radius( $radius )`

Rounds the bottom-start corner of an element by specifying the radius.

@include border-bottom-start-radius( 6px );

$radius <Unit>

Example

Scss:

.card {
    @include border-bottom-start-radius( 6px );
}

Output:

.card {
    border-bottom-left-radius: 6px;
}

border-bottom-end-radius( $radius )

`border-bottom-end-radius( $radius )`

Rounds the bottom-end corner of an element by specifying the radius.

@include border-bottom-end-radius( 6px );

$radius <Unit>

Example

Scss:

.card {
    @include border-bottom-end-radius( 6px );
}

Output:

.card {
    border-bottom-right-radius: 6px;
}

border-bottom-radius( $radius... )

`border-bottom-radius( $radius... )`

Rounds the bottom corners of an element by specifying the radius.

@include border-bottom-radius( 6px );

$radius <Unit>

Example

Scss:

.card {
    @include border-bottom-radius( 6px );
    // @include border-bottom-radius( 6px, 10px ); // Or with two arguments
}

Output:

.card {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

padding

padding-start( $padding )

`padding-start( $padding )`

Sets the padding area on the start side of an element.

@include padding-start( 15px );

$padding <Unit>

Example

Scss:

.card {
    @include padding-start( 15px );
}

Output:

.card {
    padding-left: 15px;
}

padding-end( $padding )

`padding-end( $padding )`

Sets the padding area on the end side of an element.

@include padding-end( 15px );

$padding <Unit>

Example

Scss:

.card {
    @include padding-end( 15px );
}

Output:

.card {
    padding-right: 15px;
}

padding-h( $padding... )

`padding-h( $padding... )`

Sets horizontal padding area on the start-end sides of an element.

@include padding-h( 15px );

$padding <Unit>

Example

Scss:

.card {
    @include padding-h( 15px );
    // @include padding-h( 15px, 2px ); // Or with two arguments
}

Output:

.card {
    padding-left: 15px;
    padding-right: 15px;
}

padding-v( $padding... )

`padding-v( $padding... )`

Sets vertical padding area on the top-bottom of an element.

@include padding-v( 15px );

$padding <Unit>

Example

Scss:

.card {
    @include padding-v( 15px );
    // @include padding-v( 15px, 2px ); // Or with two arguments
}

Output:

.card {
    padding-top: 15px;
    padding-bottom: 15px;
}

position

absolute( $top:null, $start:null, $bottom:null, $end:null )

`absolute( $top:null, $start:null, $bottom:null, $end:null )`

Adding position absolute property.

@include absolute( 0, 0 );

$top <top>
$start <start-direction> Site start direction, left or right
$bottom <bottom>
$end <end-direction> Site end direction, right or left

Example

Scss:

.card {
    @include absolute( 0, 0 );
}

Output:

.card {
    position: absolute;
    top: 0;
    left: 0;
}

relative( $top:null, $start:null, $bottom:null, $end:null )

`relative( $top:null, $start:null, $bottom:null, $end:null )`

Adding position relative property.

@include relative( 0, 0 );

$top <top>
$start <start-direction> Site start direction, left or right
$bottom <bottom>
$end <end-direction> Site end direction, right or left

Example

Scss:

.card {
    @include relative( 0, 0 );
}

Output:

.card {
    position: relative;
    top: 0;
    left: 0;
}

fixed( $top:null, $start:null, $bottom:null, $end:null )

`fixed( $top:null, $start:null, $bottom:null, $end:null )`

Adding position fixed property.

@include fixed( 0, 0 );

$top <top>
$start <start-direction> Site start direction, left or right
$bottom <bottom>
$end <end-direction> Site end direction, right or left

Example

Scss:

.card {
    @include fixed( 0, 0 );
}

Output:

.card {
    position: fixed;
    top: 0;
    left: 0;
}

More Sass toolkits

Credits

Elad Shechter