Getting started with StartUI

Thanks for Purchasing StartUI. StartUI is a clean admin template based on Boostrap 4. Built with CSS, jQuery and Less.

By:
StartUI, published February 10th, at 6:35pm

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 install and bower install from 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:

  • gulp
  • gulp 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

/styles/ - less styles
main.less - master file, which are included all the other styles
/partials/ - basic styles

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

/vendor/ - styles of javascript plugins

/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.)

/js/ - javscript files

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

/template/ - html templates of repeating blocks

/body/ - <body> tag templates for different pages

/node_modules/ - modules node.js library


Included files


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-0 remove all borders
  • .b-a border on all 4 sides
  • .b-l left border
  • .b-r right border
  • .b-t top border
  • .b-b bottom border
  • .b-t-0 border-top: 0
  • .b-r-0 border-right: 0
  • .border-primary border color primary
  • .border-default border color default
  • .border-warning border color warning
  • .border-success border color success
  • .border-info border color info
  • .border-white border color white
  • .border-danger border color danger

Border radius
  • .no-radius remove border radius
  • .round 4 corner border-radius
  • .brtl top left border radius
  • .brtr top right border radius
  • .blbl bottom left border radius
  • .brbr bottom right border radius

Overflow
  • .overflow-hidden overflow hidden
  • .overflow-visible overflow visible
  • .overflow-auto overflow auto

Positioning
  • .relative position: relative
  • .absolute position: absolute
  • .lt left: 0
  • .rt right: 0
  • .bt bottom: 0
  • .tp top: 0

Text alignment
  • .text-left Left aligned text.
  • .text-center Center aligned text.
  • .text-right Right aligned text.
  • .text-justify Justified text.
  • .text-nowrap no wrap text.

Other
  • .no-padding remove padding
  • .no-margin remove margin
  • .no-bg transparent background
  • .no-shadow remove box shadows
  • .shadow add a subtle box shadow
  • .text-shadow add a subtle text shadow
  • .block display 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


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