Docs 2.0
January 24, 2018

Thank you very much for your purchase!

Would you like stay up to date about our projects?

Subscribe to our news

Changelog

  • New Features
    • Bootstrap 4.0 Final Stable version integration
    • 6 Get Started Pages
      • Backend Classic
      • Backend Clean
      • Backend Social
      • Backend Corporate
      • Backend Minimal
      • Backend Pop
    • 4 Crypto Pages
      • Dashboard
      • Buy/Sell
      • Wallets
      • Settings
    • Font Awesome 5 Support
      If you would like to enable the new icons, just uncomment @import 'vendor/font-awesome5'; and comment @import 'vendor/font-awesome'; lines in scss/main.scss. After compiling to CSS, you will be able to use them. Be sure to also check out Font Awesome Migration Guide for any icon name changes you might have to apply in your own pages.
  • Improvements
    • Themed block options styles now work even if they are added in a .block-content and not only in .block-header of a .block
    • Hand cursor is now used when hovering over block option buttons to follow Bootstrap 4 approach
  • Fixes
    • body { text-align: right; } was added in RTL example pages in Get Started version
    • Button groups toggle styles fixed
    • uiHelperNotify() helper for Bootstrap Notify plugin was updated accordingly to support Bootstrap 4 grid classes and display notifications correctly on mobiles
    • .btn-noborder hover and focus styles were fixed
    • .fa-li class (used for icon lists) position fixed
  • Updates
    • Bootstrap 4.0 Final Stable (Beta 2)
    • Popper 1.12.9 (1.12.3)
    • FullCalendar 3.8.0 (3.7.0)
    • MomentJS 2.20.1 (2.19.3)
    • SweetAlert2 7.4.1 (6.11.5)
    • CropperJS 1.2.2 (1.1.3)
    • DropzoneJS 5.3.0 (5.2.0)
    • CKEditor 4.8.0 (4.7.3)
  • Markup Changes
    • We are now including only js/core/bootstrap.bundle.min.js from the core files instead of including js/core/bootstrap.min.js and js/core/popper.min.js separately
    • (BS4 breaking change) Custom file input markup changed
    • (BS4 breaking change) Custom input controls (checkboxes & radios) markup changed
    • (BS4 breaking change) Input groups markup changed (.input-group-btn & .input-group-addon are now deprecated in favor of the new .input-group-prepend, .input-group-prepend & .input-group-text classes). Codebase’s material input groups are also updated to reflect those changes.
    • For more details please also check Bootstrap 4 Stable Changes and Bootstrap 4 Beta 3 Breaking Changes (they also apply because we are upgrading from Beta 2)

Updating to the new 2.0 version is easy but if you need any assistance do not hesitate to contact us! :-)

  • New Features
    • 3 e-Learning Pages
      • Courses
      • Course
      • Lesson
    • Scrum Board Page
    • Summernote Editor
  • Improvements
    • slidesToScroll option was added to Slick Plugin Helper and can be set with data-slides-to-show attribute
  • Fixes
    • Themed block options fixed when nested blocks are used
  • Updates
    • Bootstrap 4 Beta 2 (Beta 1)
    • Select2 4.0.5 (4.0.4)
    • FullCalendar 3.7.0 (3.6.1)
    • MomentJS 2.19.3 (2.19.1)
    • CropperJS 1.1.3 (1.1.1)
    • SweetAlert2 6.11.5 (6.10.3)
    • JS Cookie 2.2.0 (2.1.2)
    • jQuery Raty 2.8.0 (2.7.1)
    • CKEditor 4.7.3 (4.7.2)
    • Popper 1.12.3 (1.10.8)
  • Markup Changes
    • Class pos-relative updated to position-relative
    • Class pos-absolute updated to position-absolute
    • Class thead-default updated to thead-light (BS4 Beta 2)
    • Class thead-inverse updated to thead-dark (BS4 Beta 2)
    • Progress Mini markup updated a bit (please check Activity page) (BS4 Beta 2)
    • Bootstrap 4 Beta 2 breaking changes

Updating to the new 1.4 version is easy but if you need any assistance do not hesitate to contact us! :-)

  • New Features
    • 3 Dashboard Pages
      • Dashboard 2
      • Dashboard 3
      • Dashboard 4
    • 8 Authentication Pages
      • Sign In 2
      • Sign In 3
      • Sign Up 2
      • Sign Up 3
      • Password Reminder 2
      • Password Reminder 3
      • Lock Screen 2
      • Lock Screen 3
    • Todo Page
  • Improvements
    • Inverse style for block loading mode with block-mode-loading-inverse class (showcased in Dashboard 2 page)
  • Updates
    • Chart.js 2.7.0 (2.6.0)
    • DataTables 1.10.16 (1.10.15)
    • DropzoneJS 5.2.0 (5.1.1)
    • Select2 4.0.4 (4.0.3)
    • FullCalendar 3.6.1 (3.5.1)
    • MomentJS 2.19.1 (2.10.5)
    • CropperJS 1.1.1 (1.0.0)
    • Slick 1.8.1 (1.7.1)
    • SweetAlert 6.10.3 (6.6.10)

Updating to the new 1.3 version is easy but if you need any assistance do not hesitate to contact us! :-)

The first big Codebase update is here bringing you lots of new pages and features! We hope you are as excited as we are! Stay tuned for more updates in the future and happy coding! ;-)

PS: Unfortunately, we also had to remove the frontend page examples as per Envato's request. We did the best we could to explain that Codebase is a UI framework which reuses the same resources to build all kind of layouts and does not bundling different templates but to no avail. The good news is that you can still use the frontend pages you've already downloaded without any issues since they are using the same resources as the backend does.

  • New Features
    • Boxed Dashboard
      • Dashboard
      • Search
      • 10 Hero Variations Pages
    • eCommerce Pages
      • Dashboard
      • Orders
      • Order
      • Products
      • Product Edit
      • Customer
    • Backend Generic Pages
      • Blog
      • Story
      • Project List
      • Project
      • Upgrade Plan
      • Team
      • Contact
    • Chat Component
    • Form Wizard
    • Image Cropper
  • Improvements
    • The glass fixed header variation now gets its background color if the page is refreshed and the page is already scrolled down
    • link-effect class now works only on bigger screen widths
    • row-deck class now applies to 'block' classes and not to generic divs
  • Updates
    • FullCalendar 3.5.1 (3.4.0)
    • CKEditor 4.7.2 (4.7.1)
    • Slick 1.7.1 (1.6.0)
    • jQuery Validation 1.17.0 (1.16.0)
    • SweetAlert 6.6.10 (6.6.5)
  • Fixes
    • Line height of dropdowns is now fixed if used inside content-heading
    • Removed border radius of block-rounded blocks which are in fullscreen mode
  • Markup/File Changes
    • col-lg-4 was changed to col-xl-4 in op_auth_* pages
    • bg-fe-pattern.png renamed to bg-pattern.png in assets/img/various/
    • bg-fe-pattern-inverse.png renamed to bg-pattern-inverse.png in assets/img/various/
    • fe-project-promo*.png images renamed to cb-project-promo*.png in assets/img/various/
    • fe-promo*.png images renamed to cb-promo*.png in assets/img/various/

Updating to the new 1.2 version is easy but if you need any assistance do not hesitate to contact us! :-)

Bootstrap 4 Beta version was officially released today, so we took the chance and quickly updated Codebase! There is no need to change anything in your markup since all breaking changes from Alpha 6 were already implemented in Codebase since its release! Stay tuned for rich content & features updates in the near future as we are working on them! Happy coding! ;-)

  • Updates
    • Bootstrap 4 Beta (development beta was used)

Updating to the new 1.1 version is easy but if you need any assistance do not hesitate to contact us! :-)

1.0 Release July 25, 2017

Updating

Codebase will receive many free updates in the future adding many new awesome features, new fresh pages as well as third-party plugin upgrades. One of the main goals was to make sure the update progress is going to be as easy as possible. Due to its nature (template), updating can become an unpleasant task.

Therefore we've included a folder (01 - Codebase Get Started) in the package which we encourage you to use in your project. It contains all vital framework files minimized and ready to use in production. This way you will be able to update Codebase just by replacing the assets/ folder with the new one. If there is an important markup change that you will also have to make in your HTML, don't worry, since we will mention it in the changelog.

Feel free to make any overrides in other files or even export your own assets/ folder from the main versions (HTML/PHP) using Gulp tasks. Just make sure that any additions will be made in your own (eg Sass) files, so is easier for you to upgrade framework’s files when an update is made available.

To help you out, we’ve already included a file in the scss folder where you can add your own styles or overwrite any existing ones. It can be found in scss/vendor/_custom.scss.

In general, the following core folders/files will have to be updated with each update:

  • fonts/*
  • css/
    • themes/*
    • codebase.css
    • codebase.min.css
  • js/
    • plugins/*
    • codebase.min.js

If you are using the PHP or HTML version (they both use the original full files), then the following core folders/files will have to be updated:

  • fonts/*
  • scss/* (with the exception of vendor/_custom.scss)
  • css/
    • themes/*
    • codebase.css
    • codebase.min.css
  • js/
    • core/*
    • plugins/*
    • codebase.js

Moreover, if you are using Gulp, remember to update the following files in your project’s root folder and then run the following command from your console npm install to install/update any new dependencies related to Gulp tasks:

  • Gulpfile.js
  • package.json

Remember that it’s always a good idea to backup your work before updating to a new version!

When a new update becomes available, you will be able to download it from Themeforest. You can check the checkbox under the product ( Get notified by email if this item is updated), follow us on Twitter or subscribe to our news to stay up to date about the availability of new updates.

Package

Codebase is the result of hundreds of hours of design and development. It was built with extra care based on the valuable feedback we’ve received the past 5 years working full-time on Themeforest products. It follows the best practices using the latest technologies and we really hope that you will enjoy working with it.

Codebase will enable you to build fast, beautiful, user friendly web applications and websites that will work seamlessly across various screens and devices. It will be a valuable tool that will help you create the product that will provoke the emotions and credibility you want for your business.

Let's have a look at the contents of the current package:

  • 01 - Codebase Get Started

    Includes vital framework files minimized and ready for production. Moreover, in here you will find 6 boilerplate pages (backend, boxed backend and landing - plus their RTL versions) to get you started. It is encouraged to start your project with the assets/ folder from this version, so that is easier to update the framework in the future.

  • 02 - Codebase Source (HTML)

    Includes the abstract HTML version. This version can be used with any server side language/framework you prefer or currently working with.

  • 03 - Codebase Source (PHP)

    Includes the abstract PHP version. This version can come really handy as a starting point if you would like to build a custom PHP application. It can help you in many ways:

    • It enables you to change various options of the layout just by updating the main variables found in src/inc/_global/config.php. Each template section (eg Backend/Backend Boxed) has also its own folder with its own config file which can be used to overwrite the main variables of your choice for the pages in that section. For example, the extra config file for Backend pages can be found in src/inc/backend/config.php.
    • It uses basic templating for separating common used code (header, sidebar, footer etc). The main views which are used in every page can be found in src/inc/_global/views/*. Each template section (eg Backend/Backend Boxed) also has its own folder with its own views which can be used for common code, used only in the pages in that section. For example, the extra views for Backend pages can be found in src/inc/backend/views/*.
    • It features a recursive function that can build main navigation on the fly (with as many levels as you like - up to 3 for the horizontal header navigation) from a multidimensional array you can set in the config file of each section.
    • It features various functions that can populate your pages with dummy content for testing and showcasing purposes src/inc/_classes/Template.php
    • In general, this version can give you a good idea of how you could implement your own templating in the language/framework of your choice.
  • Documentation

    Obviously, includes current documentation which by the way uses Codebase framework :-)

You don’t have to use Node.js or Gulp with the source code if you don't like. You can ignore Gulpfile.js and package.json and work directly with the files found in the src/ folder of each version. In that case, if for example you would like to work with and compile the Sass files or minimize other files, you will just have to use your own compiling method or tasks.

Bootstrap 4

Bootstrap is the world's most popular front-end component library. It is easy to use and offers a large variety of CSS as well as JavaScript components. Codebase uses this framework at its core and builds on top its unique layout and features. It redesigns/extends the original components and introduces new ones, featuring a modern and clean design.

If you are unfamiliar with the framework, its official website will help you out a lot but if you just want to start quickly, you can easily replicate any feature or component we already present in Codebase pages. If you find a feature in the official Bootstrap Docs you would like to use, feel free to, since they are almost all available in Codebase.

Please have in mind that by default we don’t include the navbar, card, jumbotron and carousel components since we use our own but you can easily include them if you need them by uncommenting them in scss/main.scss and re-compiling to CSS.

Gulp Tasks

Gulp is a JavaScript Task Runner. It enables you to automate repetitive tasks like minification, compilation, unit testing, linting, etc, which makes your life easier. In Codebase, we have included a Gulp file which can help you live compile Sass files and add additional vital browser prefixes to your CSS styles while you work. It also enables you to export your own custom, minimized and production ready Codebase framework. To use it with the source code (HTML or PHP version), you will first have to:

  1. Download and install Node.js

  2. Install gulp-cli globally by running the command npm install -g gulp-cli in your system’s console

  3. Install all required plugins in your project’s folder by running the command npm install in your system’s console - You will have to run it from your project’s root folder which will include src/ folder, Gulpfile.js and package.json files.

After you’ve successfully completed the previous steps, you will be able to run the following commands in your system’s console from your project’s root folder:

Command Description
gulp

It will constantly watch for any changes made to the Sass files (src/assets/scss/*) and will auto compile to CSS (src/assets/css/*) every time a change is made. After compilation, it will also auto add any required browser prefixes, so you don’t have to!
gulp build

It will prepare and build your custom, minimized and production ready Codebase framework. After it completes, you will be able to find it under a new dist/ folder in your project’s root folder. The same command is used for building the assets/ folder found in 01 - Codebase Get Started folder.

HTML

Codebase features a super flexible, smart and powerful layout which can be used to create dashboard and website pages with minimum effort using the same resources. In the Get Started folder, you will be able to find 3 boilerplate templates (backend, boxed backend and landing) which highlight how easy is to create your own pages.

The layout offers many options which can be enabled just by adding or removing a class in the #page-container element. If you play around with the PHP version, you will be able to set these options from the src/inc/_global/config.php file.

Let’s have a quick look at the generic HTML structure and get familiar with the layout:

<!doctype html>
<!--[if lte IE 9]>     <html lang="en" class="no-focus lt-ie10 lt-ie10-msg"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en" class="no-focus"> <!--<![endif]-->
    <head>
        <!-- Title and Meta -->
        ...
        <!-- END Title and Meta -->

        <!-- Icons -->
        <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
        ...
        <!-- END Icons -->

        <!-- Stylesheets -->
        <!-- Page JS Plugins CSS go here -->

        <!-- Codebase framework -->
        <link rel="stylesheet" id="css-main" href="assets/css/codebase.min.css">

        <!-- You can include a specific file from css/themes/ folder to alter the default color theme of the template. eg: -->
        <!-- <link rel="stylesheet" id="css-theme" href="assets/css/themes/flat.min.css"> -->
        <!-- END Stylesheets -->
    </head>
    <body>
        <!-- Page Container -->
        <!--
            Available classes for #page-container:

            GENERIC

                'enable-cookies'                            Remembers active color theme between pages (when set through color
                                                            theme helper Codebase() -> uiHandleTheme())

            SIDEBAR & SIDE OVERLAY

                'sidebar-r'                                 Right Sidebar and left Side Overlay (default is left Sidebar and right Side Overlay)
                'sidebar-mini'                              Mini hoverable Sidebar (screen width > 991px)
                'sidebar-o'                                 Visible Sidebar by default (screen width > 991px)
                'sidebar-o-xs'                              Visible Sidebar by default (screen width < 992px)
                'sidebar-inverse'                           Dark themed sidebar

                'side-overlay-hover'                        Hoverable Side Overlay (screen width > 991px)
                'side-overlay-o'                            Visible Side Overlay by default

                'side-scroll'                               Enables custom scrolling on Sidebar and Side Overlay instead of native
                                                            scrolling (screen width > 991px)

            HEADER

                ''                                          Static Header if no class is added
                'page-header-fixed'                         Fixed Header

            HEADER STYLE

                ''                                          Classic Header style if no class is added
                'page-header-modern'                        Modern Header style
                'page-header-inverse'                       Dark themed Header (works only with classic Header style)
                'page-header-glass'                         Light themed Header with transparency by default
                                                            (absolute position, perfect for light images underneath - solid light background
                                                            on scroll if the Header is also set as fixed)
                'page-header-glass page-header-inverse'     Dark themed Header with transparency by default
                                                            (absolute position, perfect for dark images underneath - solid dark background
                                                            on scroll if the Header is also set as fixed)

            MAIN CONTENT LAYOUT

                ''                                          Full width Main Content if no class is added
                'main-content-boxed'                        Full width Main Content with a specific maximum width (screen width > 1200px)
                'main-content-narrow'                       Full width Main Content with a percentage width (screen width > 1200px)
            -->
        <div id="page-container">
            <!-- Side Overlay-->
            <aside id="side-overlay">
                ...
            </aside>
            <!-- END Side Overlay -->

            <!-- Sidebar -->
            <nav id="sidebar">
                ...
            </nav>
            <!-- END Sidebar -->

            <!-- Header -->
            <header id="page-header">
                ...
            </header>
            <!-- END Header -->

            <!-- Main Container -->
            <main id="main-container">
                ...
            </main>
            <!-- END Main Container -->

            <!-- Footer -->
            <footer id="page-footer">
                ...
            </footer>
            <!-- END Footer -->
        </div>
        <!-- END Page Container -->

        <!-- Codebase Core JS -->
        <script src="assets/js/codebase.min.js"></script>

        <!-- Page JS Plugins + Page JS Code -->
    </body>
</html>

As you can see, we kept the HTML structure as simple as possible, so we hope that you find it easy to understand and implement in your own pages. Furthermore, have in mind that you can remove #side-overlay, #sidebar, #page-header or #page-footer markup if you would like to not have them in some of your pages. Everything will work as expected, just make sure that you don’t use any related classes (to the element you removed) in #page-container.

Sass

Codebase was built with Sass using the latest SCSS syntax. It is a powerful CSS pre-processor which extends the CSS language, adding features that allow variables, mixins, functions and many other techniques, enabling you to make CSS that is more maintainable and extendable.

If you would like to extend the framework and add your own styles or UI components, feel free to use the Sass files included in the source (HTML and PHP version) under src/assets/scss/* folder. You can also use the included Gulp tasks to auto compile to CSS every time you make a change (any required browser prefixes will be auto added after compilation, so you don’t have to).

It is highly recommended though, to use the custom file we created for you to add your own styles and make the updating process easier. It can be found in scss/vendor/_custom.scss.

Let’s have a better look at the Sass files structure:

bootstrap/

Includes all original unaltered Bootstrap 4 Sass files. The concept is to never touch those files, so that a framework update is possible.

codebase/

Includes all Codebase Sass files which follow the structure Bootstrap 4 uses. All Bootstrap 4 overrides can also be found in here (variables/mixins/functions/styles). We basically override what we can (using the available Bootstrap 4 variables) or want (functions/mixins) to match our needs. Then we override the styles we can’t alter with variables and add our own components. This method allows us to easily update Bootstrap, resuse its features in our styles and also export a smaller main CSS file with fewer style overrides.

vendor/

Includes all third party styles (eg animation.css, fontawesome icons, simple line icons). In here, you will also find all style overrides for the integrated jQuery plugins as well as the _custom.scss file in which you can add your own styles.

main.scss

This file is compiled to the main CSS stylesheet codebase.css. From here you could easily update the compiled CSS file by commenting out the components you won’t use in your project. This way, you can achieve the smallest possible footprint for your main CSS file by only including what you need.

JavaScript

Codebase uses jQuery, Bootstrap JS framework as well as some other vital third-party jQuery plugins at its core. It also supports many more third-party plugins which you can include per page if you need them. Their style will match template’s design.

Let’s have a better look at the JavaScript file structure:

File Description
codebase.js

The main file containing all custom JS code needed for Codebase features including layout and blocks API. It also includes various helper functions which you can call per page for enabling extra features (eg Table Tools) or repetitive init code of various third party plugins.
core/*

All vital libraries and plugins can be found here. They are included in all pages and these files, along with the previous codebase.js file are put in codebase.min.js (found in Get started folder and the dist/ after running the build Gulp task)
plugins/*

All supported and integrated third-party plugins are included here. Some of them require from you to add their stylesheet as well, in the page you would like to use them (always before codebase.css for the style overwrites to work correctly).
pages/*

Custom JS code used on specific pages demonstrating the usage of various plugins and functionality.

Let’s have a better look at the core JavaScript files:

Name Helper Version Online
jQuery 3.2.1

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Popper.js 1.12.9

Popper.js is a positioning engine, its purpose is to calculate the position of an element to make it possible to position it near a given reference element. Used by various Bootstrap JS components.
Bootstrap.js 4.0

Bootstrap plugins offer extra functionality such as modals, alerts, tooltips & popovers. All plugins can be used directly in the template.

Helpers:

There are 3 available helpers for Bootstrap components: tooltips, popovers and tabs. These helpers are already called by default on load. You only must call them again if you inject new markup to the page and would like to init the related functionality on it.

// Tooltip
Codebase.helper('core-tooltip');

// Popover
Codebase.helper('core-popover');

// Tab
Codebase.helper('core-tab');

Usage (add data-* attributes to an element or use .js-* classes):

<!-- Tooltip with data-toggle -->
<button type="button" class="btn btn-primary"
                      data-toggle="tooltip"
                      data-placement="top"
                      title="Tooltip Text">
    Show Tooltip
</button>

<!-- Tooltip with class -->
<button type="button" class="js-tooltip btn btn-primary"
                      data-placement="top"
                      title="Tooltip Text">
    Show Tooltip
</button>
<!-- Popover with data-toggle -->
<button type="button" class="btn btn-primary"
                      data-toggle="popover"
                      data-placement="top"
                      title="Popover title."
                      data-content="Popover content.">
    Show Popover
</button>

<!-- Popover with class -->
<button type="button" class="js-popover btn btn-primary"
                      data-placement="top"
                      title="Popover title."
                      data-content="Popover content.">
    Show Popover
</button>
<!-- Tabs with data-toggle -->
<div class="block">
    <ul class="nav nav-tabs nav-tabs-block" data-toggle="tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" href="#home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#profile">Profile</a>
        </li>
    </ul>
    <div class="block-content tab-content">
        <div class="tab-pane active" id="home" role="tabpanel">
            <p>Home Content</p>
        </div>
        <div class="tab-pane" id="profile" role="tabpanel">
            <p>Profile Content</p>
        </div>
    </div>
</div>

<!-- Tabs with class -->
<div class="block">
    <ul class="js-tabs nav nav-tabs nav-tabs-block" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" href="#home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#profile">Profile</a>
        </li>
    </ul>
    <div class="block-content tab-content">
        <div class="tab-pane active" id="home" role="tabpanel">
            <p>Home Content</p>
        </div>
        <div class="tab-pane" id="profile" role="tabpanel">
            <p>Profile Content</p>
        </div>
    </div>
</div>
SlimScroll 1.3.8

SlimScroll transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. SlimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.

Helper:

This helper is already called by default on load. You only must call it again if you inject new markup to the page and would like to init the functionality on it.

Codebase.helper('core-slimscroll');

Usage (add data-* attributes to an element):

<div data-toggle="slimscroll">
    ..Your Content..
</div>

You can also use more options:

<div data-toggle="slimscroll"
     data-height="150px"
     data-size="8px"
     data-position="left"
     data-color="#333"
     data-opacity=".5"
     data-distance="2px"
     data-alwaysVisible="true"
     data-railVisible="true"
     data-railColor="#ccc"
     data-railOpacity=".25">
    ..Your Content..
</div>
Scroll Lock 3.1.3

Scroll Lock locks mouse wheel scroll inside container, preventing it from propagating to parent element.
jQuery Appear 1.0.0

jQuery plugin to call a function when an element appears. We use it to make an element visible on scrolling.

Helper:

This helper is already called by default on load. You only must call it again if you inject new markup to the page and would like to init the functionality on it.

Codebase.helper('core-appear');

Usage (add data-* attributes to an element and the invisible class):

<div class="invisible" data-toggle="appear">
    Content..
</div>

You can also use more options:

<div class="invisible" data-toggle="appear"
                       data-class="animated fadeInUp"
                       data-timeout="250"
                       data-offset="-100">
    Content..
</div>
CountTo 1.2.0

A jQuery plugin that will count up to a target number at a specified speed.

Helper (also uses jQuery Appear plugin):

This helper is already called by default on load. You only must call it again if you inject new markup to the page and would like to init the functionality on it.

Codebase.helper('core-appear-countTo');

Usage (add data-* attributes to an element):

<div data-toggle="countTo" data-to="100"</div>

You can also use more options:

<div data-toggle="countTo"
     data-to="100"
     data-speed="500"
     data-refresh-interval="20"
     data-before="Top"
     data-after="Sales">
</div>
JS Cookie 2.2.0

A simple, lightweight JavaScript API for handling cookies. We use it to save the active color theme client-side.

Let’s have a better look at all the other third-party plugins:

Name CSS Helper Version Online
Bootstrap Colorpicker 2.5.1

A nice and customizable colorpicker plugin for Bootstrap.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('colorpicker');
    });
</script>

Usage (add js-colorpicker class to an input):

<input type="text" class="js-colorpicker form-control" value="#db4a39">
Bootstrap Datepicker 1.7.1

A nice and customizable datepicker plugin for Bootstrap.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/bootstrap-datepicker/bootstrap-datepicker3.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('datepicker');
    });
</script>

Usage (add js-datepicker class to a text input):

<input type="text" class="js-datepicker form-control">
Bootstrap Maxlength 1.7.0

This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('maxlength');
    });
</script>

Usage (add js-maxlength class to a text input):

<input type="text" class="js-maxlength form-control" maxlength="20">
Bootstrap Notify 3.1.3

Turns standard Bootstrap alerts into "Growl-like" notifications.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/bootstrap-notify/bootstrap-notify.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('notify');
    });
</script>

Usage (add js-notify class to a button):

Used mostly for demonstrating purposes, you can check out the Activity page for more examples.
Bootstrap Wizard 1.4.2*

It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.

*We've made a few customizations to make it compatible with Bootstrap 4.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/bootstrap-wizard/jquery.bootstrap.wizard.js"></script>

Usage:

You can check out Form Wizard page under Forms section for various usage examples.
Chart.js 2.7.1

Simple, clean and engaging charts for designers and developers.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/chartjs/Chart.bundle.min.js"></script>

Usage:

You can check out Charts page for various usage examples.
CKEditor 4.8.0

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/ckeditor/ckeditor.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('ckeditor');
    });
</script>

Usage (add js-ckeditor id to a textarea or js-ckeditor-inline to a div for an inline editor):

<textarea id="js-ckeditor" name="ckeditor">Hello CKEditor!</textarea>
<div id="js-ckeditor-inline">Hello inline CKEditor!</div>
Cropper.js 1.2.2

Cropper.js is a JavaScript image cropper.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/cropperjs/cropper.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/cropperjs/cropper.min.js"></script>

Usage:

You can check out Image Cropper page under Components section for various usage examples.
DataTables 1.10.16

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/datatables/dataTables.bootstrap4.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="assets/js/plugins/datatables/dataTables.bootstrap4.min.js"></script>

Usage:

You can check out DataTables page for various usage examples.
Dropzone.js 5.3.0

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/dropzonejs/min/dropzone.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/dropzonejs/min/dropzone.min.js"></script>

Usage (add dropzone class to a form):

<form class="dropzone" action=""></form>
Easy Pie Chart 2.1.7

Easy Pie Chart is a lightweight plugin to draw simple, animated pie charts for single values.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/easy-pie-chart/jquery.easypiechart.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('easy-pie-chart');
    });
</script>

Usage (add js-pie-chart class to a div element):

<div class="js-pie-chart pie-chart"
     data-percent="25"
     data-line-width="2"
     data-size="100"
     data-bar-color="#ef5350"
     data-track-color="#e9e9e9"
     data-scale-color="#d9d9d9">
    <span>..Content..</span>
</div>
Flot Charts 0.8.3

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/flot/jquery.flot.min.js"></script>
<script src="assets/js/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="assets/js/plugins/flot/jquery.flot.stack.min.js"></script>
<script src="assets/js/plugins/flot/jquery.flot.resize.min.js"></script>

Usage:

You can check out Charts page for various usage examples.
FullCalendar 3.8.0

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop event calendar. It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format. It is visually customizable with a rich API.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/fullcalendar/fullcalendar.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/js/plugins/moment/moment.min.js"></script>
<script src="assets/js/plugins/fullcalendar/fullcalendar.min.js"></script>

Usage:

You can check out Calendar page for various usage examples.
Gmaps.js 0.4.25

The easiest way to use Google Maps.

Google Maps API now requires an API key to work correctly! To obtain your own key and be able to use them, please head over at Google and follow the instructions.

Required JS files (include after all core JS scripts):

<script src="https://maps.googleapis.com/maps/api/js?key=your-api-key"></script>
<script src="assets/js/plugins/gmapsjs/gmaps.min.js"></script>

Usage:

You can check out Maps page for various usage examples.
Highlight.js 9.12.0

JavaScript syntax highlighter.

Required CSS files (include before Codebase CSS - You can also include some other file from styles folder for alternative syntax highlighting):

<link rel="stylesheet" href="assets/js/plugins/highlightjs/styles/github-gist.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/highlightjs/highlight.pack.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('highlightjs');
    });
</script>

Usage:

You can check out Syntax Highlighting page for various usage examples. The plugin is initialized by the helper and can be used just by adding the required HTML markup.
Ion Range Slider 2.2.0

Easy, flexible and responsive range sliders.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/ion-rangeslider/css/ion.rangeSlider.min.css">
<link rel="stylesheet" href="assets/js/plugins/ion-rangeslider/css/ion.rangeSlider.skinHTML5.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('rangeslider');
    });
</script>

Usage (add js-rangeslider class to a text input):

<input type="text" class="js-rangeslider form-control" value="50">
jQuery AutoComplete 1.0.7

An extremely lightweight completion suggester plugin for jQuery.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/jquery-auto-complete/jquery.auto-complete.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/jquery-auto-complete/jquery.auto-complete.min.js"></script>

Usage:

You can check out Form Plugins page for a usage example.
jQuery Countdown 2.2.0

The Final Countdown plugin for jQuery.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/jquery-countdown/jquery.countdown.min.js"></script>

Usage:

You can check out Coming Soon page for usage example.
jVectorMap 2.1.0

Vector Maps component.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/jquery-jvectormap/jquery-jvectormap.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/jquery-jvectormap/jquery-jvectormap.min.js"></script>
<script src="assets/js/plugins/jquery-jvectormap/maps/__map-file__.js"></script>

Usage:

You can check out Vector Maps page for various usage examples.
jQuery Raty 2.8.0

A star rating plugin.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/jquery-raty/jquery.raty.min.js"></script>

Usage:

You can check out Rating page under Components for various usage examples.
jQuery Tags Input 1.3.6

Magically convert a simple text input into a cool tag list with this jQuery plugin.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/jquery-tags-input/jquery.tagsinput.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/jquery-tags-input/jquery.tagsinput.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('tags-inputs');
    });
</script>

Usage (add js-tags-input class to a text input):

<input type="text" class="js-tags-input form-control" value="HTML, CSS, JavaScript">
jQuery Validation 1.17.0

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="assets/js/plugins/jquery-validation/additional-methods.min.js"></script>

Usage:

You can check out Form Validation page for various usage examples.
Magnific Popup 1.1.0

Light and responsive lightbox script with focus on performance.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/magnific-popup/magnific-popup.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/magnific-popup/magnific-popup.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('magnific-popup');
    });
</script>

Usage (with js-gallery class):

You can check out Image Gallery pages for various usage examples.
jQuery Masked Input 1.4.1

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates, phone numbers, etc).

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/masked-inputs/jquery.maskedinput.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('masked-inputs');
    });
</script>

Usage (the helpers inits various classes to work with):

You can check out Form Plugins page for various usage examples.
Select2 4.0.5

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/select2/select2.min.css">
<link rel="stylesheet" href="assets/js/plugins/select2/select2-bootstrap.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/select2/select2.full.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('select2');
    });
</script>

Usage (add js-select2 class to a select element):

<select class="js-select2 form-control" style="width: 100%;" data-placeholder="Choose one..">
    <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
    <option value="1">HTML</option>
    <option value="2">CSS</option>
    <option value="3">Javascript</option>
    <option value="4">PHP</option>
    <option value="5">MySQL</option>
    <option value="6">Ruby</option>
    <option value="7">Angular</option>
    <option value="8">React</option>
    <option value="9">Vue.js</option>
</select>
Summernote 0.8.8

Summernote is a JavaScript library that helps you create WYSIWYG editors online.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/summernote/summernote-bs4.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/summernote/summernote-bs4.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('summernote');
    });
</script>

Usage (add js-summernote or js-summernote-air (for an inline editor) class to a div element):

<div class="js-summernote">Hello Summernote!</div>

<div class="js-summernote-air">Hello Summernote Inline Editor!</div>
Slick 1.8.1

The last carousel you'll ever need.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/slick/slick.min.css">
<link rel="stylesheet" href="assets/js/plugins/slick/slick-theme.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/slick/slick.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('slick');
    });
</script>

Usage (with js-slider class):

<div class="js-slider"
     data-autoplay="true or false"
     data-dots="true or false"
     data-arrows="true or false"
     data-slides-to-show="_number"
     data-center-mode="true or false"
     data-autoplay-speed="1000">
    <div>
        Slide #1
    </div>
    <div>
        Slide #2
    </div>
    <div>
        Slide #3
    </div>
</div>
You can check out Sliders page for various usage examples.
jQuery Sparklines 2.1.2

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via JavaScript.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/sparkline/jquery.sparkline.min.js"></script>

Usage:

You can check out Charts page for various usage examples.
SimpleMDE Markdown Editor 1.11.2

A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/simplemde/css/simplemde.min.css">

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/simplemde/js/simplemde.min.js"></script>

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('simplemde');
    });
</script>

Usage (add js-simplemde class to a textarea):

<textarea class="js-simplemde" id="simplemde" name="simplemde">Hello SimpleMDE!</textarea>
SweetAlert2 7.4.1

An awesome replacement for JavaScript's alert.

Required CSS files (include before Codebase CSS):

<link rel="stylesheet" href="assets/js/plugins/sweetalert2/sweetalert2.min.css">

Required JS files (include after all core JS scripts - es6-promise.auto.min.js is required for IE10 and up support):

<script src="assets/js/plugins/sweetalert2/es6-promise.auto.min.js"></script>
<script src="assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>

Usage:

You can check out Activity for usage examples.
Vide 0.5.1

Easy as hell jQuery plugin for video backgrounds.

Required JS files (include after all core JS scripts):

<script src="assets/js/plugins/jquery-vide/jquery.vide.min.js"></script>

Usage:

You can check out the Hero Video page under Layout section for usage examples.

Note: If you are having issues with the auto video playback in Safari 11, please have a look at https://github.com/vodkabears/Vide/issues/206

You can load multiple helpers in a page by using:
Codebase.helpers(['helper1', 'helper2', 'helper3'];

Feel free to ignore the provided helpers and use your own plugin inits after you’ve included the resources of the ones you need in your page.

Finally, let’s also have a better look at some custom helpers:

Print Page

A helper which prints the main content of the current page.

Helper (just by calling the following function):

Codebase.helper('print-page');
Class Toggle

A helper which allows you to toggle a custom class on the element of your choice on button click.

Helper:

This helper is already called by default on load. You only must call it again if you inject new markup to the page and would like to init the functionality on it.

Codebase.helper('core-toggle-class');

Usage:

Your target element

<div class="js-target-class"></div>

Your button

<button type="button" data-toggle="class-toggle"
                      data-target=".js-target-class"
                      data-class="your-class">
    Toggle
</button>
In this specific example, each button click will toggle the class 'your-class' on the element with class 'js-target-class'
Ripple

A helper which animates a ripple on button click.

Helper:

This helper is already called by default on load. You only must call it again if you inject new markup to the page and would like to init the functionality on it.

Codebase.helper('core-ripple');

Usage (add data-* attributes to a button):

<button type="button" class="btn btn-primary" data-toggle="click-ripple">Primary</button>
Scroll To

A helper which allows you to animate scrolling to a specific element in the same page.

Helper:

This helper is already called by default on load. You only must call it again if you inject new markup to the page and would like to init the functionality on it.

Codebase.helper('core-scrollTo');

Usage:

Your target element

<div id="your-section">
    ..Content..
</div>

Your link..

<a href="#your-section" data-toggle="scroll-to"
                        data-speed="500">
    Scroll to the element
</a>

..or your button

<button type="button" data-toggle="scroll-to"
                      data-speed="500"
                      data-target="#your-section">
    Scroll to the element
</button>
Content Filtering

Enables you to create collections of elements which you can filter with a navigation. For example, very useful for portfolio items.

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('content-filter');
    });
</script>

Usage:

You can check out Filtering page under Components page for live and markup examples.
Table Sections

A helper which allows you to create table sections that toggle on row click (like an accordion component).

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('table-tools');
    });
</script>

Usage:

1. Add the class js-table-sections to your table

<table class="js-table-sections table table-hover">
    ...
</table>

2. Use the follow markup in your table to create clickable header rows and their content

...
    <tbody class="js-table-sections-header">One row</tbody>
    <tbody>Multiple rows which show/hide on previous tbody’s row click</tbody>
    <tbody class="js-table-sections-header">One row</tbody>
    <tbody>Multiple rows which show/hide on previous tbody’s row click</tbody>
    <tbody class="js-table-sections-header">One row</tbody>
    <tbody>Multiple rows which show/hide on previous tbody’s row click</tbody>
...
You can check out Table Tools page for live more complex examples.
Checkable Table

A helper which allows you to create a table with checkable rows.

Helper (call it after all other scripts are added):

<script>
    jQuery(function(){
        Codebase.helper('table-tools');
    });
</script>

Usage:

1. Add the class js-table-checkable to your table

<table class="js-table-checkable table table-hover">
    ...
</table>

2. Use similar markup in your table to create checkable rows

...
    <thead>
        <tr>
            <th>
                <input type="checkbox" id="check-all" name="check-all">
            </th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" id="row_1" name="row_1">
            </td>
            <td>Name 2</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="row_2" name="row_2">
            </td>
            <td>Name 2</td>
        </tr>
    </tbody>
...
You can check out Table Tools page for live more complex examples.

When a helper is called and functionality/plugin is initialized, a class js-HELPER_NAME-enabled is auto added to the element. This ensures that if you add a similar element dynamically to your page and call the helper again, the functionality/plugin will be initialized only on the new element. It’s a nice convenient solution but please have in mind that if you copy-paste an element to your markup from your browser’s developer tools, then you will also copy this extra class, so remember to remove it!

I would like to add a new jQuery plugin. Which is the best way to do it?

If you find a new plugin that you like, you can easily add it in Codebase. You can download and add it in a folder inside assets/js/plugins/. Afterwards, you just include its required JS files after all Codebase JS files and initialize it (based on its online examples). If the plugin also requires some CSS files, remember to include them in the <head> section of your page before the main Codebase CSS file.

I’m using Angular or some other framework, what is the best way to handle code in codebase.js?

By default, Codebase.init() is called at the bottom of the file (it doesn’t, if AngularJS is also included in your page). This call executes a few functions which are vital for the custom JS functionality in Codebase.

// LAYOUT VARIABLES
uiInit();

// BASE UI
uiHandleScroll('init');
uiHandleMain();
uiHandleHeader();
uiHandleNav();
uiHandleForms();
uiHandleTheme();

// API
uiApiLayout('init');
uiApiBlocks(false, 'init');

// CORE HELPERS
uiHelperCoreToggleClass();
uiHelperCoreScrollTo();
uiHelperCoreYearCopy();
uiHelperCoreTooltip();
uiHelperCorePopover();
uiHelperCoreTab();
uiHelperCoreAppear();
uiHelperCoreAppearCountTo();
uiHelperCoreSlimscroll();
uiHelperCorePageLoader('hide');
uiHelperCoreRipple();

If the framework you use is set up to load on demand various sections of your page (eg the sidebar), then it might be better to remove the call from the file and run it on your own once everything is loaded. Event delegation is used in many occasions to ensure that everything will work as expected but in some cases, you might also want to call each vital function separately. That is possible by calling each one of the following whenever you like (one to one mapping with the previous functions):

// LAYOUT VARIABLES
Codebase.helper('core-fn-uiInit');              // uiInit();

// BASE UI
Codebase.helper('core-fn-uiHandleScrollInit');  // uiHandleScroll('init');
Codebase.helper('core-fn-uiHandleMain');        // uiHandleMain();
Codebase.helper('core-fn-uiHandleHeader');      // uiHandleHeader();
Codebase.helper('core-fn-uiHandleNav');         // uiHandleNav();
Codebase.helper('core-fn-uiHandleForms');       // uiHandleForms();
Codebase.helper('core-fn-uiHandleTheme');       // uiHandleTheme();

// API
Codebase.helper('core-fn-uiApiLayout');         // uiApiLayout('init');
Codebase.helper('core-fn-uiApiBlocks');         // uiApiBlocks(false, 'init');

// CORE HELPERS
Codebase.helper('core-toggle-class');           // uiHelperCoreToggleClass();
Codebase.helper('core-scrollTo');               // uiHelperCoreScrollTo();
Codebase.helper('core-year-copy');              // uiHelperCoreYearCopy();
Codebase.helper('core-tooltip');                // uiHelperCoreTooltip();
Codebase.helper('core-popover');                // uiHelperCorePopover();
Codebase.helper('core-tab');                    // uiHelperCoreTab();
Codebase.helper('core-appear');                 // uiHelperCoreAppear();
Codebase.helper('core-appear-countTo');         // uiHelperCoreAppearCountTo();
Codebase.helper('core-slimscroll');             // uiHelperCoreSlimscroll();
Codebase.helper('core-page-loader');            // uiHelperCorePageLoader('hide');
Codebase.helper('core-ripple');                 // uiHelperCoreRipple();

Class Reference

Codebase comes packed with many helpful CSS classes that will enable you to style your elements and build your pages any way you want. If you would like to have a look at all the available classes provided by Bootstrap, too, you can at the official Bootstrap Docs.

Let’s have a look at various CSS classes that might come in handy:

Class Description
Extra small devices
Portrait phones (<576px) 		Small devices
Landscape phones (≥576px - <768px) 		Medium devices
Tablets (≥768px - <992px) 		Large devices
Desktops (≥992px - <1200px) 		Extra large devices
Desktops (≥1200px)
Available options for *: inline inline-block block table table-cell flex inline-flex
.d-none .d-sm-*
.d-none .d-md-*
.d-none .d-lg-*
.d-none .d-xl-*
.d-none
.d-sm-none
.d-md-none
.d-lg-none
.d-xl-none
Text
.text-* Aligns the text (available options: left center right justify).
.font-size-* Adjusts font size (available options: h1 h2 h3 h4 h5 h6 default xs sm md lg xl).
.font-w* Adjusts font weight (available options: 300 400 600 700).
.h1 Adjusts font style to match with <h1> tag.
.h2 Adjusts font style to match with <h2> tag.
.h3 Adjusts font style to match with <h3> tag.
.h4 Adjusts font style to match with <h4> tag.
.h5 Adjusts font style to match with <h5> tag.
.h6 Adjusts font style to match with <h6> tag.
Contextual Colors
.text-warning

.bg-warning		 Sets the font color/background to an orange one. -light can be appended to base class for a light one.
.text-danger

.bg-danger		 Sets the font color/background to a red one. -light can be appended to base class for a light one.
.text-info

.bg-info		 Sets the font color/background to a blue one. -light can be appended to base class for a light one.
.text-success

.bg-success		 Sets the font color/background to a green one. -light can be appended to base class for a light one.
.text-black

.bg-black		 Sets the font color/background to black.
.text-white

.bg-white		 Sets the font color/background to white.
.text-muted

.bg-muted		 Sets the font color/background to a gray one.
.text-black-op Sets the font color to black with opacity.
.text-white-op Sets the font color to white with opacity.
.bg-black-op Sets the background color to black with 50% opacity. -5 -10 -25 -75 -90 can be appended to base class to adjust opacity percentage.
.bg-white-op Sets the background color to white with 50% opacity. -5 -10 -25 -75 -90 can be appended to base class to adjust opacity percentage.
Colors Themes Replace * with: default elegance pulse flat corporate earth
.text-* Sets the font color to the main color of a specific theme.
.text-*-light Sets the font color to the main light color of a specific theme.
.text-*-lighter Sets the font color to the main lighter color of a specific theme.
.text-*-dark Sets the font color to the main dark color of a specific theme.
.text-*-darker Sets the font color to the main darker color of a specific theme.
.bg-* Sets the background color to the main color of a specific theme.
.bg-*-op Sets the background color to the main color with opacity of a specific theme.
.bg-*-light Sets the background color to the main light color of a specific theme.
.bg-*-lighter Sets the background color to the main lighter color of a specific theme.
.bg-*-dark Sets the background color to the main dark color of a specific theme.
.bg-*-dark-op Sets the background color to the main dark color with opacity of a specific theme.
.bg-*-darker Sets the background color to the main darker color of a specific theme.
.bg-gd-* Sets the background color to a gradient based on the main color of a specific theme.
.text-primary Sets the font color to the main color of the active theme.
.text-primary-light Sets the font color to the main light color of the active theme.
.text-primary-lighter Sets the font color to the main lighter color of the active theme.
.text-primary-dark Sets the font color to the main dark color of the active theme.
.text-primary-darker Sets the font color to the main darker color of the active theme.
.text-body-bg Sets the font color to the body background color of the active theme.
.text-body-bg-light Sets the font color to a lighter body background color of the active theme.
.text-body-bg-dark Sets the font color to a darker body background color of the active theme.
.text-body-color Sets the font color to the body color of the active theme.
.text-body-color-light Sets the font color to a lighter body color of the active theme.
.text-body-color-dark Sets the font color to a darker body color of the active theme.
.bg-primary Sets the background color to the main color of the active theme.
.bg-primary-op Sets the background color to the main color with opacity of the active theme.
.bg-primary-light Sets the background color to the main light color of the active theme.
.bg-primary-lighter Sets the background color to the main lighter color of the active theme.
.bg-primary-dark Sets the background color to the main dark color of the active theme.
.bg-primary-dark-op Sets the background color to the main dark color with opacity of the active theme.
.bg-primary-darker Sets the background color to the main darker color of the active theme.
.bg-gd-primary Sets the background color to a gradient based on the main color of the active theme.
.bg-body Sets the background color to the body color of the active theme.
.bg-body-light Sets the background color to a lighter body color of the active theme.
.bg-body-dark Sets the background color to a darker body color of the active theme.
Space Helpers Replace * with: 5 10 15 20 30 50 100 150 200 300
.mx-auto Centers a block element with a specific width inside its container.
.m-* Sets element’s margin to specific pixels.
.mt-* Sets element’s top margin to specific pixels.
.mr-* Sets element’s right margin to specific pixels.
.mb-* Sets element’s bottom margin to specific pixels.
.ml-* Sets element’s left margin to specific pixels.
.mx-* Sets element’s left & right margin to specific pixels.
.my-* Sets element’s top & bottom margin to specific pixels.
.p-* Sets element’s padding to specific pixels.
.pt-* Sets element’s top padding to specific pixels.
.pr-* Sets element’s right padding to specific pixels.
.pb-* Sets element’s bottom padding to specific pixels.
.pl-* Sets element’s left padding to specific pixels.
.px-* Sets element’s left & right padding to specific pixels.
.py-* Sets element’s top & bottom padding to specific pixels.
Various Helpers
.float-left Floats the element left.
.float-right Floats the element right.
.clearfix Clears all floats in the element.
.border Adds a light border to the element (append to base class -t -r -b and -l for a top, right, bottom and left border respectively).
.border-white-op Adds a white border (with opacity) to the element (append to base class -t -r -b and -l for a top, right, bottom and left border respectively).
.border-black-op Adds a black border (with opacity) to the element (append to base class -t -r -b and -l for a top, right, bottom and left border respectively).
.border-2x Sets the border width to 2 pixels.
.border-3x Sets the border width to 3 pixels.
.min-width-* Sets element’s minimum width to specific pixels (append to base class 20 30 50 75 100 125 150 175 200 300 320)
.min-height-* Sets element’s minimum height to specific pixels (append to base class 20 30 50 75 100 125 150 175 200 300 400 500)
.overflow-hidden Sets element’s overflow to hidden.
.opacity-0 Sets element’s opacity to 0.
.opacity-1 Sets element’s opacity to 1.
.invisible Sets element’s visibility to hidden.
.visible-lt-ie10 Hides the element on IE browsers older than IE10.
.d-print-none Hides the element from printing.

Quick Tips

Prefixes for older browsers

You can update the following values in Gulpfile.js accordingly if you would like the autoprexifer to add style prefixes for older browser versions (when using the Gulp tasks). By default, we use the same as Bootstrap 4 does.

// Autoprefixer options
var autoprefixerOptions = {
    browsers: [
        'last 1 major version',
        '>= 1%',
        'Chrome >= 45',
        'Firefox >= 38',
        'Edge >= 12',
        'Explorer >= 10',
        'iOS >= 9',
        'Safari >= 9',
        'Android >= 4.4',
        'Opera >= 30'
    ]
};

Retina Support

The UI will look crispy clear on retina screens and if you would like your images to look great, too, then you will have to use the srcset attribute of the <img> element. For example, if you have a regular image img/my_image.jpg and its retina version img/my_image@2x.jpg you will have to use the following markup:

<img src="img/my_image.jpg" srcset="img/my_image@2x.jpg 2x" alt="Image Description">

The browser will auto select the best version and load it accordingly. Older browsers will ignore the srcset attribute and will load the regular image as usual.

Font Awesome 5.x Support

Codebase provides support for the latest version of Font Awesome Icon pack out of the box. If you would like to enable the new icons, just uncomment @import 'vendor/font-awesome5'; and comment @import 'vendor/font-awesome'; lines in scss/main.scss. After compiling to CSS, you will be able to use them. Be sure to also check out Font Awesome Migration Guide for any icon name changes you might have to apply in your own pages.

Border-Box

The Bootstrap framework makes use of the border-box CSS model. That means that if you want to alter the width of an element with CSS, you can do it without worrying about the padding or the border size of that element (they will be adjusted to the width you will set).

Focus Styles

Consider removing .no-focus class form the <html> tag. This way you can restore the default browser focus outline style. Even though custom focus styles have been specified in the template, it is a good practice to keep the focus outline, too, for accessibility purposes.

IE9 and older IE versions

In these browser versions main content hides and a message is shown that the browser is not supported. If you don't like it, this feature can be disabled by removing the class .lt-ie10-msg from the <html> tag (in the conditional IE comment). If you are using the PHP version, you can find it in inc/_global/views/head_start.php file.

Demo Forms

Please remember to remove onsubmit="return false;" from <form> tags if you are using a form from the example pages. It is just added to prevent forms from submitting in case you click on a submit button while previewing the pages.

Favicons

If you would like to auto create your favicons from your image/logo, you can use the free service at http://realfavicongenerator.net

Google Maps API key

Google Maps API requires an API key to work correctly! To obtain your own key and be able to use them, please head over at Google and follow the instructions. You will be able to load the Google Maps API by using the following code with your own key: <script src="https://maps.googleapis.com/maps/api/js?key=your-api-key"></script>. Afterwards, you will be able to use the GMaps.js plugin and init your maps. If you are using the PHP version, you can simply add your API Key in the inc/_global/config.php file.

User Avatars

All avatars used in the online demo are not available for commercial use, so we couldn't include them in the final package (they can only be used for demonstration). If you would like them for mockup purposes, you can either replace the images in assets/img/avatars/ folder with avatars from uifaces.com or you can contact us to send you the ones we've used in the online demo (also from uifaces.com). Have in mind that they can only be used for demo purposes (mockup or online).

User Names

All user names used in the template are fictional and only used for demonstration. They were randomly generated at uinames.com, so if you are in need of random names for your mockups, it is a great choice.

Thank you!

Once again, thank you so much for purchasing Codebase. It wouldn’t be a reality without your continued support, so we want you to know that we appreciate it very much. We wish you all the best with your upcoming projects and goals in life! Feel free to check out more projects on Themeforest or get in touch if you have any further questions.

Have a great day and happy coding!