Ra Admin

Ra is a premium, fully responsive web app UI kit. It has flat design and built with Bootstrap 3.3.7, HTML5, CSS3 and Jquery. It comes with bunch of reusable UI widgets, components, ready made pages. The clean and modular code will allow you to easily build any web application.

Structure #

I have tried to follow the standards and modular structure while developing the theme. Following sections are explaining the theme File & Folder, structure, html file struture and plugins.

File & Folder Structure #

├── html files
Src/assets/
├── less/
│   └── All LESS files
├── css/
│   └── All css files.
├── fonts/
├── pages/
│   └── All the pages related scripts
├── images/
│   └── All images
├── plugins/
│   └── The plugins files - which are not available through bower
└── js/
    └── All common JavaScript files

HTML Structure #

<body class="fixed-left widescreen">

    <!-- Begin page -->
    <div id="wrapper">

        <!-- Top Bar Start -->
        <div class="topbar">
            <!-- LOGO -->
            <div class="topbar-left">
                ...
            </div>
        </div>
        <!-- Top Bar End -->


        <!-- ========== Left Sidebar start ========== -->

        <div class="left side-menu">
            <div class="sidebar-inner slimscrollleft">
                <!--- Divider -->
                <div id="sidebar-menu">
                    ...
                </div>
            </div>
        </div>
        <!-- ========== Left Sidebar end ========== -->

        <!-- ========== main content start ========== -->
        <div class="content-page">

            <!-- content -->
            <div class="content">
                ....
            </div>

            <!-- content -->

            <!-- footer -->
            <footer class="footer">
                2020 © Ra.
            </footer>
        </div>

        <!-- ========== main content end ========== -->


        <!-- ========== Right sidebar start ========== -->
        <div class="side-bar right-bar">
            ...
        </div>

        <!-- ========== Right sidebar end ========== -->

    </div>
    <!-- scripts -->
    ...

</body>

CSS & LESS #


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

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

Files are explained below:

FileDescription
bootstrap.cssRa uses the Bootstrap 3.3.7. The core bootstrap file is being used in all the pages.
elements.lessThis file is containing some of the utility functions or mixins for less. This file is from Joel Sutherland.
core.less/core.cssThis file is containing all common styles for all the pages.
pages.less/pages.cssPages contains the styles for all supported third-party JS/CSS plugins. It has overwritten version of styles.
components.less/components.cssThis is the one of the core and important file. It contains the styles for all the components, ui elements, and some other parts of the theme.
responsive.less/responsive.cssThis file is containing the styles related to responsiveness support.
icons.less/icons.cssCombines various font icons. You should remove the fonts you don’t plan to use from this file and recompile it.
menu_sm.lessInclude this file instead of menu.less if you would like to have small sidebar menu.

JavaScript #


Ra 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:

FileDescription
jquery.jsbootstrap.jsjquery.slimscroll, etc.These files are used at core of the theme.
jquery.app.jsThis is a main js file. It contains the custom JS code needed for features including layout, sidebar, etc.
jquery.core.jsThis 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/*.jsThese are the files containing pages specific code. They are mainly used for demo purpose.
plugins/**.jsAll supported and integrated third-party plugins are included in here.

Plugins #

PagePlugin CSSPlugin jsCustom js
ui-modal.htmlcustombox.min.csscustombox.min.js , legacy.min.js
ui-notification.htmltoastr.min.csstoastr.min.js
ui-tooltips-popovers.htmltooltipster.bundle.min.csstooltipster.bundle.min.jsjquery.tooltipster.js
admin-sweet-alert.htmlsweet-alert.csssweet-alert.min.jsjquery.sweet-alert.init.js
admin-nestable-list.htmljquery.nestable.cssjquery.nestable.jsnestable.js
admin-range-sliders.htmlion.rangeSlider.css , ion.rangeSlider.skinFlat.cssion.rangeSlider.min.jsjquery.ui-sliders.js
admin-ratings.htmlhopscotch.min.csshopscotch.min.js
admin-animation.htmlanimate.min.css
calendar.htmlfullcalendar.css , select2.cssjquery-ui.min.js , select2.min.js , moment.js , fullcalendar.min.jsjquery.fullcalendar.js
form-advanced.htmlbootstrap-tagsinput.css , switchery.min.css , multi-select.css , select2.css , bootstrap-select.min.css , jquery.bootstrap-touchspin.min.cssbootstrap-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.htmlparsley.min.js
form-pickers.htmlbootstrap-timepicker.min.css , bootstrap-colorpicker.min.css , bootstrap-datepicker.min.css , jquery-clockpicker.min.css , daterangepicker.cssmoment.js , bootstrap-timepicker.min.js , bootstrap-colorpicker.min.js , bootstrap-datepicker.min.js , jquery-clockpicker.min.js , daterangepicker.js
form-wizard.htmljquery.steps.cssjquery.steps.min.js , jquery.validate.min.jsjquery.wizard-init.js
form-mask.htmlbootstrap-inputmask.min.js , autoNumeric.js
form-summernote.htmlsummernote.csssummernote.min.js
form-wysiwig.htmltinymce.min.js
form-uploads.htmljquery.filer.css, jquery.filer-dragdropbox-theme.cssjquery.filer.min.jsjquery.fileuploads.init.js
tables-datatable.htmljquery.dataTables.min.css, buttons.bootstrap.min.css, fixedHeader.bootstrap.min.css, responsive.bootstrap.min.css, scroller.bootstrap.min.cssjquery.dataTables.min.js , dataTables.bootstrap.js
tables-responsive.htmlrwd-table.min.cssrwd-table.min.js
tables-editable.htmlmagnific-popup.css , datatables.cssjquery.magnific-popup.min.js , jquery.dataTables.js , dataTables.bootstrap.js , mindmup-editabletable.js , numeric-input-example.jsdatatables.editable.init.js
tables-tablesaw.htmltablesaw.csstablesaw.js, tablesaw-init.js
chart-flot.htmljquery.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.jsjquery.flot.init.js
chart-morris.htmlmorris.cssmorris.min.js , raphael-min.jsmorris.init.js
chart-google.htmlhttps://www.google.com/jsapijquery.google-charts.init.js
chart-chartist.htmlchartist.min.csschartist.min.jsjquery.chartist.init.js
chart-chartjs.htmlchart.min.jsjquery.chartjs.init.js
chart-c3.htmlc3.min.cssd3.min.js , c3.min.jsjquery.c3-chart.init.js
chart-sparkline.htmljquery.sparkline.min.jsjquery.charts-sparkline.js
chart-knob.htmljquery.knob.js
map-google.htmlgmaps.min.jsjquery.gmaps.js
map-vector.htmljquery-jvectormap-2.0.2.cssjquery-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.jsjvectormap.init.js
maps-mapael.htmljquery-mapael/raphael-min.js , jquery.mapael.min.js , jquery.mousewheel.min.js , world_countries.min.js , usa_states.min.jsjquery.mapael-map.init.js
extras-coming-soon.htmljquery.countdown.min.js
extras-gallery.htmlmagnific-popup.cssisotope.pkgd.min.js” , jquery.magnific-popup.min.js

Utilities #

This template contains various utilities including some helper classes, widgets, etc. Please see below some helper classes.

Helper Classes:

ClassDescription
.p-0Removes all padding space
.p-20Adds 20px padding
.p-30Adds 30px padding
.p-t-0Remove top padding
.p-t-10Adds 10px top padding
.p-b-10Adds 10px bottom padding
.p-l-0Remove left 0px padding
.p-r-0Remove right 0px padding
.p-l-r-10Adds 10px left and right padding
.m-0Remove all margin
.m-r-5Adds 5px right margin
.m-r-10Adds 10px right margin
.m-r-15Adds 15px right margin
.m-l-10Adds 10px left margin
.m-l-15Adds 15px left margin
.m-t-0Remove top margin
.m-t-10Adds 10px top margin
.m-t-15Adds 15px top margin
.m-t-20Adds 20px top margin
.m-t-30Adds 30px top margin
.m-t-40Adds 40px top margin
.m-b-0Remove bottom margin
.m-b-10Adds 10px bottom margin
.m-b-15Adds 15px bottom margin
.m-b-30Adds 30px bottom margin
.w-xsMinimum width 80px
.w-smMinimum width 95px
.w-mdMinimum width 110px
.w-lgMinimum width 140px
.b-0Removes all borders
.w-xsminimum width 80px
.w-smminimum width 95px
.w-mdminimum width 110px
.w-lgminimum width 140px
.m-h-40minimum height 40px
.m-h-50minimum height 50px
.font-normalfont normal
.font-600font weight 600
.font-boldfont weight 700
.font-lightfont weight 300
.font-13font size 13px

Resources #

We’ve used the following resources as listed. These are some awesome creation and we are thankful to the community.