Getting started with StartUI
Thanks for Purchasing StartUI. StartUI is a clean admin template based on Boostrap 4. Built with CSS, jQuery and Less.
Introduction
A full featured, premium web application admin dashboard built with Twitter Bootstrap 4, JQuery and CSS. It comes with a lot of ready to use components ideal for bulding you web application, CRM, CMS, admin panel, dashboard, or any other type of application backend. StartUI coded highly responsive for your mobile phone & tablets. Completely modular with many unique features, it will help you build your next awesome product.
You can visit the Bootstrap page to find out all the various components that you can implement with StartUI. The docs are comprehensive and they include everything to help you get started with using all the various components.
Once you've purchased StartUI, please leave a rating! Positive ratings help bring out more updates and add more features to the template.
If you have any questions that are beyond the scope of this help file, please feel free to get in touch.
Support requests can go through the form on my ThemeForest profile page
Support for my items includes:
- Responding to questions or problems regarding the item and its features
- Fixing bugs and reported issues
- Providing updates to ensure compatibility with new software versions
Item support does not include:
- Customization and installation services
- Support for third party software and plug-ins
Install Bower and Gulp
The template is built on top of gulp and bower tools. Use of these tools is completely optional.
What is bower and gulp?
Gulp is the build system used to build and preview your project. Bower is a package manager is used for dependency management, so that you no longer have to manually download and manage your scripts.
Installing requirements
In order to utilize the build and livereload features of the template you need to install the following on your development computer.
- Node.js and NPM. You can download Node.js from here https://nodejs.org/download/. Npm comes bundled with Node.js
- Next you need to install bower and gulp using this command
npm install --global bower gulp - Finally run
npm installandbower installfrom the root of your project to install all the necessary dependencies. By default bower packages will install to app/vendor.
Once you have all tools and dependencies installed you can use this command in your project:
gulpgulp build
gulp launches a localhost preview of your app (with Livereload) and will compile either your sass files or less files to css
gulp build will create your production files.
Theme
Package contents
The download package includes JavaScript, font assets, img assets, json data files, source less files.
Files under the build folder have not been modified in anyway.
This should in essense help you manage all your third party components and plugins with ease.
A list of all third party resources can be found in the src section.
These are not covered in this documentation but instead you can heard on over to each respective plugin's homepage to discover how you can use them with the template.
The docs are comprehensive and they include everything to help you get started.
Folder structure:
theme/ ├── build │ ├── css │ ├── fonts │ ├── img │ └── js ├── docs ├── mail ├── landing ├── src │ ├── fonts │ ├── img │ ├── js │ │ ├── app │ │ ├── lib │ │ └── vendor │ ├── styles │ │ ├── lib │ │ ├── pages │ │ ├── partials │ │ └── vendor │ ├── template └── └── └── body
/build - contains compiled files of the admin theme.
/docs - contains documentation.
/mail - contains source and compiled files of the email templates.
/src/ - contains core source files of the admin theme.
/bower_components/ - javascript plugins installed using bower
/fonts/ - fonts
/img/ - images
base.less -styles of basic blocks (head, footer, sidebar)
fonts.less - include of additional fonts
forms.less - form elements styles
grids.less - the general structure of the pages, grids
helpers.less - helper classes
icons.less - include font icons
interface.less - styles of interface elements (buttons, progress bars, tables, etc.)
mixins.less - less mixins
reset.less - reset styles
typography.less - typography
vars.less - less vars
/lib/ - js css styles of additional plug-ins that are included to each page separately
/pages/ - individual page styles
/elements/ - styles separate interface elements (players, steps progress ordering, etc.)
plugins.js - include common plug-ins are used on all pages
/vendor/ - js plugins that can not be set through the bower
/lib/ - additional js plugins that include each page separately
/app/app.js - custom scripts, plug-ins common initialization
/body/ - <body> tag templates for different pages
/node_modules/ - modules node.js library
Included files
- activity.html Users activity
- alerts.html Alerts panels
- asphalt-menu.html Black top menu
- avatars.html Default users avatars
- blank.html Blank page
- cards.html Bootstrap cards
- chat.html Chat with messages
- chat-index.html Chat index, choose a user for conversation
- chat-write.html Write a message to conversation
- components-upload.html Upload widgets
- contacts.html Contacts - users list
- contacts-page.html Contact page
- dark-menu.html Default dark menu with gray menu items
- dark-menu-blue.html Default dark menu with blue menu items
- dark-menu-green.html Default dark menu with green menu items
- dark-menu-ultramarine.html Default dark menu with ultramarine menu items
- dashboard.html Main dashboard
- dashboard-addl-menu.html Dashboard with left submenu
- dashboard-compact-menu.html Dashboard with compact menu
- datatables.html Datatables
- datatables-filter-control.html Datatables with filters
- datatables-fixed-columns.html Datatables with fixed columns. Change fixed columns by input field in header
- datatables-mobile.html Datatables mobile layout. For view example, change browser size
- datatables-reorder-columns.html Datatables reorder columns. Move column by brag and drop
- datatables-reorder-rows.html Datatables reorder rows. Move row by brag and drop
- datatables-resize-columns.html Datatables resize columns
- documentation.html Documentation layout
- editor.html Wysiwyg editors
- elements.html Bootstrap UI components
- empty.html Page without items
- error-404.html 404 error page
- error-500.html 500 error page
- faq.html FAQ page
- faq-search.html FAQ page with search bar
- files.html File Manager
- gallery.html Image gallery
- helpers.html CSS helper classes
- icons.html Icons collection
- list-tasks.html Tasks list
- mail.html Mail app
- nestable.html Nestable lists
- notice-bootstrap-notify.html Bootstrap notifications
- notice-notie.js.html Notie.js notifications
- notice-pnotify.html Pnotify.js notifications
- notifications.html All notifications in one page
- panels.html Panels with different colors
- player.html Music and Video players
- prices.html Prices page
- profile.html Social user profile (Version 1)
- profile-2.html User profile (Version 2)
- profile-edit.html Social user profile, edit functional
- project.html View project page
- range-slider.html Range sliders
- scheduler.html Scheduler (Fullcalendar)
- sign-in.html Login page
- steps.html Form steps
- sign-up.html Register page
- tables.html Bootstrap tables
- tabs.html Bootstrap tabs
- typeahead.html Autocomplete for inputs
- typography.html Bootstrap typography
- ui-buttons.html Buttons
- ui-checkboxes.html Checkboxes and radio buttons
- ui-datepicker.html Date and time pickers
- ui-form.html Form inputs
- ui-form-extras.html Plugins for form inputs. Auto size for textarea, max length for inputs, hide/show password for password fields
- ui-form-input-mask.html Form input masks
- ui-form-validation.html Form validation
- ui-select.html Form select fields
- widgets.html Collection of dashboard widgets
Layouts & Options
This theme is a fluid layout with 3+ columns. Default blank layout with side menu looks:
Helper classes
These are all the available helper classes used in the template
Borders
.no-border.b-a-0remove all borders.b-aborder on all 4 sides.b-lleft border.b-rright border.b-ttop border.b-bbottom border.b-t-0border-top: 0.b-r-0border-right: 0.border-primaryborder color primary.border-defaultborder color default.border-warningborder color warning.border-successborder color success.border-infoborder color info.border-whiteborder color white.border-dangerborder color danger
Border radius
.no-radiusremove border radius.round4 corner border-radius.brtltop left border radius.brtrtop right border radius.blblbottom left border radius.brbrbottom right border radius
Overflow
.overflow-hiddenoverflow hidden.overflow-visibleoverflow visible.overflow-autooverflow auto
Positioning
.relativeposition: relative.absoluteposition: absolute.ltleft: 0.rtright: 0.btbottom: 0.tptop: 0
Text alignment
.text-leftLeft aligned text..text-centerCenter aligned text..text-rightRight aligned text..text-justifyJustified text..text-nowrapno wrap text.
Other
.no-paddingremove padding.no-marginremove margin.no-bgtransparent background.no-shadowremove box shadows.shadowadd a subtle box shadow.text-shadowadd a subtle text shadow.blockdisplay block
Margins and paddings
| Class | Description |
|---|---|
.m-x-n |
-15px margin left and right |
.m-r-n |
-15px margin right |
.m-l-n |
-15px margin left |
.m-a-lg |
30px margin |
.m-r-lg |
30px right margin |
.m-b-lg |
30px bottom margin |
.m-l-lg |
30px left margin |
.m-t-lg |
30px top margin |
.m-x-lg |
30px left and right margin |
.m-y-lg |
30px top and bottom margin |
.m-a-md |
20px margin |
.m-r-md |
20px right margin |
.m-b-md |
20px bottom margin |
.m-l-md |
20px left margin |
.m-t-md |
20px top margin |
.m-x-md |
20px left and right margin |
.m-y-md |
20px top and bottom margin |
.m-a |
15px margin |
.m-r |
15px right margin |
.m-b |
15px bottom margin |
.m-l |
15px left margin |
.m-t |
15px top margin |
.m-x |
15px left and right margin |
.m-y |
15px top and bottom margin |
.m-x-auto |
auto left and right margin |
.m-a-0 |
0px margin |
.m-r-0 |
0px right margin |
.m-b-0 |
0px bottom margin |
.m-l-0 |
0px left margin |
.m-t-0 |
0px top margin |
.m-x-0 |
0px left and right margin |
.m-y-0 |
0px top and bottom margin |
| Class | Description |
|---|---|
.p-x-n |
-15px padding left and right |
.p-r-n |
-15px padding right |
.p-l-n |
-15px padding left |
.p-a-lg |
30px padding |
.p-r-lg |
30px right padding |
.p-b-lg |
30px bottom padding |
.p-l-lg |
30px left padding |
.p-t-lg |
30px top padding |
.p-x-lg |
30px left and right padding |
.p-y-lg |
30px top and bottom padding |
.p-a-md |
20px padding |
.p-r-md |
20px right padding |
.p-b-md |
20px bottom padding |
.p-l-md |
20px left padding |
.p-t-md |
20px top padding |
.p-x-md |
20px left and right padding |
.p-y-md |
20px top and bottom padding |
.p-a |
15px padding |
.p-r |
15px right padding |
.p-b |
15px bottom padding |
.p-l |
15px left padding |
.p-t |
15px top padding |
.p-x |
15px left and right padding |
.p-y |
15px top and bottom padding |
.p-x-auto |
auto left and right padding |
.p-a-0 |
0px padding |
.p-r-0 |
0px right padding |
.p-b-0 |
0px bottom padding |
.p-l-0 |
0px left padding |
.p-t-0 |
0px top padding |
.p-x-0 |
0px left and right padding |
.p-y-0 |
0px top and bottom padding |
Resources
- Images from www.pexels.com (Free)
- Avatars from www.uifaces.com (Free)
Plugins
- Autosize (MIT)
- JavaScript Canvas to Blob (MIT)
- jQuery File Upload (Blueimp) (MIT)
- JavaScript Load Image (Blueimp) (MIT)
- JavaScript Templates (Blueimp) (MIT)
- Bootstrap (MIT)
- Bootstrap Select (MIT)
- Bootstrap Sweet Alert (MIT)
- Bootstrap Table (MIT)
- Bootstrap Touchspin (Apache 2.0)
- Bootstrap clockpicker (MIT)
- Bootstrap Datetime Picker (MIT)
- FancyBox (MIT)
- FileSaver (MIT)
- FullCalendar (MIT)
- FullCalendar Scheduler (MIT)
- html2canvas (MIT)
- jQuery form Validation (MIT)
- jQuery (MIT)
- jQuery Typeahead (MIT)
- jScrollPane (MIT)
- jsPDF (MIT)
- jsPDF AutoTable (MIT)
- jquery.matchHeight (MIT)
- Moment (MIT)
- Moment Timezone (MIT)
- Peity (MIT)
- Responsive bootstrap toolkit (MIT)
- Select2 (MIT)
- Slick (MIT)
- Table Export jQuery plugin (MIT)
- Tether (MIT)
- Bootstrap MaxLength (MIT)
- Hide/Show Password (MIT)
- jQuery Mask Plugin (MIT)
- Ladda buttons (MIT)
- Remarkable bootstrap notify (MIT)
- PNotify (Apache 2.0)
- Notie (MIT)
- Summernote (MIT)
- Plottable.js (MIT)
- C3.js (MIT)
- Ion rangeSlider (MIT)
Landing Pages
Landing pages you can get from https://github.com/develoid/startui_landing_pages
Credits
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section