UI Style Guide

iPro / Page Templates


Explore the different page templates that have been created to jump start your product development.

Coming soon.

Rapid Page Prototyping

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800" rel="stylesheet">
    <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/header.css">
    <link id="sgholder" type="text/css" rel="stylesheet" href="css/core.css">
    <link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <div id="contentwrap"><!-- Content Wrap -->
      <div id="content"><!-- Content -->
        <div class="container">

          <h1>Insert your page content in this area.</h1>

          <!-- jQuery first, then Popper.js, then Bootstrap JS -->
          <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/highlight.pack.js"></script>
          <script src="js/jquery-ui.min.js"></script>
          <script src="js/core.js"></script>
        </div><!-- Container -->
      </div><!-- Content --> 
    </div><!-- Content Wrap --> 
  </body>
</html>
            

Pane Title