Core Boxx – HTML Javascript Template

This is an optional HTML and Javascript template for Core Boxx. Built using Bootstrap and Material Icons, it comes with some of the “common interface elements” straight out of the box. Also, it is PWA ready.

 

TABLE OF CONTENTS

Download & Notes

Quick Reference

 

 

 

LICENSE & DOWNLOAD

Core Boxx is released under the MIT License. You are free to use it for personal and commercial projects, modify as you see fit. On the condition that the software is provided “as-is”. There are no warranties provided and “no strings attached”. Code Boxx and the authors are not liable for any claims, damages, or liabilities.

Download Core Boxx HTML JS | GitHub | Source Forge

 

INSTALLATION & REQUIREMENTS

• Download and set up the “Main Core Boxx” if you have not already done so.
• Just unzip in your project folder and override the existing HTML pages.

 

SCREENSHOTS

 

 

 

CORE PAGES

• pages/TEMPLATE-top.php Top half of the HTML template.
• pages/TEMPLATE-bottom.php Bottom half of the HTML template.
• pages/PAGE-home.php The default home page.
• pages/PAGE-404.php Default “not found” page.
• pages/PAGE-demo.php Pretty much a compilation of examples below.
• assets/PAGE-cb.php Standard Core Boxx HTML-Javascript interface.

 

PAGES FOR THE USER MODULE

Feel free to delete if not required.

• pages/PAGE-register.php New user registration.
• pages/PAGE-login.php Login page.
• pages/PAGE-forgot.php Forgot password.
• assets/PAGE-register.php New user registration Javascript.
• assets/PAGE-login.php Login page Javascript.
• assets/PAGE-forgot.php Forgot password Javascript.

 

1) PAGE LOAD SPINNER

// TO SHOW SPINNER IN JS
cb.loading(1);
 
// TO HIDE SPINNER IN JS
cb.loading(0);

 

2) TOAST MESSAGE

// A "SUCCESS" TOAST MESSAGE
cb.toast(true, "TITLE", "MESSAGE");
 
// A "FAULURE" TOAST MESSAGE
cb.toast(false, "TITLE", "MESSAGE");

 

3) MODAL DIALOG BOX

// A "SUCCESS" TOAST MESSAGE
cb.modal("TITLE", "MESSAGE", "OPTIONAL FOOT");

 

 

4) API CALLS

cb.api({
  mod : "MODULE",
  req : "REQUEST",
  data : { "KEY" : "VALUE" },
  loading : true/false, // show loading spinner? default true.
  debug : true/false, // debug mode? default false.
  passmsg : "Add user successful", // toast message to show on success, false for none.
  nofail : true/false, // supress "fetch failed" message? default false.
  onpass : FUNCTION, // function to call on success, optional
  onfail : FUNCTION, // function to call on failure, optional
  onerr : FUNCTION // function to call on error, optional
});

 

5) AJAX FETCH CONTENT

cb.load({
  page : "PAGE", // http://site.com/PAGE/
  target : "cb-page-2", // target html element to load content into
  data : { "KEY" : "VALUE" },
  loading : true/false, // show loading screen? default false.
  debug : true/false, // debug mode? default false.
  onload : FUNCTION, // do this on content load, optional.
  onerr : FUNCTION // do this on ajax error, optional.
});

 

6) SINGLE PAGE APP

• There are 5 <div id="cb-page-N"> in the main content area.
• By default, we use cb-page-1 to display the content; cb-page-2 to cb-page-5 are hidden.
• We can use cb.lad() to AJAX load more content into cb-page-N, then use cb.page(N) to switch pages.

cb.load({
  page : "MYPAGE",
  target : "cb-page-2",
  data : { "KEY" : "VALUE" },
  onload : () => { cb.page(2); }
});

 

 

7) DEFINE PAGE TITLE & DESC

$_PMETA = [
  "title" => "FOO BAR TITLE",
  "desc" => "Test page title"
];
require PATH_PAGES . "TEMPLATE-top.php"; ?>
<p>Contents Here.</p>
<?php require PATH_PAGES . "TEMPLATE-bottom.php"; ?>

Just define $_PMETA["title"] and $_PMETA["desc"] before including TEMPLATE-top.php.

 

8) LOAD EXTRA JS & CSS

$_PMETA = [
  "load" => [
    ["s", "https://site.com/some.js", "defer"],
    ["s", "https://cdnjs.com/some.js", "async"],
    ["l", "https://site.com/some.css"]
  ]
];
require PATH_PAGES . "TEMPLATE-top.php"; ?>
<p>Contents Here.</p>
<?php require PATH_PAGES . "TEMPLATE-bottom.php"; ?>

You can edit the template and hard code them in. Or if it is just for a specific page – Define the list of scripts to load in $_PMETA["load"] before including TEMPLATE-top.php.