rtl mode

.gitignore

@@ -8,8 +8,7 @@ _site/
 .DS_Store
 package-lock.json
 /_test/
-src/assets/css/dashboard.css
-src/assets/css/dashboard.min.css
+src/assets/css/*.css
 src/assets/plugins/**/plugin.css
 src/assets/plugins/**/plugin.min.css
 generated-site

gulpfile.js

@@ -2,6 +2,7 @@ var gulp = require('gulp'),
     sass = require('gulp-sass'),
     rename = require('gulp-rename'),
     autoprefixer = require('gulp-autoprefixer'),
+    rtlcss = require('gulp-rtlcss'),
     pckg = require('./package.json');
 
 gulp.task('styles', function () {
@@ -15,6 +16,10 @@ gulp.task('styles', function () {
             cascade: false
         }))
         .pipe(rename('dashboard.css'))
+        .pipe(gulp.dest('src/assets/css/'))
+
+        .pipe(rtlcss())
+        .pipe(rename('dashboard.rtl.css'))
         .pipe(gulp.dest('src/assets/css/'));
 });
 

package.json

@@ -38,6 +38,7 @@
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^5.0.0",
     "gulp-rename": "^1.2.2",
+    "gulp-rtlcss": "^1.2.0",
     "gulp-sass": "^3.1.0",
     "npm-run-all": "^4.1.2"
   },

src/_includes/cards/calendar.html

@@ -66,15 +66,15 @@
 	<ul class="list-group card-list-group">
 		<li class="list-group-item list-group-item-red">
 			<a href="javascript:void(0)" class="text-inherit">Cras justo odio</a>
-			<span class="pull-right text-muted">16 Dec</span>
+			<span class="float-right text-muted">16 Dec</span>
 		</li>
 		<li class="list-group-item list-group-item-blue">
 			<a href="javascript:void(0)" class="text-inherit">Dapibus ac facilisis in</a>
-			<span class="pull-right text-muted">22 Dec</span>
+			<span class="float-right text-muted">22 Dec</span>
 		</li>
 		<li class="list-group-item list-group-item-red">
 			<a href="javascript:void(0)" class="text-inherit">Vestibulum at eros</a>
-			<span class="pull-right text-muted">29 Dec</span>
+			<span class="float-right text-muted">29 Dec</span>
 		</li>
 	</ul>
 </div>
\ No newline at end of file

src/_includes/cards/chart-bg.html

@@ -5,7 +5,7 @@
 
 <div class="card">
 	<div class="card-body">
-		<div class="card-value pull-right text-{{ color }}">{{ include.rate | default: '+5%' }}</div>
+		<div class="card-value float-right text-{{ color }}">{{ include.rate | default: '+5%' }}</div>
 		<h3 class="mb-1">{{ include.title | default: '423' }}</h3>
 		<div class="text-muted">{{ include.description | default: 'Users online' }}</div>
 	</div>

src/_includes/cards/login.html

@@ -10,7 +10,7 @@
 		<div class="form-group">
 			<label class="form-label">
 				Password
-				<a href="{{ site.base }}/forgot-password.html" class="pull-right small">I forgot password</a>
+				<a href="{{ site.base }}/forgot-password.html" class="float-right small">I forgot password</a>
 			</label>
 			<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 		</div>

src/_includes/cards/media-inverse.html

 <div class="card bg-{{ include.color | default: 'success' }}">
 	<div class="card-body text-white">
-		<div class="card-value pull-right">{{ include.rate | default: '23%' }}</div>
+		<div class="card-value float-right">{{ include.rate | default: '23%' }}</div>
 		<h3 class="mb-1">{{ include.title | default: '423' }}</h3>
 		<div>{{ include.description | default: 'Users online' }}</div>
 	</div>

src/_includes/cards/media.html

 <div class="card">
 	<div class="card-body">
-		<div class="card-value pull-right text-{{ include.color | default: 'success' }}">{{ include.rate | default: '23%' }}</div>
+		<div class="card-value float-right text-{{ include.color | default: 'success' }}">{{ include.rate | default: '23%' }}</div>
 		<h3 class="mb-1">{{ include.title | default: '423' }}</h3>
 		<div>{{ include.description | default: 'Users online' }}</div>
 		{% if include.progress %}

src/_includes/cards/server.html

@@ -27,7 +27,7 @@
 	<div class="card-body">
 		<div class="card-text">
 			<div class="mt-0">
-				<small class="pull-right text-muted">10/200 GB</small>
+				<small class="float-right text-muted">10/200 GB</small>
 				<h5>Memory</h5>
 				<div class="progress progress-sm">
 					<div style="width: 60%;" class="progress-bar"></div>
@@ -35,7 +35,7 @@
 			</div>
 
 			<div class="mt-5">
-				<small class="pull-right text-muted">20 GB</small>
+				<small class="float-right text-muted">20 GB</small>
 				<h5>Bandwidth</h5>
 				<div class="progress progress-sm">
 					<div style="width: 50%;" class="progress-bar"></div>
@@ -43,7 +43,7 @@
 			</div>
 
 			<div class="mt-5">
-				<small class="pull-right text-muted">73%</small>
+				<small class="float-right text-muted">73%</small>
 				<h5>Activity</h5>
 				<div class="progress progress-sm">
 					<div style="width: 40%;" class="progress-bar"></div>
@@ -51,7 +51,7 @@
 			</div>
 
 			<div class="mt-5">
-				<small class="pull-right text-muted">400 GB</small>
+				<small class="float-right text-muted">400 GB</small>
 				<h5>FTP</h5>
 				<div class="progress progress-sm">
 					<div style="width: 80%;" class="progress-bar bg-danger"></div>

src/_includes/cards/sparkline.html

@@ -6,7 +6,7 @@
 
 <div class="card">
 	<div class="card-body">
-		<div class="card-value pull-right text-warning">
+		<div class="card-value float-right text-warning">
 			<div class="sparkline" data-sparkline="{% include chart-data.html limit=limit offset=offset aggregate=aggregate %}" data-sparkline-color="{{ site.colors[color] }}" data-sparkline-type="{{ chart_type }}"></div>
 		</div>
 		<h3 class="mb-1">$10M <i class="mdi mdi-trending-up text-success"></i></h3>

src/_includes/cards/twitter.html

@@ -9,7 +9,7 @@
 				<div class="content">
 
 					<p class="h5">
-						John Smith <small>@johnsmith</small> <small class="pull-right text-muted">31 minutes ago</small>
+						John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small>
 					</p>
 					<p>
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.

src/_includes/head.html

@@ -19,3 +19,21 @@
 
 <title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{{ site.description }}</title>
 
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
+<script src="{{ site.base }}/assets/js/require.min.js"></script>
+<script>
+    requirejs.config({
+        baseUrl: '{{ site.base }}'
+    });
+</script>
+
+<!-- Dashboard Core -->
+<link href="{{ site.base }}/assets/css/dashboard{% if page.rtl %}.rtl{% endif %}.css" rel="stylesheet" />
+<script src="{{ site.base }}/assets/js/dashboard.js"></script>
+
+{% for plugin in site.theme-plugins %}
+<!-- {{ plugin[1].name }} Plugin -->
+{% if plugin[1].files contains 'css' %}<link href="{{ site.base }}/assets/plugins/{{ plugin[0] }}/plugin.css" rel="stylesheet" />{% endif %}
+{% if plugin[1].files contains 'js' %}<script src="{{ site.base }}/assets/plugins/{{ plugin[0] }}/plugin.js"></script>{% endif %}
+{% endfor %}
\ No newline at end of file

src/_layouts/base.html

 <!doctype html>
 {% assign min-ext = '' %}{% if jekyll.environment == 'production' %}{% assign min-ext = '.min' %}{% endif %}
-<html lang="en">
+<html lang="en" dir="{% if page.rtl %}rtl{% else %}ltr{% endif %}">
 <head>
 	{% include head.html %}
-
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
-	<script src="{{ site.base }}/assets/js/require.min.js"></script>
-	<script>
-        requirejs.config({
-            baseUrl: '{{ site.base }}'
-		});
-	</script>
-
-	<!-- Dashboard Core -->
-	<link href="{{ site.base }}/assets/css/dashboard.css" rel="stylesheet" />
-	<script src="{{ site.base }}/assets/js/dashboard.js"></script>
-
-	{% for plugin in site.theme-plugins %}
-	<!-- {{ plugin[1].name }} Plugin -->
-	{% if plugin[1].files contains 'css' %}<link href="{{ site.base }}/assets/plugins/{{ plugin[0] }}/plugin.css" rel="stylesheet" />{% endif %}
-	{% if plugin[1].files contains 'js' %}<script src="{{ site.base }}/assets/plugins/{{ plugin[0] }}/plugin.js"></script>{% endif %}
-	{% endfor %}
 </head>
 <body class="{{ page.body-class }}">
 

src/assets/scss/dashboard/_core.scss

 html {
 	font-size: 15px;
 	height: 100%;
+	direction: ltr;
 
 	@include media-breakpoint-up('md') {
 		font-size: 16px;

src/rtl.html

+---
+layout: default
+rtl: true
+title: RTL mode
+---
+
+<div class="container">
+	{% include page-title.html title="RTL mode" %}
+
+	<div class="row">
+		<div class="col-6">
+			{% capture body %}
+			لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره أو يتجنب الشعور بالسعادة، ولكن بفضل هؤلاء الأشخاص الذين لا يدركون بأن السعادة لا بد أن نستشعرها بصورة أكثر عقلانية ومنطقية فيعرضهم هذا لمواجهة الظروف الأليمة، وأكرر بأنه لا يوجد من يرغب في الحب ونيل المنال ويتلذذ بالآلام، الألم هو الألم ولكن نتيجة لظروف ما قد تكمن السعاده فيما نتحمله من كد وأسي.
+
+			و سأعرض مثال حي لهذا، من منا لم يتحمل جهد بدني شاق إلا من أجل الحصول على ميزة أو فائدة؟ ولكن من لديه الحق أن ينتقد شخص ما أراد أن يشعر بالسعادة التي لا تشوبها عواقب أليمة أو آخر أراد أن يتجنب الألم الذي ربما تنجم عنه بعض المتعة ؟
+			علي الجانب الآخر نشجب ونستنكر هؤلاء الرجال المفتونون بنشوة اللحظة الهائمون في رغباتهم فلا يدركون ما يعقبها من الألم والأسي المحتم، واللوم كذلك يشمل هؤلاء الذين أخفقوا في واجباتهم نتيجة لضعف إرادتهم فيتساوي مع هؤلاء الذين يتجنبون وينأون عن تحمل الكدح والألم .
+			{% endcapture %}
+
+			{% include cards/card.html body=body title="عنوان البطاقة" %}
+		</div>
+		<div class="col-6">
+			<div class="row">
+				<div class="col-4">
+					{% include cards/stats-1.html number=43 title="تذاكر جديدة" percentage=6 %}
+				</div>
+				<div class="col-4">
+					{% include cards/stats-1.html number=17 title="مغلق اليوم" percentage=-3 %}
+				</div>
+				<div class="col-4">
+					{% include cards/stats-1.html number="27.3K" title="متابعون" percentage=2 %}
+				</div>
+				<div class="col-12">
+					{% include cards/twitter.html %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file