Автоматична генерація rtl css за допомогою Grunt

15.01.2016
Automate rtl css generation with Grunt
Автор:

Створення rtl сss — важливий процес, який потрібен для адаптацї дизайну до стандартів rtl. Цей процес передбачає заміну margin-left на margin-right, float: left на float: right… і так далі.

На щастя, за нас цю роботу може зробити Grunt, завдяки пакету grunt-css-flip. Цей пакет створює "віддзеркалений" css файл. З основами Grunt можете познайомитись у цій статті, тому відразу приступимо до суті.

Встановлюємо і налаштовуємо grunt-css-flip:

1. Ставимо і налаштовуємо Grunt.
2. Встановлюємо пакет grunt-css-flip:
npm install grunt-css-flip --save-dev.
3. Створюємо Gruntfile.js.
Для прикладу розглянемо наступний Gruntfile.js файл:
 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']);
}

 

Частина, яка нас цікавить, — це

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

Files — тут задаються файли, які потрібно віддзеркалити, через кому можна вказати декілька файлів. Файли вказуються у форматі: ‘назва файлу rtl’: ‘назва файлу, для якого потрібно створити rtl копію’.

Options — тут можна задати, чи потрібно стискати rtl файл, чи ні (параметер compress, дефолтне значення false), і задати відступ для css (параметер indent, дефолтне значення 2 пробіли).

4. Запускаємо Grunt

Відтепер Grunt слідкуватиме за вказаними css файлами (у нашому прикладі це css/styles.css), і створюватиме відповідні віддзеркалені css файли.

Зауваження і уточнення:

grunt-css-flip можна використовувати разом з compass, де compass генерує css з sass, а grunt відслідковує зміни css файлів, і запускає grunt-css-flip, якщо вони змінилися. Також grunt-css-flip можна використовути разом з іншими пакетами, де, для прикладу grunt буде валідувати sass/less код (пакет grunt-scss-lint), якщо перевірка пройдена генеруватиме css (пакет grunt-sass), додаватиме префікси (пакет grunt-autoprefixer), і генеруватиме rtl css файли (пакет grunt-css-flip).

Деякі зауваження щодо автоматичного віддзеркалення:

1. Наразі відсутня повна підтримка flex, тому наприклад flex-direction не буде віддзеркалюватись.

2. Також потрібно бути уважним з подібним центруванням:

margin-left: 50%;

transform: translate(-50%);

Оскільки margin-left віддзеркалиться у margin-right, але transform не зміниться, відповідно у rtl елемент не буде відцентрований.

Лінки: Репозиторій - https://github.com/twbs/grunt-css-flip

Вдалого вам коду!

2 votes, Рейтинг: 5

Також по темі

1

В наш час величезна кількість людей слідкують за новинами сайтів прямо з соцмереж. Тому, щоб полегшити собі життя і не робити подвійну роботу з розміщення матеріалів у себе на сайті і на сторінці...

2

Як ми часто спостерігаємо в історичних фільмах і книгах, після смерті короля натовп кричить “Король помер, хай живе король!” з такою короткою паузою між цими двома фразами, що немає коли сумувати...

3

На сьогодні можливості email-маркетингових кампаній можна з легкістю розширити засобами сервісів відправки електронних повідомлень, які були спроектовані для того, аби допомогти вам зв’язатися з...

4

Привіт! Якщо ви зацікавлені у веб-розробці на Drupal, поради від нашого розробника, безумовно, будуть корисними для вас. Дізнавайтеся нові речі про Drupal 7 і Apache Solr: переваги пошуку...

5

Не втрачати мобільних користувачів вашого сайту допомагає респонсивний дизайн (від англ. "responsive" означає "той, що швидко реагує та адаптується...

Subscribe to our blog updates