Introduction

How to get started with Djain!

Bootstrap 4 version is the most popular css framework in which we have a lot of components. You can create a template using it, apart from this, we have made a lot of sections in it and web pages.

Components

We have also made many components which are available in unique design in themselves. By using these components, you can make your work easy and fast go to Components

Dev setup

Follow the steps given below to setup your project

1. Make sure you have Node installed since Djain uses npm to manage dependencies. If you don't, installing is quite easy, just visit the Node js and install it.
2. Unzip Djain theme and open your command line, making sure your command line prompt is at the root of the unzipped theme directory.
3. npm install gulp-cli -g: If you do not have the Gulp command line interface, you have to install it.
4. npm install: Open your command line to the root directory of Djain unzipped theme and run to install all of Djain's dependencies.

Compiling

You can use and manage gulp Djain development. just open your command line to the root directory of the theme to use the following commands:

• gulp: You can compile the SCSS/JS/HTML, use Live Reload to update any browsers instantly, start a local server and pop a tab in your default browser such as internet explorer. Any changes made to the source files will be compiled.
• gulp build: You can see generates all files a /dist directory with all the output files

File Structure

• 📁 dist - Generated output files
• 📁 node_modules - Directory where npm installs dependencies.
• 📁 src
  • 📁 assets
    • 📁 css - Compiled CSS
    • 📁 images - All images
    • 📁 js - Javascript source files
    • 📁 php - php contact file
    • 📁 scss - SCSS source of Djain theme
    • 📁 webfonts - Open Sans web font
  • 📁 documantaion - Documentation pages
  • 📁 html - All HTML Files
  • 📁 partials - All HTML partials Files
• 📄 gulpfile.js - All the build commands
• 📄 package.json - List of dependencies and npm information
• 📄 .gitignore - Hide all unnecessary files from Git

Gulp file includes

The gulp-file-include package is used to make partials easier to use for initial development. For Djain, we only use it for a handful of components that are found on most pages. The following partials are available:

Easily create new .html partials inside the /partials folder and point to them from any file by specifying the path to the partial file and using the @@include keyword in your HTML pages.

• head.html
  @@pageTitle (string) - Parameter for the page title
• preloader.html
• nav.html
• top-scroll.html
• script.html

Please read the official gulp file include documentation for more info.

Customizing SCSS

There are two simple ways to customize Djain theme.

1. Customizing SCSS. This is more flexible and feasible approach to tweak Djain, yet requires the gulp gathering steps plot above. The 2 significant advantages of this methodology are utilizing variable abrogates to handily redo subject styles, in addition to you never need to contact Bootstrap or Djain's source, which means future updates will be a whole lot, less difficult. There are 2 given documents that make this methodology easy to execute:
   • theme.min.scss: This file can be used to override Bootstrap core and Djain variables for customizing elements that have been tied to variables.
   • theme.scss: This file can be used for writing custom SCSS that will be compiled alongside Bootstrap and Djain's core files.
2. Compiled CSS. If you plan on using Djain "as is", or only need limited customization, feel free to simply attach the compiled theme.css or theme.min.css file in the dist/assets/css directory.