Thank you for purchasing UBOLD theme!

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.

Introduction

Ubold is a fully featured premium admin template built on top of awesome Bootstrap 4.0.0-beta, modern web technology HTML5, CSS3 and jQuery. It has many ready to use hand crafted components. The theme is fully responsive and easy to customize. The code is super easy to understand and gives power to any developer to turn this theme into real web application.

We really care for our buyers and so in case if you have any question or feedback, please feel free to get back to us.

Folder Structure

I have tried to follow the standards and modular structure while developing the theme. Let's take a look at the package structure: 

         HTML/
        ├──  assets/
        │   └── css/
        │       └── All css files
        │   └── fonts/
        │       └── All font related files
        │   └── js/
        │       └── All javascript files
        │   └── images
        │       └── All images
        │   └── scss
        │       └── All scss files
        │   └── pages
        │       └── theme pages related files
        │   └── plugins
        │       └── third party plugin (which are being used in theme)
        ├──  email-templates
        │   └── Some of email templates
        └── *.html
            └── html files

         Documentation/
            └── index.html - Index file for documentation.

Heads up! Please note that if you would like to compile the scss files, you will just have to use your own compiling method. Also the scss structure is required some more changes. In case if you have any suggestion on this, please contact me. I'll appreciate your valuable suggestion and feedback.

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Please visit the official site if you are not familiar with it. Ubold uses the bootstrap at a base and on top of it, the layout and some components are built. In order to have our own look and feel, I have overrided most of the styles of bootstrap. Note that currently the scss files are not taking advanatge of bootstrap's scss stucture.

HTML

Ubold is having a common layout which can be used to create web application very easily. The html is well written and easy to understand. I have tried to follow bootstrap conventions at most of the place.

Let's take a quick look at the generic HTML structure

CSS & Scss

Scss is a CSS pre-processor and it extends the CSS language, adding features that allow variables, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. Scss runs inside Node, in the browser and inside Rhino.

All the css files are pre-compiled using scss compiler and provided inside the assets/css/ folder. In case if you are not familiar with scss or don't have any environment setup which can be used to compile the scss files, then you can use these CSS files directly. But if you are familiar with scss, then I'll suggest you to use the scss files.

Files are explained below:

File Description
bootstrap.css Ubold uses the bootstrap v4.0.0-beta. The core bootstrap file is being used in all the pages.
icons.scss/icons.css Combines various font icons. You should remove the fonts you don't plan to use from this file and recompile it.
_menu_dark.scss Every version includes this scss file. By default it's having a light sidebar menu. If you would like to have a dark sidebar(dark background), please include this file in main scss file and recompiled it.
style.scss/style.css This is main style file. The scss version is importing all the custom scss files. Each of the scss file is containing style for speicic element. E.g Buttons, checkbox, icons, forms, etc.
style_dark.scss/style_dark.css If you would like to have a dark sidebar(dark background), please include this file.Remove the style.css from it.

Javascript

Ubold uses jQuery, Bootstrap JS framework(at its core) and some of the third-party plugins. There are may more third party plugin which you can use according to your needs. The css is already containing matching style for these plugins so you will not need to do anything around it.

Files are explained below:

File Description
jquery.js, bootstrap.js, jquery.nicescroll, jquery.slimscroll, etc. These files are used at core of the theme.
jquery.app.js This is a main js file. It contains the custom JS code needed for features including layout, sidebar, etc.
jquery.core.js This file contains the definition of some of the key components (e.g. notifications, portlet, etc) and code (for self-initialization) related to some of the controls (e.g. modal, range-slider, switchery, multiselect, etc)
pages/*.js These are the files containing pages specific code. They are mainly used for demo purpose.
plugins/**.js All supported and integrated third-party plugins are included in here.

Plugin's usage information

Page Plugin CSS Plugin js Custom js
ui-loading-buttons.html ladda-themeless.min.css spin.min.js, ladda.min.js, ladda.jquery.min.js -
ui-modal.html custombox.min.css custombox.min.js , legacy.min.js -
ui-notification.html - notify.min.js , notify-metro.js -
ui-carousel.html owl.carousel.min.css , owl.theme.default.min.css owl.carousel.min.js -
components-nestable-list.html jquery.nestable.css jquery.nestable.js nestable.js
components-range-sliders.html ion.rangeSlider.css , ion.rangeSlider.skinFlat.css , bootstrap-slider.min.css ion.rangeSlider.min.js , bootstrap-slider.min.js jquery.ui-sliders.js
components-sweet-alert.html sweetalert.css sweetalert.min.js jquery.sweet-alert.init.js
components-masonry.html - isotope.pkgd.min.js -
form-advanced.html bootstrap-tagsinput.css , switchery.min.css , multi-select.css , select2.css , bootstrap-select.min.css , jquery.bootstrap-touchspin.min.css bootstrap-tagsinput.min.js , switchery.min.js , jquery.multi-select.js , jquery.quicksearch.js , select2.min.js, bootstrap-select.min.js , bootstrap-filestyle.min.js , jquery.bootstrap-touchspin.min.js , bootstrap-maxlength.min.js -
form-validation.html - parsley.min.js -
form-pickers.html bootstrap-timepicker.min.css , bootstrap-colorpicker.min.css , bootstrap-datepicker.min.css , jquery-clockpicker.min.css , daterangepicker.css moment.js , bootstrap-timepicker.min.js , bootstrap-colorpicker.min.js , bootstrap-datepicker.min.js , jquery-clockpicker.min.js , daterangepicker.js -
form-wizard.html jquery.steps.css bootstrapValidator.js , jquery.steps.min.js , jquery.validate.min.js jquery.wizard-init.js
form-mask.html - bootstrap-inputmask.min.js , autoNumeric.js -
form-summernote.html summernote.css summernote.min.js -
form-wysiwig.html - tinymce.min.js -
form-code-editor.html codemirror.css, ambiance.css codemirror.js, formatting.js, xml.js jquery.codemirror.init.js
form-uploads.html dropzone.css dropzone.js -
form-xeditable.html bootstrap-editable.css bootstrap-editable.min.js jquery.xeditable.js
form-image-crop.html cropper.css cropper.min.js -
tables-datatable.html jquery.dataTables.min.css jquery.dataTables.min.js , dataTables.bootstrap.js -
tables-editable.html magnific-popup.css , datatables.css jquery.magnific-popup.min.js , jquery.dataTables.js , dataTables.bootstrap.js , mindmup-editabletable.js , numeric-input-example.js datatables.editable.init.js
tables-responsive.html rwd-table.min.css rwd-table.min.js -
tables-foo-tables.html footable.core.css , bootstrap-select.min.css footable.all.min.js , bootstrap-select.min.js jquery.footable.js
tables-bootstrap.html bootstrap-table.min.css bootstrap-table.min.js jquery.bs-table.js
tables-jsgrid.html jsgrid.min.css, jsgrid-theme.min.css jsgrid.min.js jquery.jsgrid.init.js
chart-flot.html - jquery.flot.js , jquery.flot.time.js , jquery.flot.tooltip.min.js , jquery.flot.resize.js , jquery.flot.pie.js , jquery.flot.selection.js , jquery.flot.stack.js , jquery.flot.orderBars.min.js , jquery.flot.crosshair.js jquery.flot.init.js
chart-morris.html morris.css morris.min.js , raphael-min.js morris.init.js
chart-chartjs.html - Chart.min.js chartjs.init.js"
chart-peity.html - jquery.peity.min.js jquery.peity.init.js
chart-chartist.html chartist.min.css chartist.min.js jquery.chartist.init.js
chart-c3.html c3.min.css d3.min.js , c3.min.js jquery.c3-chart.init.js
chart-nvd3.html nv.d3.min.css d3.min.js , nv.d3.min.js jquery.nvd3.init.js
chart-sparkline.html - jquery.sparkline.min.js jquery.charts-sparkline.js
chart-radial.html radial.css - -
chart-other.html jquery.circliful.css easypiechart.min.js , jquery.easypiechart.min.js , jquery.knob.js , jquery.circliful.min.js easy-pie-chart.init.js
map-google.html - gmaps.min.js jquery.gmaps.js
map-vector.html jquery-jvectormap-2.0.2.css jquery-jvectormap-2.0.2.min.js , jquery-jvectormap-world-mill-en.js , gdp-data.js , jquery-jvectormap-us-aea-en.js" , jquery-jvectormap-uk-mill-en.js , jquery-jvectormap-au-mill.js , jquery-jvectormap-us-il-chicago-mill-en.js , jquery-jvectormap-ca-lcc.js , jquery-jvectormap-de-mill.js , jquery-jvectormap-in-mill.js , jquery-jvectormap-asia-mill.js jvectormap.init.js
extra-coming-soon.html - jquery.countdown.min.js , jquery.simple-text-rotator.min.js -
extra-gallery.html magnific-popup.css isotope.pkgd.min.js" , jquery.magnific-popup.min.js -
apps-calendar.html fullcalendar.css , select2.css jquery-ui.min.js , select2.min.js , moment.js , fullcalendar.min.js jquery.fullcalendar.js
apps-taskboard.html jquery-ui.min.css jquery-ui.min.js -
ecommerce-product-detail.html smoothproducts.css smoothproducts.min.js -

Helper Classes

Ubold comes with various built in classes which are very useful. They are described below:

Class Description
.p-0 Removes all padding space
.p-20 Adds 20px padding
.p-30 Adds 30px padding
.p-t-0 Remove top padding
.p-t-10 Adds 10px top padding
.p-b-10 Adds 10px bottom padding
.p-l-0 Remove left 0px padding
.p-r-0 Remove right 0px padding
.p-l-r-10 Adds 10px left and right padding
.m-0 Remove all margin
.m-r-5 Adds 5px right margin
.m-r-10 Adds 10px right margin
.m-r-15 Adds 15px right margin
.m-l-10 Adds 10px left margin
.m-l-15 Adds 15px left margin
.m-t-0 Remove top margin
.m-t-10 Adds 10px top margin
.m-t-15 Adds 15px top margin
.m-t-20 Adds 20px top margin
.m-t-30 Adds 30px top margin
.m-t-40 Adds 40px top margin
.m-b-0 Remove bottom margin
.m-b-10 Adds 10px bottom margin
.m-b-15 Adds 15px bottom margin
.m-b-30 Adds 30px bottom margin
.w-xs Minimum width 80px
.w-sm Minimum width 95px
.w-md Minimum width 110px
.w-lg Minimum width 140px
.b-0 Removes all borders
.w-xs minimum width 80px
.w-sm minimum width 95px
.w-md minimum width 110px
.w-lg minimum width 140px
.m-h-40 minimum height 40px
.m-h-50 minimum height 50px
.font-normal font normal
.font-600 font weight 600
.font-bold font weight 700
.font-light font weight 300
.font-13 font size 13px

Credits

I've used the following resources as listed. May thanks to all the authors and awesome open source community.

Support

Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.

Stay Awesome!

- Coderthemes

Change Log

v2.7.0 (19 Apr, 2018)

  • Update Bootstrap to 4.1.0 version
  • Some bugs are fixed

v2.6.0 (14 Mar, 2018)

  • Update Bootstrap to 4.0.0 version
  • Updated plugins:
    • Ladda button 0.9.8 to 1.0.6
    • Ion Rangeslider 2.1.4 to 2.2.0
    • Select2 4.0.3 to 4.0.5
    • Bootstrap touchspin 3.0.1 to 3.1.2
    • Parslayjs 2.1.3 to 2.8.1
    • Summernote 0.8.2 to 0.8.8
    • Dropzone old to 5.2.0
    • Responsive tables 5.0.4 to 5.3.2
    • Footables 2.0.3 to 3.1.6
    • Morris chart 0.5.0 to 0.5.1
    • Chartjs 2.1.4 to 2.7.1
    • Peity chart 3.2.0 to 3.3.0
    • Chrtist chart 0.9.8 to 0.11.0
  • Added new datatables

v2.5.0 (27 Sep, 2017)

  • Update Bootstrap to 4.0.0-beta version
  • Added new demos: Material Design (Dark),Purple (Horizontal),Purple (Dark),Boxed (Dark),Light - RTL (Dark).

v2.4.0 (14 Aug, 2017)

  • Added Bootstrap 4 alpha 6 version with material design.
  • Added Bootstrap 4 alpha 6 version with material design - horizontal.

v2.3.0 (04 Jun, 2017)

  • Added Bootstrap 4 alpha 6 version.

v2.2.0 (13 Jan, 2017)

  • Added Pages:
    • Sweet Alert 2
    • Dripicons
    • Jquery Filer
    • Gallery 2
  • Updated Pages:
    • Font Awesome

v2.1.0 (29 Aug, 2016)

  • Added frontend template
  • Added RTL version for Horizontal layout
  • Added RTL version for Vertical layout

v2.0 (02 Aug, 2016)

  • Added Layouts:
    • Light - Dark
    • Horizontal - Full Dark
    • Vertical - Boxed
    • Horizontal - Boxed
  • Added Pages:
    • Dashboard 4
    • Video
    • JsGrid table
    • Ecommerce-product-detail page
  • Updated Pages:
    • Ecommerce - Products
    • Sweet Alert - added Bootstrap sweet alert
  • Updated Plugins:
    • Bootstrap to 3.3.7
    • Notify.js to 0.4.2
    • Ion-range slider to 2.1.4
    • Bootstrap slider to 9.1.1
    • Isotope to 3.0.1
    • Animate css
    • Sweet alert to Bootstrap Sweet Alert
    • Font Awesome to 4.6.3
    • Bootstrap tag-input to 0.8.0
    • Select 2 to 4.0.3
    • Bootstrap select to 1.10.0
    • Parsley.js to 2.4.3
    • Moment.js to 2.14.1
    • Bootstrap timepicker to 0.5.2
    • Colorpicker
    • Bootstrap datepicker to 1.6.1
    • Summernote to 0.8.1
    • Wysiwyg to 4.4.1
    • Codemirror to 5.17.0
    • Bootstrap table to 1.11.0
    • Flot chart to 0.8.3
    • Morris chart to 0.5.1
    • Chart.js to 2.1.4
    • Chartist.js to 0.9.8 (Added tooltips option)
    • Fullcalendar to 2.9.0
    • Slimscroll.js to 1.3.8
    • Scrollto js to 2.1.3

v1.6.1 (30 Jun, 2016)

  • Fixed issue for arrow in sidebar

v1.6 (19 Jun, 2016)

  • This update is containing following updates:
    1. Added loading buttons.
    2. Added masonry layout page.
    3. Added code-editor page.
    4. Added taskboard page.
    5. Updated datatable, added new table layout

v1.5 (12 March, 2016)

  • This update is containing following updates:
    1. Added treeview page in component library
    2. Added product tour
    3. Updated datatable, added new table layout
    4. Updated profile page with new layout
    5. Added new widgets in ui library - added new social network related widgets
    6. Updated Form (Advanced), added auto complete input
    7. Fixed inbox page, made it more responsive for mobile devices

v1.4 (04 February, 2016)

  • What's new?
    1. Added a new color schemes i.e. flat(purple) and dark.

v1.3 (16 January, 2016)

  • What's new?
    1. Added a new layout with horizontal navigation
    2. Added a new layout with dark sidebar (left bar navigation menu)
    3. Removed loader from all page - many of our buyer requested to remove it.
    4. Following issues are fixed:
      • Fixed sidebar for mobile devices, now it will not be displayed by default. Previously this was taking some space on mobile devices.
      • Fixed issue in invoice pages, made it printer friendly.
      • Fixed issue of fixed height with form wizard.

v1.2 (17 December, 2015)

  • What's new?
    1. Added typicons font icons.
    2. Added Tablesaw table.
    3. Added Ricksaw charts.
  • What's updated?
    1. Bootstrap updated to v3.3.6
    2. Datatable is updated.
    3. Fontawesome updated to 4.5
  • Issue fixed :
    1. Menu and other items was not clickable on Iphone and ipad.
    2. Menu item should be active when the page is opened.
    3. For mobile, the sidebar menu should be expandable.

v1.1 (November 22, 2015)

  • What's new?
    1. Fixed issue with bootstrap table
    2. Fixed issue with datatable. Now it's responsive.
    3. Added new color scheme. I called it dark layout.
    4. Added loader. May be I remove it in next version.

v1.0 (November 1, 2015)

  • First version released
2016 © Coderthemes.