Thank you for purchasing Titan, a template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 4. If you are unfamiliar with Bootstrap, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Titan and provide a consistent look throughout the template.
Before you start working with the template, we suggest you to go through the pages that are bundled with the template.This documentation contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.
Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or problems with this template please use Envato Marketplace contact form on our profile or email us at support@urbanui.com
Titan is a fully responsive and customizable template suitable for admin dashboards. Titan contain almost all components required for this purpose.
Titan is based on bootstrap 4, the world's most popular responsive css framework.
Titan is built with Sass. Sass compiler makes it easier to code and customize. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
You can directly use the compiled and ready-to-use version of the template. But in case you plan to customize Titan extensively, the template allows you to do so!
The downloaded package will have the following structure.
The vendor files are added as npm packages and bower packages for reducing the file sizes and easier version update of the vendors. Inorder to access the properties of vendors, you have to just run two commands and all the vendor files are inside your node_modules and bower_components folder!.
To do this, you must have node, npm and bower installed in your computer.
If you have installed them, just checkout to the root folder and run the following commands.
Now, you can open the index.html file in a browser and you are ready to go.
In case you wish to customize the styles you may do it by modifying .scss files provided in the 'scss' folder. More details on this is provided in the next section.
In case you plan to customize the template extensively, you can make changes to .scss files. We use the gulp task manager for the build processes. Gulp will watch for changes to .scss files and automatically compile the files to CSS. For this you need to install Gulp. Use of this tool is completely optional and only required if you want to modify the .scss files.
To get started you will need to install the following items
You can use several tools to install Ruby. Follow instructions here for installing Ruby.
If you are using windows you will have to install Ruby, the Ruby Installer is pretty painless, be sure to check the “Add Ruby executable to your PATH” option.
To install Sass on your computer, simply follow the instructions on the sass-lang.com website.
You can download Node.js from here. Npm comes bundled with Node.js
Getting started with gulp is pretty simple. The Gulp site is a great place to get information on installing Gulp if you need more information.
You need to first install Gulp using the below command
This installs the Gulp commandline interface globally to your machine so that you can access it.
The other thing that gulp requires, which, is really what does all the work, is the gulpfile.js. In this file you set up all of your tasks that you will run.
Don't worry. We have this file already created for you.
Before you start modifying .scss files, make sure that you go to the root folder of the template and run the following command
This will start the file watch by gulp and whenever a file is modified .scss files will be compiled to create the css file
We have provided a bunch of layout options for you with a single class change! You can use the following classes for each layouts.
| Layout | Class |
|---|---|
| Compact menu | sidebar-mini |
| Icon menu | sidebar-icon-only |
| Hidden menu (togglable) | sidebar-hidden |
| Absolute menu | sidebar-absolute, sidebar-hidden |
| Fixed menu | sidebar-fixed |
| Boxed layout | boxed-layout |
| Rtl layout | rtl |
| Dark sidebar | sidebar-dark |
The below snippet shows the basic html structure of titan admin. Please note that all the stylesheets and script files in the below snippet should be included to render titan styles.
Clipboard, a modern approach to copy text to clipboard
Add the following script files in <body>
To create a ,add the following code
We are using sweetalert in our template to create beautiful alert messages.
To use sweetalert in your appication, include the following files in <head>
Add the following script files in <body>
To create a simple alert, add the following code
We are using Jquery Toast Plugin in our template for creating toast notifications.
To use Jquery Toast Plugin in your appication, include the following files in <head>
Add the following script files in <body>
To create a simple success toast, add the following code
Owl Carousel is a touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
To use Owl Carousel in your appication, include the following files in <head>
Add the following script files in <body>
To create a carousel, add the following code
Chartjs is a simple yet flexible JavaScript charting for designers & developers.
To use chartjs in your appication, include the following files in <head>
and the following script files in <body>
To create a simple chart, add the following code
Float Js is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.
Add following script files in <body>
To create a simple chart, add the following code
Chartist creates simple responsive charts
To use chartist in your appication, include the following files in <head>
Add the following script files in <body>
To create a simple line chart using chartist, add the following code
Jquery sparkline generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
To use sparkline in your appication, add the following script files in <body>
To create a line chart using sparkline, add the following code
To create a basic twitter bootstrap table, add the following code
Js-grid creates simple responsive chartsis a lightweight client-side data grid control based on jQuery.
To use Js-grid in your appication, include the following files in <head>
Add the following script files in <body>
To create a basic table using Js-grid, add the following code
Font awesome gives you scalable vector icons that can instantly be customized.
To use font awesome in your appication, include the following files in <head>
To create an address-book icon, add the following code
Themify icons Themify Icons is a complete set of icons for use in web design and apps.
To use themify icons in your appication, include the following files in <head>
To generate an icon, add the following code
Flag icons is a A collection of all country flags in SVG — plus the CSS for easier integration.
To use simple line icons in your appication, include the following files in <head>
To generate an icon, add the following code
jVectorMap uses only native browser technologies like JavaScript, CSS, HTML, SVG or VML.
To use Vector map in your appication, include the following files in <head>
Add the following script files in <body>
To create a simple map, add the following code
The basic form elements can be added to your application as below
We are using Jquery steps in our template to create form wizard. It is an all-in-one wizard plugin that is extremely flexible, compact and feature-rich.
To use jquery.steps in your appication, include the following files <body>
The following code generates a simple form wizard
X-editable allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes.
To use x-editable in your appication, include the following files in <head>
Add the following script files in <body>
To create a simple editable text field, add the following code
Typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads
To use typeahead.js in your appication, include the following files in <body>
A sample typeahead can be generated as below
We are using Jquery validation for simple clientside form validation.
To use jquery validation in your appication, include the following script files in <body>
The following code shows validation of a simple form
Bootstrap MaxLength uses a Twitter Bootstrap label to show a visual feedback to the user about the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.
Add the following script files in <body>
To create a Maxlength input, add the following code
Icheck is a set of highly customizable checkboxes and radio buttons.
To use icheck in your appication, include the following files in <head>
Add the following script files in <body>
The following code gives a minimal skin checkbox and radio using icheck.
Cropper is a simple jQuery image cropping plugin.
To use cropper in your appication, include the following files in <head>
Add the following script files in <body>
To crop an image using cropper, add the following code
jQuery Clock Picker is a clock-style timepicker for Bootstrap.
To use clock picker in your appication, include the following files in <head>
Add the following script files in <body>
To create a clock picker,add the following code
Bootstrap Date Picker provides a flexible datepicker widget in the Bootstrap style.
To use bootstrap date picker in your appication, include the following files in <head>
Add the following script files in <body>
To create a color picker,add the following code
AsColor Picker is a jquery plugin that convent input into color picker.
To use color picker in your appication, include the following files in <head>
Add the following script files in <body>
To create a color picker,add the following code
Dropify is a simple drag n drop file upload.
To use dropify in your appication, include the following files in <head>
Add the following script files in <body>
To create a Dropify file upload,add the following code
Dropzone is an open source library that provides drag’n’drop file uploads with image previews.
Add the following script files in <body>
To create a Dropzone file upload, add the following code
jQuery File UPload plugin provides Multiple file uploads with progress bar. jQuery File Upload Plugin depends on Ajax Form Plugin, So Github contains source code with and without Form plugin.
To use file upload in your appication, include the following files in <head>
Add the following script files in <body>
To create a Jquery file upload,add the following code
Tinymce is a full featured web editing tool.
To use tinymce in your appication, include the following files in <body>
To create an editor using tinymce, add the following code
Summernote is a super simple WYSIWYG Editor.
To use summernote in your appication, include the following files in <head>
Add the following script files in <body>
To create a summernote editor, add the following code
Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate.
To use ace editor in your appication, include the following files in <body>
To create a code editor using ace with a sample code, add the following code
CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with a number of language modes and addons that implement more advanced editing functionality.
To use CodeMirror in your appication, include the following files in <head>
Add the following script files in <body>
Here is an example of an editor using CodeMirror.
We provide you with a sample template for inbox that can help you organize your messages.
To use our custom made inbox application, add the following script files in <body>
The markup for our custom inbox is given below. Insert this code as our content-wrapper inside the basic template structure provided.
FullCalendar is a customizable and open source JavaScript event calendar.
To use FullCalendar in your appication, include the following files in <head>
Add the following script files in <body>
To create a calendar, add the following code