Merge pull request #12840 from twbs/rtl_via_css_flip

Add RTL via CSS Flip

Merge pull request #12840 from twbs/rtl_via_css_flip
Add RTL via CSS Flip
0e6db620 · Mark Otto · 1399497a · d6e07f04 · 0e6db620 · 0e6db620
Commit 0e6db620 authored Mar 04, 2014 by Mark Otto
11 changed files
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -192,11 +192,20 @@ module.exports = function (grunt) {
        },
        files: {
          'dist/css/<%= pkg.name %>.min.css': 'dist/css/<%= pkg.name %>.css',
+          'dist/css/<%= pkg.name %>-rtl.min.css': 'dist/css/<%= pkg.name %>-rtl.css',
          'dist/css/<%= pkg.name %>-theme.min.css': 'dist/css/<%= pkg.name %>-theme.css'
        }
      }
    },

+    cssFlip: {
+      rtl: {
+        files: {
+          'dist/css/<%= pkg.name %>-rtl.css': 'dist/css/<%= pkg.name %>.css'
+        }
+      }
+    },
+
    cssmin: {
      compress: {
        options: {
@@ -222,7 +231,9 @@ module.exports = function (grunt) {
        files: {
          src: [
            'dist/css/<%= pkg.name %>.css',
+            'dist/css/<%= pkg.name %>-rtl.css',
            'dist/css/<%= pkg.name %>.min.css',
+            'dist/css/<%= pkg.name %>-rtl.min.css',
            'dist/css/<%= pkg.name %>-theme.css',
            'dist/css/<%= pkg.name %>-theme.min.css'
          ]
@@ -237,6 +248,7 @@ module.exports = function (grunt) {
      dist: {
        files: {
          'dist/css/<%= pkg.name %>.css': 'dist/css/<%= pkg.name %>.css',
+          'dist/css/<%= pkg.name %>-rtl.css': 'dist/css/<%= pkg.name %>-rtl.css',
          'dist/css/<%= pkg.name %>-theme.css': 'dist/css/<%= pkg.name %>-theme.css'
        }
      },
@@ -375,6 +387,7 @@ module.exports = function (grunt) {

  // These plugins provide necessary tasks.
  require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
+  grunt.loadTasks('./grunt/tasks/');

  // Docs HTML validation task
  grunt.registerTask('validate-html', ['jekyll', 'validation']);
@@ -402,7 +415,8 @@ module.exports = function (grunt) {
  grunt.registerTask('dist-js', ['concat', 'uglify']);

  // CSS distribution task.
-  grunt.registerTask('dist-css', ['less', 'csscomb', 'cssmin', 'usebanner']);
+  grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);
+  grunt.registerTask('dist-css', ['less-compile', 'cssFlip', 'less:minify', 'cssmin', 'csscomb', 'usebanner']);

  // Docs distribution task.
  grunt.registerTask('dist-docs', 'copy:docs');

--- a/dist/css/bootstrap-rtl.css
+++ b/dist/css/bootstrap-rtl.css
--- a/dist/css/bootstrap-rtl.min.css
+++ b/dist/css/bootstrap-rtl.min.css
--- a/docs/_includes/nav-css.html
+++ b/docs/_includes/nav-css.html
@@ -128,3 +128,10 @@
    <li><a href="#sass-installation">Rails install</a></li>
  </ul>
 </li>
+<li>
+  <a href="#rtl">RTL version</a>
+  <ul class="nav">
+    <li><a href="#rtl-how-to">How to use</a></li>
+    <li><a href="#rtl-css-flip">CSS Flip</a></li>
+  </ul>
+</li>
--- a/docs/assets/js/customize.min.js
+++ b/docs/assets/js/customize.min.js
--- a/docs/css.html
+++ b/docs/css.html
@@ -3345,3 +3345,28 @@ a {
    <a class="btn btn-lg btn-outline" href="{{ site.sass_repo }}">Bootstrap for Sass</a>
  </p>
 </div>
+
+
+
+<!-- RTL
+================================================== -->
+<div class="bs-docs-section">
+  <h1 id="rtl" class="page-header">RTL</h1>
+  <p class="lead">As of Bootstrap 3.2, a right-to-left version of Bootstrap ships as part of the repository. It's powered by Twitter's <a href="https://github.com/twitter/css-flip">CSS Flip project</a> and is generated via our Gruntfile.</p>
+
+  <h2 id="rtl-how-to">How to use</h2>
+  <p>Bootstrap is by default a left-to-right project. For right-to-left projects, you'll need to set your language and replace the default Bootstrap CSS with an RTL version. First, set your language and text direction:</p>
+{% highlight html %}
+<!-- Example: Arabic language with direction set to RTL -->
+<html lang="ar" dir="rtl">
+{% endhighlight %}
+  <p>Then, include the right-to-left CSS file in place of the default Bootstrap CSS:</p>
+{% highlight html %}
+<!-- Bootstrap RTL -->
+<link rel="stylesheet" href="bootstrap-rtl.css">
+{% endhighlight %}
+  <p>Alternatively, you may use the minified RTL file, <code>bootstrap-rtl.min.css</code>.</p>
+
+  <h2 id="rtl-css-flip">CSS Flip</h2>
+  <p><a href="https://github.com/twitter/css-flip">CSS Flip</a> is a project for converting left-to-right CSS files into right-to-left CSS files. We use it in our Gruntfile to automate the generation of Bootstrap's RTL CSS files.</p>
+</div>
--- a/docs/dist/css/bootstrap-rtl.min.css
+++ b/docs/dist/css/bootstrap-rtl.min.css
--- a/docs/examples/rtl/index.html
+++ b/docs/examples/rtl/index.html
--- a/docs/examples/rtl/rtl.css
+++ b/docs/examples/rtl/rtl.css
+body {
+  padding-top: 70px;
+  padding-bottom: 30px;
+}
+
+.theme-dropdown .dropdown-menu {
+  position: static;
+  display: block;
+  margin-bottom: 20px;
+}
+
+.theme-showcase > p > .btn {
+  margin: 5px 0;
+}
--- a/grunt/tasks/css-flip.js
+++ b/grunt/tasks/css-flip.js
+/*!
+ * Bootstrap Grunt task for generating RTL CSS from LTR CSS using css-flip
+ * http://getbootstrap.com
+ * Copyright 2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+'use strict';
+
+var flip = require('css-flip');
+
+
+module.exports = function(grunt) {
+  grunt.registerMultiTask('cssFlip', 'Generates RTL CSS from LTR CSS using css-flip', function () {
+    this.files.forEach(function (f) {
+      var unflippedCss = grunt.file.read(f.src);
+      var flippedCss = null;
+      try {
+        flippedCss = flip(unflippedCss);
+      }
+      catch (err) {
+        grunt.fail.warn(err);
+      }
+      grunt.file.write(f.dest, flippedCss);
+      grunt.log.writeln('File ' + f.dest.cyan + ' created.');
+    });
+  });
+};
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
  "devDependencies": {
    "btoa": "~1.1.1",
    "canonical-json": "~0.0.4",
+    "css-flip": "~0.3.0",
    "grunt": "~0.4.2",
    "grunt-banner": "~0.2.1",
    "grunt-contrib-clean": "~0.5.0",