docs(examples): new cheatsheet and RTL examples

author: Gaël Poupard <gael.poupard@orange.com> 2020-06-09 16:44:20 +0300
committer: XhmikosR <xhmikosr@gmail.com> 2020-12-04 08:52:03 +0300
commit: aaff11a0b321e7c1b93c089e709ee92d01a4b6f6 (patch)
tree: 7b5987eba9ddb8ae0f72e1b3e6edfe396770450f /site/layouts
parent: 9488978fb55286ba83e8193a871d1ff9815045b9 (diff)
10 files changed, 32 insertions, 28 deletions
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 078c0c327c..dd063c5dc8 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -7,7 +7,7 @@
     </aside>
 
     <main class="bd-main order-1">
-      <div class="bd-intro pl-lg-4">
+      <div class="bd-intro ps-lg-4">
         <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
           <a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
           <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
@@ -17,13 +17,13 @@
       </div>
 
       {{ if (eq .Page.Params.toc true) }}
-        <div class="bd-toc mt-4 mb-5 my-md-0 pl-xl-3 mb-lg-5 text-muted">
+        <div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
           <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
           {{ .TableOfContents }}
         </div>
       {{ end }}
 
-      <div class="bd-content pl-lg-4">
+      <div class="bd-content ps-lg-4">
         {{ if .Page.Params.sections }}
           <div class="row g-3">
             {{ range .Page.Params.sections }}
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index a7dbad77f4..948c3756fc 100644
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en"{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }}>
+<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }}>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index 408ee5cb36..33e4f406e9 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -6,7 +6,7 @@
       {{ if eq .Title "Examples" }}
       <div class="d-flex flex-column flex-sm-row">
         <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
-        <a href="{{ .Site.Params.download.source }}" class="btn btn-lg btn-outline-secondary mt-3 mt-sm-0 ml-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
+        <a href="{{ .Site.Params.download.source }}" class="btn btn-lg btn-outline-secondary mt-3 mt-sm-0 ms-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
       </div>
       {{ end }}
       {{ partial "ads" . }}
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 3722d51427..efa3c32326 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -1,6 +1,6 @@
 <header class="navbar navbar-expand-md navbar-dark bd-navbar">
   <nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
-    <a class="navbar-brand p-0 mr-2" href="/" aria-label="Bootstrap">
+    <a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
       {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }}
     </a>
 
@@ -34,34 +34,34 @@
 
       <hr class="d-md-none text-white-50">
 
-      <ul class="navbar-nav flex-row flex-wrap ml-md-auto">
+      <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
         <li class="nav-item col-6 col-md-auto">
           <a class="nav-link p-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
             {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
-            <small class="d-md-none ml-2">GitHub</small>
+            <small class="d-md-none ms-2">GitHub</small>
           </a>
         </li>
         <li class="nav-item col-6 col-md-auto">
           <a class="nav-link p-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
             {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
-            <small class="d-md-none ml-2">Twitter</small>
+            <small class="d-md-none ms-2">Twitter</small>
           </a>
         </li>
         <li class="nav-item col-6 col-md-auto">
           <a class="nav-link p-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener">
             {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
-            <small class="d-md-none ml-2">Slack</small>
+            <small class="d-md-none ms-2">Slack</small>
           </a>
         </li>
         <li class="nav-item col-6 col-md-auto">
           <a class="nav-link p-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
             {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
-            <small class="d-md-none ml-2">Open Collective</small>
+            <small class="d-md-none ms-2">Open Collective</small>
           </a>
         </li>
       </ul>
 
-      <a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ml-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
+      <a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
     </div>
   </nav>
 </header>
diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
index 82082e7bc3..9f2faf3e28 100644
--- a/site/layouts/partials/docs-subnav.html
+++ b/site/layouts/partials/docs-subnav.html
@@ -1,12 +1,12 @@
 <nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
   <div class="container-xxl d-flex align-items-md-center">
-    <form class="bd-search position-relative mr-auto">
+    <form class="bd-search position-relative me-auto">
       <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="{{ .Site.Params.docs_version }}">
     </form>
 
     {{ partial "docs-versions" . }}
 
-    <button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ml-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
+    <button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
       {{ partial "icons/expand.svg" (dict "class" "bi bi-expand" "width" "24" "height" "24") }}
       {{ partial "icons/collapse.svg" (dict "class" "bi bi-collapse" "width" "24" "height" "24") }}
     </button>
diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html
index 2416b19cfc..16df838b21 100644
--- a/site/layouts/partials/docs-versions.html
+++ b/site/layouts/partials/docs-versions.html
@@ -1,8 +1,8 @@
-<div class="dropdown ml-3">
+<div class="dropdown ms-3">
   <button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
     <span class="d-none d-lg-inline">Bootstrap</span> v{{ .Site.Params.docs_version }}
   </button>
-  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
+  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
     <li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">Latest (5.0.x)</a></li>
     <li><hr class="dropdown-divider"></li>
     <li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.x</a></li>
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 5167c104a8..45f8010157 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -1,10 +1,10 @@
-<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-left">
+<footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-start">
   <div class="container">
-    <ul class="bd-footer-links pl-0 mb-3">
+    <ul class="bd-footer-links ps-0 mb-3">
       <li class="d-inline-block"><a href="{{ .Site.Params.github_org }}">GitHub</a></li>
-      <li class="d-inline-block ml-3"><a href="https://twitter.com/{{ .Site.Params.twitter }}">Twitter</a></li>
-      <li class="d-inline-block ml-3"><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
-      <li class="d-inline-block ml-3"><a href="/docs/{{ .Site.Params.docs_version }}/about/overview/">About</a></li>
+      <li class="d-inline-block ms-3"><a href="https://twitter.com/{{ .Site.Params.twitter }}">Twitter</a></li>
+      <li class="d-inline-block ms-3"><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
+      <li class="d-inline-block ms-3"><a href="/docs/{{ .Site.Params.docs_version }}/about/overview/">About</a></li>
     </ul>
     <p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</p>
     <p class="mb-0">Currently v{{ .Site.Params.current_version }}. Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html
index a2dbdc76b1..5371e8583f 100644
--- a/site/layouts/partials/home/masthead-followup.html
+++ b/site/layouts/partials/home/masthead-followup.html
@@ -11,7 +11,7 @@
       <p>Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm.</p>
       <a class="btn btn-lg btn-outline-primary mb-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read installation docs</a>
     </div>
-    <div class="col-md-7 pl-md-5">
+    <div class="col-md-7 ps-md-5">
       {{ highlight "npm install bootstrap@next" "sh" "" }}
       {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }}
     </div>
@@ -31,7 +31,7 @@
       </p>
       <a class="btn btn-lg btn-outline-primary mb-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/">Explore the docs</a>
     </div>
-    <div class="col-md-7 pl-md-5">
+    <div class="col-md-7 ps-md-5">
       {{ highlight (printf (`<!-- CSS only -->
 <link href="%s" rel="stylesheet" integrity=%q crossorigin="anonymous">
 `) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }}
@@ -55,7 +55,7 @@
       </p>
       <a href="{{ .Site.Params.icons }}" class="btn btn-lg btn-outline-primary mb-3">Get Bootstrap Icons</a>
     </div>
-    <div class="col-md-7 pl-md-5">
+    <div class="col-md-7 ps-md-5">
         <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png,
                                                     /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
                                             src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-icons.png"
@@ -77,7 +77,7 @@
       </p>
       <a href="{{ .Site.Params.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
     </div>
-    <div class="col-md-7 pl-md-5">
+    <div class="col-md-7 ps-md-5">
         <img class="img-fluid mt-3 mx-auto" srcset="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png,
                                                     /docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
                                             src="/docs/{{ .Site.Params.docs_version }}/assets/img/bootstrap-themes.png"
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index 4ca26104dc..293819f53e 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -4,14 +4,14 @@
       <div class="col-8 mx-auto col-md-4 order-md-2 col-lg-5">
         {{ partial "icons/homepage-hero.svg" (dict "class" "img-fluid mb-3 mb-md-0" "width" "600" "height" "533") }}
       </div>
-      <div class="col-md-8 order-md-1 col-lg-7 text-center text-md-left">
+      <div class="col-md-8 order-md-1 col-lg-7 text-center text-md-start">
         <h1 class="mb-3">Build fast, responsive sites with Bootstrap</h1>
         <p class="lead mb-4">
           Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
         </p>
 
         <div class="d-flex flex-column flex-md-row">
-          <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary mb-3 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
+          <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary mb-3 me-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
           <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ .Site.Params.current_version }}');">Download</a>
         </div>
         <p class="text-muted mb-0">
diff --git a/site/layouts/partials/stylesheet.html b/site/layouts/partials/stylesheet.html
index bdd531b868..83b30f452a 100644
--- a/site/layouts/partials/stylesheet.html
+++ b/site/layouts/partials/stylesheet.html
@@ -1,8 +1,12 @@
 {{- "<!-- Bootstrap core CSS -->" | safeHTML }}
 {{ if eq hugo.Environment "production" -}}
+{{ if eq .Page.Params.direction "rtl" -}}
+<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.rtl.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_rtl_hash | safeHTMLAttr }} crossorigin="anonymous">
+{{- else -}}
 <link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.min.css" rel="stylesheet" {{ printf "integrity=%q" .Site.Params.cdn.css_hash | safeHTMLAttr }} crossorigin="anonymous">
+{{- end -}}
 {{- else -}}
-<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.css" rel="stylesheet">
+<link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap{{ if eq .Page.Params.direction "rtl" }}.rtl{{ end }}.css" rel="stylesheet">
 {{- end }}
 
 {{- if (ne .Page.Layout "examples") }}
author	Gaël Poupard <gael.poupard@orange.com>	2020-06-09 16:44:20 +0300
committer	XhmikosR <xhmikosr@gmail.com>	2020-12-04 08:52:03 +0300
commit	aaff11a0b321e7c1b93c089e709ee92d01a4b6f6 (patch)
tree	7b5987eba9ddb8ae0f72e1b3e6edfe396770450f /site/layouts
parent	9488978fb55286ba83e8193a871d1ff9815045b9 (diff)