How to build a page from scratch

Using a copy-paste syntax hilighter, we have the basic building blocks of our UI kit in HTML5/CSS3 format. The header color codes correspond to the requirements, optionals, and contextual items. Required Optional Contextual

Warning you will need to change the file paths accordingly.

The way it should be structured is as follows:

  1. Meta content
  2. Body content
  3. Full width Containers (optional)
  4. Sticky toolbar (optional)
  5. Footer content
See also: Full page sample and special buttons.

Required - Meta

Meta Content

These elements generally relate to the styling. We have Bootstrap declared followed by our style sheet that contains a wider scope as it relates to our application. The following CSS related to the overall color scheme.

Danger failure to load in the specific Bootstrap - Style - Color order will cause issues. Additionally, there are extra CSS files that may relate to table or other functions generally around responsive or custom functionality you do not want to be globally included.


<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DIY build a page</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/colors/blue.css" id="theme" rel="stylesheet">
</head>
<body>

To explain this, we first declare this as an HTML doc, the language and then begin the head scripts. The next lines declare the unicode support, IE/Edge invocation, and then a pixel scale rule that is essential to all responsive sites. After that we add the page title followed by the CSS, with Bootstrap coming directly from a CDN to improve performance.

Required - Body

Navbar

Note We have opened the body tag at the end of the meta content and we close it after the footer. the information below is directed at the content.

Before doing anything with page content, we include our navbar outside that semantic content.

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="index-ui.html">FTM</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
	<div class="collapse navbar-collapse" id="navbarsExampleDefault">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item dropdown"> 
			  <a class="nav-link dropdown-toggle" href="./" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">wires</a>
				<div class="dropdown-menu" aria-labelledby="dropdown02"> 
					<a class="dropdown-item" href="Slate-ui.html">slate</a> 
					<a class="dropdown-item" href="TitleIntakeForm-ui.html">intake form</a> 
					<a class="dropdown-item" href="TitleReservationReport-ui.html">title report</a> 
					<a class="dropdown-item"	href="theat-ui.html">master theater report</a> 
					<a class="dropdown-item" href="theatersummary-ui.html">theater summary</a> 
					<a class="dropdown-item" href="GAP-ui.html">Gap</a> 
					<a class="dropdown-item" href="BSR-ui.html">Booking Staus (domestic)</a>                        
					<a class="dropdown-item" href="holdovers-ui.html">Holdovers</a> 
					<a class="dropdown-item" href="BSRintl-ui.html">Booking Staus (international)</a> 
				</div>
			</li>
		</ul>
		<form class="form-inline my-2 my-lg-0">
			<input class="form-control mr-sm-2" type="text" placeholder="Title Search" aria-label="Search">
			<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
		</form>
	</div>
</nav>

Body Content

The body is a series of containers (documentation) and wrappers. These containers have different roles in the responsive layout paradigm. A .jumbotron (documentation) is a fullscreen element with a colored background. A .container (its max-width changes at each breakpoint) and .container-fluid (meaning it’s 100% wide all the time) are the backbone of our layout system.

Bootstrap likes to use a .main-wrapper and .page-wrapper to control elements and interactions. It allos gutters and margins to be controlled amongst other DOM related uses.

<div id="main-wrapper">
  <div class="page-wrapper">
  	<!--containers go here-->
	<!--sticky toolbar goes here-->
  </div>
</div>

To explain this, we first declare this as an HTML doc, the language and then begin the head scripts. The next lines declare the unicode support, IE/Edge invocation, and then a pixel scale rule that is essential to all responsive sites. After that we add the page title followed by the CSS, with Bootstrap coming directly from a CDN to improve performance.

Optionals - Containers & Jumbotrons

Containers & Jumbotrons (incl -fluid)

There are containers and jumbotrons that add the suffix -fluid. Fluid always flows 100% whereas the default behaviour is to use breakpoints. We use .container as a default immediately following the navbar to hold all the main information, functions and grouped modifiers that related to the following table or content. We use Jumbotrons mainly for full-screen tables with minor margins but beware that .jumbotron-fluid has no gutters/margins.

Containers are documented deeper here: (documentation) and the same for Jumbotrons (documentation).

Info You should know that these will be initially wrapped in the .main-wrapper and .page-wrapper divs. These should cover most scenarios.

<div class="container">
	<div class="row">
		<div class="col-12">
			<h1>Container</h1>
			<p>Container has different sizes based on breakpoints.</p>
		</div>
	</div>
</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			<h1>Container-Fluid</h1>
			<p>Container-Fluid does not "snap" to breakpoints, it is constantly 100%.</p>
		</div>
	</div>
</div>

<div class="jumbotron">
  <!--table-->
</div>

Optionals - Sticky Toolbar

Sticky Toolbar

A sticky toolbar is always in one position on the screen as you scroll until you scroll over the anchor point. This is useful when you just want to attach one to a card, though it is far more common to use for the whole page.

You will most commonly place this above the two closing </div> tags that close .main-wrapper and .page-wrapper just above the <footer>.

<div class="container toolbar-sticky-bottom">
	<div class="row">
		<div class="col-md-12 ">
			<button type="button" class="btn btn-danger">Reset</button>
			<button type="button" class="btn btn-success">Save</button>
			<button type="button" class="btn btn-primary" onclick="window.location.href='./TitleReservationReport.html'">Submit and View Report</button>
			<button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target=".conflictModal">[trigger conflict demo]</button>
		</div>
	</div>
</div>

Required - Footer

Footer Content

After you have completed everything you want to do on a page, you need to close the final tags and add a footer followed by the closing JavaScript attachments.

Warning We add JS at the bottom of the page with jQuery coming first because eveything else depends on it. It is suggested jQuery followed by Popper (a pop-up/tooltip library), then Bootstrap and any other feature related scripts. Bootstrap looks for jQuery and Popper.

<footer class="footer">
	<p>&copy; IMAX Corp.</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="../assets/plugins/bootstrap/js/popper.min.js"></script> 
<script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

To explain this, we first declare this as an HTML doc, the language and then begin the head scripts. The next lines declare the unicode support, IE/Edge invocation, and then a pixel scale rule that is essential to all responsive sites. After that we add the page title followed by the CSS, with Bootstrap coming directly from a CDN to improve performance.

Optionals - Special Buttons

Buttons

These are a series of buttons we want to group together to allow special actions like print, import/export, faborite, or add.

                                  <button class="btn btn-outline-primary waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-upload"></i></span>Import</button>
                                  <button class="btn btn-outline-success waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-download"></i></span>Export</button>
                                  <button class="btn btn-outline-info waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-print"></i></span>Print</button>
                                  <button class="btn btn-outline-warning waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-envelope-o"></i></span>Mail</button>
                                  <button class="btn btn-outline-danger waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Favorite</button>
                                  <button class="btn btn-outline-success waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-plus"></i></span>Add</button>

Full Page Sample

The Full Page

This is a typical blank page. So much else needs to be done manually, like adding your content, but this hanldes the vast majority of scenarios.

<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/style.css" rel="stylesheet">
  <link href="./css/colors/blue.css" id="theme" rel="stylesheet">
  <link href="./assets/plugins/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <title>Blank</title>
</head>
<body>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="index-ui.html">FTM</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
    </button>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item dropdown"> 
          <a class="nav-link dropdown-toggle" href="./" id="dropdown02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">wires</a>
            <div class="dropdown-menu" aria-labelledby="dropdown02"> 
              <a class="dropdown-item" href="Slate-ui.html">slate</a> 
              <a class="dropdown-item" href="TitleIntakeForm-ui.html">intake form</a>  
            </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Title Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>

  <div id="main-wrapper">
    <div class="page-wrapper">
      
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h1>Container</h1>
            <p>Container copy.</p>
          </div>
        </div>			
      </div>
      
      <div class="container toolbar-sticky-bottom">
        <div class="row">
          <div class="col-md-12 ">
            <button type="button" class="btn btn-danger">Reset</button>
          </div>
        </div>
      </div>	

    </div>
  </div>
  
  <footer class="footer">
      <p>&copy; IMAX Corp.</p>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- Bootstrap tether Core JavaScript -->
  <script src="./js/popper.js"></script>
  <script src="./assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <!--Wave Effects -->
  <script src="./js/waves.js"></script>
  <!--Menu sidebar -->
  <script src="./js/sidebarmenu.js"></script>
  <!--stickey kit -->
  <script src="./assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
  <script src="./assets/plugins/sparkline/jquery.sparkline.min.js"></script>
  <!--Custom JavaScript -->
  <script src="./js/custom.min.js"></script>
  
</body>
</html>