Ümit Tunç
276 lines
12 KiB
HTML
276 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Doc - Blogzine Theme</title>
|
|
<!-- Meta Tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="author" content="Webestica.com">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<!-- Google Font -->
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Plugins CSS -->
|
|
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
|
|
|
|
<!-- Theme CSS -->
|
|
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/doc.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/css/prism.css">
|
|
<link rel="stylesheet" type="text/css" href="assets/vendor/glightbox/css/glightbox.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- **************** MAIN CONTENT START **************** -->
|
|
<main>
|
|
<!-- Navbar top START -->
|
|
<div class="navbar-top bg-dark px-3 px-sm-4 px-md-5">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<!-- Logo START -->
|
|
<a class="navbar-brand py-3" href="index.html">
|
|
<img class="navbar-brand-item" src="assets/images/logo.svg" alt="logo">
|
|
</a>
|
|
<!-- Logo END -->
|
|
|
|
<!-- Navbar right -->
|
|
<div>
|
|
<ul class="text-end list-inline m-0">
|
|
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://blogzine.webestica.com">Live Preview</a> </li>
|
|
<li class="list-inline-item me-2 me-md-4"> <a class="text-white" href="https://support.webestica.com" target="_blank">Support</a> </li>
|
|
<li class="list-inline-item text-white"> <span class="badge bg-danger text-white">v1.2.0</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Navbar top END -->
|
|
|
|
<div class="container-fluid px-0">
|
|
<div class="page-wrapper">
|
|
<!-- Left sidebar START -->
|
|
<nav class="navbar navbar-expand-sm navbar-light bg-light px-3">
|
|
<a class="navbar-brand py-2 d-sm-none" href="#">Doc nav</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#docNav" aria-controls="docNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="docNav">
|
|
<div class="left-sidebar bg-light">
|
|
<div class="content h-100vh">
|
|
<div class="list-group list-group-borderless p-3 p-md-4">
|
|
<b class="text-dark text-uppercase mb-2">Getting Started</b>
|
|
<a class="list-group-item" href="index.html">Introduction</a>
|
|
<a class="list-group-item" href="gulp.html">Gulp</a>
|
|
<a class="list-group-item" href="customization.html">Customization</a>
|
|
<a class="list-group-item" href="color-scheme.html">Color Scheme</a>
|
|
<a class="list-group-item" href="logo-settings.html">Logo Settings</a>
|
|
<a class="list-group-item" href="page-loading.html">Page Loading</a>
|
|
<a class="list-group-item" href="fonts.html">Fonts</a>
|
|
<a class="list-group-item" href="dark-mode.html">Dark mode</a>
|
|
<a class="list-group-item" href="rtl.html">RTL Version</a>
|
|
<a class="list-group-item" href="lazy-load.html">Lazy Load</a>
|
|
<a class="list-group-item" href="sources-and-credits.html">Sources and Credits</a>
|
|
<a class="list-group-item" href="changelog.html">Changelog</a>
|
|
<a class="list-group-item" href="updates.html">Updates</a>
|
|
<a class="list-group-item" href="support.html">Support</a>
|
|
<b class="text-dark text-uppercase mt-3 mb-2">Component</b>
|
|
<a class="list-group-item" href="alerts.html">Alerts</a>
|
|
<a class="list-group-item" href="avatar.html">Avatar</a>
|
|
<a class="list-group-item" href="badges.html">Badges</a>
|
|
<a class="list-group-item" href="breadcrumb.html">Breadcrumb</a>
|
|
<a class="list-group-item" href="buttons.html">Buttons</a>
|
|
<a class="list-group-item" href="card.html">Card</a>
|
|
<a class="list-group-item" href="font-icons.html">Font icons</a>
|
|
<a class="list-group-item" href="google-map.html">Google Map</a>
|
|
<a class="list-group-item" href="nav-and-tabs.html">Nav and Tabs</a>
|
|
<a class="list-group-item" href="pagination.html">Pagination</a>
|
|
<a class="list-group-item" href="progress.html">Progress</a>
|
|
<a class="list-group-item" href="sticky-element.html">Sticky element</a>
|
|
<a class="list-group-item" href="sticky-footer.html">Sticky footer</a>
|
|
<a class="list-group-item" href="utility-classes.html">Utility classes</a>
|
|
<b class="text-dark text-uppercase mt-3 mb-2">Plugins</b>
|
|
<a class="list-group-item" href="tiny-slider.html">Tiny Slider</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Left sidebar END -->
|
|
|
|
<!-- Main content START -->
|
|
<div class="main-content">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<!-- Page title -->
|
|
<div class="my-5">
|
|
<h1>RTL</h1>
|
|
<p class="lead">Learn how to enable support for right-to-left text in theme across our layout, components, and utilities.</p>
|
|
<hr class="my-5">
|
|
</div>
|
|
<!-- Page content START -->
|
|
|
|
<p class="mt-3">To enable RTL, please go through following steps </p>
|
|
|
|
<h3 class="mt-4">Required changes</h3>
|
|
<p>These are strict requirements for enabling RTL in blogzine. So you must carry out all steps one by one.</p>
|
|
<ol>
|
|
<li>Set <code>dir="rtl"</code> on the <code><html></code> element. See the example: <br> <code><html dir="rtl"></code></li>
|
|
<li class="mt-2">Add an appropriate <code>lang</code> attribute, like <code>lang="ar"</code>, on the <code><html></code> element. See the example: <br> <code><html lang="ar" dir="rtl"></code></li>
|
|
<li class="mt-2">Replace <code>tiny-slider.js</code> version with <code>tiny-slider-rtl.js</code> in HTML files wherever applicable. See the example:<br>
|
|
|
|
<div class="position-relative">
|
|
<pre id="copy-2" class="my-3">
|
|
<code class=" language-markup">
|
|
<script src="assets/vendor/tiny-slider/tiny-slider-rtl.js"></script>
|
|
</code>
|
|
</pre>
|
|
<button id="copy_id-2" data-clipboard-action="copy" data-clipboard-target="#copy-2" class="copy-link btn btn-primary btn-sm">Copy</button>
|
|
</div>
|
|
|
|
</li>
|
|
<li class="mt-2">Set enableRTL <code>true</code> in <code>gulpfile.js</code> See the example: <br> <code>var enableRTL = true;</code></li>
|
|
|
|
|
|
</ol>
|
|
<p class="mt-4">After finishing all of these steps, new <code>style-rtl.css</code> will be generated in <code>assets/css</code> folder. You'll need to replace this new RTL version of CSS with LTR (<code>style.css</code>). Here's the example of linking compiled CSS with RTL enabled:</p>
|
|
<div class="position-relative">
|
|
<pre id="copy-1" class="my-3">
|
|
<code class=" language-markup"><!-- Theme CSS -->
|
|
<link rel="stylesheet" type="text/css" href="assets/css/style-rtl.css">
|
|
</code>
|
|
</pre>
|
|
<button id="copy_id-1" data-clipboard-action="copy" data-clipboard-target="#copy-1" class="copy-link btn btn-primary btn-sm">Copy</button>
|
|
</div>
|
|
|
|
<h4 class="mt-5">RTL Customization</h4>
|
|
<p>We have created RTL CSS using <a href="https://www.npmjs.com/package/gulp-rtlcss">gulp-rtlcss</a> package - a Gulp plugin, that uses <a href="https://github.com/MohammadYounes/rtlcss">RTLCSS</a> to transform Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)</p>
|
|
|
|
<p>Using <a href="https://rtlcss.com/learn/usage-guide/value-directives/">RTLCSS value directives</a>, you can make a variable output a different value for RTL.</p>
|
|
|
|
<div class="alert alert-warning my-4 pt-4">
|
|
<p>Please note that SASS/SCSS will omit comments placed inside the declaration value from the output CSS. To preserve RTLCSS value directives, Use SASS <a target="_blank" class="alert-link" href="https://sass-lang.com/documentation/interpolation">interpolation</a> syntax passing your comment as string. See examples below:</p>
|
|
</div>
|
|
|
|
|
|
<p> For example, to decrease the weight for <code>$font-weight-bold</code> throughout the codebase, you may use the <code>/*rtl: {value}*/</code> syntax:</p>
|
|
|
|
<div class="position-relative">
|
|
<pre id="copy-8" class="my-3">
|
|
<code class="language-css">$font-weight-bold: 700 #{"/* rtl:600*/"};
|
|
</code>
|
|
</pre>
|
|
<button id="copy_id-8" data-clipboard-action="copy" data-clipboard-target="#copy-8" class="copy-link btn btn-primary btn-sm">Copy</button>
|
|
</div>
|
|
|
|
<p>Which would ouput to the following for our default CSS and RTL CSS:</p>
|
|
<div class="position-relative">
|
|
<pre id="copy-3" class="my-3">
|
|
<code class="language-css">/* style.css ouput */
|
|
.fw-bold {
|
|
font-weight: 700 /* rtl:600 */;
|
|
}
|
|
|
|
/* style.rtl.css ouput */
|
|
.fw-bold {
|
|
font-weight: 600;
|
|
}
|
|
</code>
|
|
</pre>
|
|
<button id="copy_id-3" data-clipboard-action="copy" data-clipboard-target="#copy-3" class="copy-link btn btn-primary btn-sm">Copy</button>
|
|
</div>
|
|
|
|
<p class="mt-5">To keep same values in default CSS (style.css) and RTL CSS (style-rtl.css). Use <code>/*rtl:ignore*/</code></p>
|
|
|
|
<div class="position-relative">
|
|
<pre id="copy-4" class="my-3">
|
|
<code class="language-css">.example{
|
|
float: left #{"/* rtl:ignore */"};
|
|
}
|
|
</code>
|
|
</pre>
|
|
<button id="copy_id-4" data-clipboard-action="copy" data-clipboard-target="#copy-4" class="copy-link btn btn-primary btn-sm">Copy</button>
|
|
</div>
|
|
|
|
<p class="mt-5">To add CSS only in RTL css, use<code>/*rtl:raw*/</code> It will be complied only in RTL CSS (style-rtl.css)</p>
|
|
|
|
<div class="position-relative">
|
|
<pre id="copy-5" class="my-3">
|
|
<code class="language-css">/* rtl:raw:
|
|
.example{
|
|
float: left;
|
|
}
|
|
*/</code>
|
|
</pre>
|
|
<button id="copy_id-5" data-clipboard-action="copy" data-clipboard-target="#copy-5" class="copy-link btn btn-primary btn-sm">Copy</button>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h3 class="mt-5">Alternative font stack</h3>
|
|
|
|
<p>If you want to use different font family for LTR and RTL, you need to use one of the following methods</p>
|
|
|
|
<h5 class="mt-4">Insert Directive</h5>
|
|
<p>For example, if you want to use <code>"Helvetica Neue"</code> font family in LTR and <code>"Helvetica Neue Arabic"</code> for RTL then you need to use below code in SCSS.</p>
|
|
<div class="position-relative">
|
|
<pre id="copy-6" class="my-4">
|
|
<code class="language-css">$font-family-base: Helvetica Neue #{"/* rtl:insert:Arabic */"};
|
|
</code>
|
|
</pre>
|
|
<button id="copy_id-6" data-clipboard-action="copy" data-clipboard-target="#copy-6" class="copy-link btn btn-primary btn-sm">Copy</button>
|
|
</div>
|
|
|
|
|
|
<h5 class="mt-4">RTL Directive</h5>
|
|
<p>For example, if you want to use <code>'Rubik', sans-serif</code> font family in LTR and <code>'Amiri', serif</code> for RTL then you need to use below code in SCSS.</p>
|
|
<div class="position-relative">
|
|
<pre id="copy-7" class="my-4">
|
|
<code class="language-css">$font-family-base: 'Rubik', sans-serif #{"/* rtl:'Amiri', serif*/"};
|
|
</code>
|
|
</pre>
|
|
<button id="copy_id-7" data-clipboard-action="copy" data-clipboard-target="#copy-7" class="copy-link btn btn-primary btn-sm">Copy</button>
|
|
</div>
|
|
|
|
<h4 class="mt-5">Additional changes</h4>
|
|
<ul>
|
|
<li>To flip any image, SVG shape or any element, use <code>.rtl-flip</code> class. It will flip the element in RTL.</li>
|
|
</ul>
|
|
|
|
<h3 class="mt-5">Additional resources</h3>
|
|
<ul>
|
|
<li><a href="https://rtlcss.com/" target="_blank">RTLCSS</a></li>
|
|
<li><a href="https://rtlstyling.com/posts/rtl-styling" target="_blank">RTL Styling 101</a></li>
|
|
<li><a href="https://www.npmjs.com/package/gulp-rtlcss" target="_blank">gulp-rtlcss</a></li>
|
|
<li><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/" target="_blank">Bootstrap RTL Introduction page</a></li>
|
|
</ul>
|
|
|
|
<!-- Page content END -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main content END -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- =======================
|
|
JavaScripts -->
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="assets/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script src="assets/js/simple-scrollbar.min.js"></script>
|
|
<script src="assets/js/prism.js"></script>
|
|
<script src="assets/js/clipboard.min.js"></script>
|
|
<script src="assets/vendor/glightbox/js/glightbox.js"></script>
|
|
|
|
<!-- Template Functions -->
|
|
<script src="assets/js/functions.js"></script>
|
|
|
|
</body>
|
|
</html> |