diff options
| author | Mark Otto <[email protected]> | 2014-03-03 23:50:04 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-03-03 23:50:04 -0800 |
| commit | 559b90f944fe9cfd463c1be3f89cf5d7cf7f8cb4 (patch) | |
| tree | 2c953a34b1080ab1f994566a8f518a45d1fe1e9e | |
| parent | 587814f16e01c6aae4c5c7f882134732a812a182 (diff) | |
| download | bootstrap-559b90f944fe9cfd463c1be3f89cf5d7cf7f8cb4.tar.xz bootstrap-559b90f944fe9cfd463c1be3f89cf5d7cf7f8cb4.zip | |
Rename RTL files and add some basic docs
| -rw-r--r-- | Gruntfile.js | 10 | ||||
| -rw-r--r-- | dist/css/bootstrap-rtl.css (renamed from dist/css/bootstrap.rtl.css) | 0 | ||||
| -rw-r--r-- | dist/css/bootstrap-rtl.min.css (renamed from dist/css/bootstrap.rtl.min.css) | 0 | ||||
| -rw-r--r-- | docs/_includes/nav-css.html | 8 | ||||
| -rw-r--r-- | docs/css.html | 25 | ||||
| -rw-r--r-- | docs/dist/css/bootstrap-rtl.min.css (renamed from docs/dist/css/bootstrap.rtl.min.css) | 0 |
6 files changed, 38 insertions, 5 deletions
diff --git a/Gruntfile.js b/Gruntfile.js index e7c489f01..725779146 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -192,7 +192,7 @@ 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 %>-rtl.min.css': 'dist/css/<%= pkg.name %>-rtl.css', 'dist/css/<%= pkg.name %>-theme.min.css': 'dist/css/<%= pkg.name %>-theme.css' } } @@ -201,7 +201,7 @@ module.exports = function (grunt) { cssFlip: { rtl: { files: { - 'dist/css/<%= pkg.name %>.rtl.css': 'dist/css/<%= pkg.name %>.css' + 'dist/css/<%= pkg.name %>-rtl.css': 'dist/css/<%= pkg.name %>.css' } } }, @@ -231,9 +231,9 @@ module.exports = function (grunt) { files: { src: [ 'dist/css/<%= pkg.name %>.css', - 'dist/css/<%= pkg.name %>.rtl.css', + 'dist/css/<%= pkg.name %>-rtl.css', 'dist/css/<%= pkg.name %>.min.css', - 'dist/css/<%= pkg.name %>.rtl.min.css', + 'dist/css/<%= pkg.name %>-rtl.min.css', 'dist/css/<%= pkg.name %>-theme.css', 'dist/css/<%= pkg.name %>-theme.min.css' ] @@ -248,7 +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 %>-rtl.css': 'dist/css/<%= pkg.name %>-rtl.css', 'dist/css/<%= pkg.name %>-theme.css': 'dist/css/<%= pkg.name %>-theme.css' } }, diff --git a/dist/css/bootstrap.rtl.css b/dist/css/bootstrap-rtl.css index 8a18ea04f..8a18ea04f 100644 --- a/dist/css/bootstrap.rtl.css +++ b/dist/css/bootstrap-rtl.css diff --git a/dist/css/bootstrap.rtl.min.css b/dist/css/bootstrap-rtl.min.css index 74c2055dd..74c2055dd 100644 --- a/dist/css/bootstrap.rtl.min.css +++ b/dist/css/bootstrap-rtl.min.css diff --git a/docs/_includes/nav-css.html b/docs/_includes/nav-css.html index 15025da0c..6da0b11dd 100644 --- a/docs/_includes/nav-css.html +++ b/docs/_includes/nav-css.html @@ -128,3 +128,11 @@ <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-overview">Overview</a></li> + <li><a href="#rtl-how-to">How to use</a></li> + <li><a href="#rtl-css-flip">CSS Flip</a></li> + </ul> +</li> diff --git a/docs/css.html b/docs/css.html index e1af6985e..8baf8f42d 100644 --- 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> diff --git a/docs/dist/css/bootstrap.rtl.min.css b/docs/dist/css/bootstrap-rtl.min.css index 74c2055dd..74c2055dd 100644 --- a/docs/dist/css/bootstrap.rtl.min.css +++ b/docs/dist/css/bootstrap-rtl.min.css |