Створення 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
Вдалого вам коду!