UI Style Guide

iPro / Getting Started

The iPro Core framework is based on Bootstrap 4, Jquery and in-house javascript code that makeup not only the framework but also the interactions of the system.

iPro Core is an private source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on Bootstrap 4, jQuery and Angular.

We have a variety of ready page templates for download to help speed up development and prototyping.

Dependencies

Throughout this style guide, you may see internal or external dependencies required for any given component. We have labeled each dependency as follows:

Dependency: <script src="js/jquery-ui.min.js"></script>

Dependencies

There are various dependencies the application requires to run properly.

Demo: Live Example

<div class="row">
      <div class="col-sm-2">
          <button class="btn-md btn-block btn-tertiary margin-0">Cancel</button>
      </div>
      <div class="col-sm-8"></div>
      <div class="col-sm-2">
          <button class="btn-md btn-block btn-primary margin-0">Save</button>
      </div>
  </div>

Core's Structure

iPro Core is composed of Core.css and Core.js - both of which contain and makeup the main look and interactions with iPro.

  • Web Application Hierarchy:
    • Core.css
    • Bootstrap.min.css
    • Jquery-ui.min.css (optional - use only if required)
    • Page.css
    • Third Party Additional CSS (Use only if required)
    • Core.js
    • Jquery
    • Popper.min.js
    • Svgxuse.js
    • Jquery-ui.min.js (optional - use only if required)
    • Page.js
    • Third Party Additional Javascripts (Use only if required)

CSS Dependencies

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.


<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/core.css">

Javascript Dependencies

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svgxuse/1.2.6/svgxuse.min.js"></script>
<script src="js/core.js"></script>

Pane Title

Close [X]
Center Button Example