Categories

(110)
(56)
(94)
(16)

Automate rtl css generation with Grunt

15.01.2016
Automate RTL CSS generation with Grunt
Author:

Creation of RTL CSS is quite an important process in front-end, necessary to make the design comply with the RTL standards. This process invlolves the substitution of margin-left by margin-right, float: left by float: right… and so on.

Luckily, this job can be done by Grunt with the help of grunt-css-flip bundle, which creates a "reflection" of the CSS file. You can learn the basics of Grunt in the following article. So, let’s get started!

Installing and configuring grunt-css-flip:

1. Install and configure Grunt.
2. Install grunt-css-flip bundle:
npm install grunt-css-flip --save-dev.
3. Create Gruntfile.js.
Let’s analyze the following example of Gruntfile.js file:
 module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      css: {
        files: '**/*.css',
        tasks: ['cssflip:my_target']
      },
    },
    cssflip: {
      my_target: {
        options: {},
        files: {
          'css/styles-rtl.css': 'css/styles.css',
        }
      }
    },
    concurrent: {
      options: {
        logConcurrentOutput: true
      },
      dev: {
        tasks: ["watch:css"]
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-concurrent');
  grunt.loadNpmTasks('grunt-css-flip');
  grunt.registerTask('default',['concurrent:dev']);
}

 

Pay attention on this part of the code

  cssflip: {
      my_target: {
        options: {},
        files: {
          'css/styles-rtl.css': 'css/styles.css',
        }
      }
    },

Files: here we set the files that should be reflected (you can specify a few files and separate them by comma). Files are defined as: ‘ rtl file name’: ‘file name for which rtl copy must be created’.

Options: here we indicate whether RTL file should be compressed or not (compress parameter, default false value), and set margins for css (indent parameter, default value and 2 hiatuses).

4. Run Grunt

From this moment, Grunt will monitor chosen CSS files (in example given it’s css/styles.css) and create the relevant reflected files.

Comments and Specifications :

Grunt-css-flip can be used together with Compass, where Compass generates CSS with sass, and Grunt monitors changes in the CSS files. If they were changed, it would run grunt-css-flip. Grunt-css-flip can be also used with other bundles, where, for instance, Grunt will validate sass/less code (grunt-scss-lint bundle). If the check was over, it would generate CSS (grunt-sass bundle), add prefixes (grunt-autoprefixer bundle) and also generate rtl CSS files (grunt-css-flip bundle).

Here are some things to be aware about when using automatic reflection:

1. There is not yet full support for flex, that’s why flex-direction won’t be reflected.

2. You should also be very attentive to centering:

margin-left: 50%;

transform: translate(-50%);

Since margin-left will be reflected in margin-right and transform won’t be changed, element in RTL won’t change respectively.

References:

Repository - https://github.com/twbs/grunt-css-flip

Good luck in your coding!

6 votes, Rating: 4

Read also

1

After the official release, more and more Drupal developers ...

2

Useful tips by the developers of our Drupal development company make social networks closer and your life easier...

3

Hey there! If you are interested in Drupal web development, tips by our dev could do you a world of good....

4

In one of the recent blog posts by our developer, we offered you Drupal 8 development tips. Today, we'...

5

SASS and LESS preprocessors make front-end development much easier. To compile them to CSS...

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime