Brightspace Page Templates V4

Dependencies / Afhankelijkheden

The page templates rely on 3 elements to function properly.

Custom CSS and JS

I have written a small amount of custom CSS and JavaScript to ensure specific features work correctly within Brightspace, as the Bootstrap library did not run as expected.

Due to Brightspace caching its files, I had to increment the version number with each CSS update. Currently, all page templates are using CSS version 8. Any external CSS changes require updating all page template URLs to reflect the new CSS file name with a version bump (+1).

CSS file path (within hanzeacc site):

/shared/HTML-Template-Library/HTML-Templates-V4-Hanze/_assets/css/hanzestyle-8.css

JS file path (within hanzeacc site):

/shared/HTML-Template-Library/HTML-Templates-V4-Hanze/_assets/js/hanzejs.js

Bootstrap SASS Library

The Bootstrap library is also included in the page templates to speed up development and ensure responsiveness across devices.

The current Bootstrap project files are located at:

/shared/HTML-Template-Library/HTML-Templates-V4-Hanze/_assets/thirdpartylib/bootstrap-5.3.3/…

The current Bootstrap version is v5.3.3. While updates may be needed in the future, I don’t expect this to happen more than once a year.

Remix Icons

I’ve also integrated Remix Icons, an open-source, neutral-style icon system free for personal and commercial use. Remix Icons are licensed under the Apache License.

Current Remix version: v4.5.0. Instead of using physical files, the icons are linked via a permanent CDN. These CDN links may need updating annually to reflect new version releases.

Boilerplate Code for Blank Template

This is the main code needed for the Blank template to work.

<!DOCTYPE html>
<html lang="en-US" xml:lang="EN-US"><head>
    <!-- 
    #####
    HEAD Element;
    Contains the CDN links for stylesheets and scripts as well as the custom Hanze css file.
    #####
    -->
	
       <!-- Custom CSS -->
        <link rel="stylesheet" href="/shared/HTML-Template-Library/HTML-Templates-V4-Hanze/pages/../_assets/css/hanzestyle-8.css">
        <script src="/shared/HTML-Template-Library/HTML-Templates-V4-Hanze/pages/../_assets/js/hanzejs.js"></script>

		<!-- Bootstrap CDN - V5.3.3 (CSS & JS Bundle) -->
        <link rel="stylesheet" href="/shared/HTML-Template-Library/HTML-Templates-V4-Hanze/pages/../_assets/thirdpartylib/bootstrap-5.3.3/css/bootstrap.min.css">
        <script src="/shared/HTML-Template-Library/HTML-Templates-V4-Hanze/pages/../_assets/thirdpartylib/bootstrap-5.3.3/js/bootstrap.bundle.min.js"></script>
    
		<!-- Remix Icons - V4.5.0 (SVG Icons Bundle - Open Source) -->
		<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
	</head>
    <body style="padding-left: .5rem;">
        <p></p>
        <p></p>
    </body>
</html>
Next Templates Explanation