Getting Started

Build tools

Get started by following these steps:

  1. Download and install the stable version of Node.js (LTS). If you already have installed Node, skip this step.
  2. Install Gulp if you do not have it npm install --global gulp-cli.
  3. Install Pinegrow web editor to edit page templates and components, this step is optional.
  4. Open the terminal and navigate to the project folder and run npm install to install all the packages needed.
  5. Running gulp or gulp watch will compile the theme, copy all required files to the assets directory, and will open a browser window to view your site. Or you can run gulp build to compile files without starting local webserver.

File structure

  • dist - Production files
    • assets
      • css - Compiled CSS
        • trialindubai.css
        • trialindubai.min.css
      • js - Javascript
        • trialindubai.js
        • trialindubai.min.js
      • media - Images and logos
      • vendor - Third party plugins
    • docs - Documentation pages
    • rtl - Pages (RTL)
    • articles.html
    • index.html
    • ...
  • src - Source files
    • css - Compiled CSS
    • html - Pages
      • docs - Documentation pages
      • rtl - Pages (RTL)
      • articles.html
      • index.html
      • ...
    • js- Javascript source
      • trialindubai.js
    • media - Images and logos
    • pinegrow - Master pages and components
    • scss - SCSS source for theme
      • bootstrap - Bootstrap SCSS
      • custom - Your styling
      • trialindubai - Trial In Dubai styling
      • vendor - Third party plugins styling
      • trialindubai.scss
    • vendor - Third party plugins
  • package.json - List of dependencies and npm information
  • gulpfile.js - Build tasks

Starter template

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Primary Meta Tags -->
    <title>Home | TRIAL IN DUBAI</title>
    <meta name="description" content="Page description.">
    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="assets/media/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/media/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/media/favicons/favicon-16x16.png">
    <link rel="manifest" href="assets/media/favicons/site.webmanifest">
    <link rel="mask-icon" href="assets/media/favicons/safari-pinned-tab.svg" color="#e69b2a">
    <link rel="shortcut icon" href="assets/media/favicons/favicon.ico">
    <meta name="msapplication-TileColor" content="#e69b2a">
    <meta name="msapplication-config" content="assets/media/favicons/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://trialindubai.org/page.html">
    <meta property="og:title" content="Home | TRIAL IN DUBAI">
    <meta property="og:description" content="Page description.">
    <meta property="og:image" content="../assets/media/meta-images/meta-image.png">
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://trialindubai.org/page.html">
    <meta property="twitter:title" content="Home | TRIAL IN DUBAI">
    <meta property="twitter:description" content="Page description.">
    <meta property="twitter:image" content="../assets/media/meta-images/meta-image.png">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Noto+Sans+Arabic:wght@100;200;300;400;500;600;700;800;900&family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <!-- Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/trialindubai.min.css">
  </head>
  <body>
    <!-- Page wrapper -->
    <div class="wrapper">
      <h1>Hello, world!</h1>
    </div>
    <!-- Core JS -->
    <script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Vendor JS -->
    <script src="assets/vendor/choices.js/public/assets/scripts/choices.min.js"></script>
    <script src="assets/vendor/dropzone/dist/dropzone-min.js"></script>
    <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
    <!-- Theme JS -->
    <script src="assets/js/trialindubai.min.js"></script>
  </body>
</html>

RTL

This is what needs to be changed.

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    ...
    <!-- Primary Meta Tags -->
    <title>الرئيسية | محاكمة في دبي</title>
    <meta name="description" content="شرح الصفحة.">
    ...
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://trialindubai.org/page.html">
    <meta property="og:title" content="الرئيسية | محاكمة في دبي">
    <meta property="og:description" content="شرح الصفحة.">
    <meta property="og:image" content="../assets/media/meta-images/meta-image-ar.png">
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://trialindubai.org/page.html">
    <meta property="twitter:title" content="الرئيسية | محاكمة في دبي">
    <meta property="twitter:description" content="شرح الصفحة.">
    <meta property="twitter:image" content="../assets/media/meta-images/meta-image-ar.png">
    ...
    <!-- CSS -->
    <link rel="stylesheet" href="../assets/css/trialindubai.rtl.min.css">
  </head>
  ...
</html>

Customization

There are two ways to customize Trial In Dubai Theme. Customizing SCSS or using CSS.

  1. Customizing SCSS. In the src/scss/custom folder there are two files:

    • _variables.scss to add your variables.
    • _styles.scss to add your styles.

    Feel free to create or modify your variables and styles, edit and compile these two files to extend and override Trial In Dubai Theme variables and styles with your custom ones.

    Read more about bootstrap customization: Customize · Bootstrap v5.1

  2. CSS overrides. Create a custom.css file in the assets/css folder and reference it after the trialindubai.min.css in the <head> of your pages. 

    <link rel="stylesheet" href="assets/css/trialindubai.min.css">
<link rel="stylesheet" href="assets/css/custom.css">

    Then add your CSS rules in the custom.css file to override Trial In Dubai Theme styles.

Documentation