Starter Template

Getting started with the Brighter World coded elements is easy! Based on Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, you can quickly build beautiful, responsive web experiences.

Simple HTML Template

The template below includes all you need to get started with our Brighter World web branding. Including responsive meta tags, Bootstrap framework, Brighter World CSS and JS.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Brighter World CSS -->
    <link rel="stylesheet" href="https://documents.mcmaster.ca/www/cdn/css/1.0/mcm-bw.css">
  <!-- Site Styles -->
  <link href="css/site.css" rel="stylesheet" media="screen">
  <!-- Brighter World Fonts -->
  <style>
    @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i|Roboto:300,300i,700,700i');
  </style>
    <title>Hello, world!</title>
 <!-- Insert Brighter World Header and Footer Script Here -->
 <!-- https://documents.mcmaster.ca/www/brighterworld/builder/ -->
  </head>
  <body>

     <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- Brighter World JS -->
    <script src="https://documents.mcmaster.ca/www/cdn/js/1.0/mcm-bw.js"></script>
  </body>
</html>