See also – Standardization in CSS for element names and what elements should be positioned only in the global CSS

Look at the standardization in CSS page for standard element names!!!

Every block should have the following structure. Of course, block_name should be replaced with the name of the block.

In blocks directory

block_name directory – This directory should be inside the blocks directory and have the following folders and files

  • audio – directory that contains audio. May be empty
  • images – directory that contains images
  • block_name.html – file where block game is played/ content is shown
  • block_name_config.js – where parameters that the typical user would change appear

In _base directory

  • css/block_name.css
  • js/block_name.js

block_name.html file structure

Statements/ links to begin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Intro</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../_base/bootstrap/css/bootstrap.min.css">
    <link href="../../_base/css/game_style.css" rel="stylesheet">

There may be some other links here. There will probably be a block_name.css file linked

<script type="module">
    import * as config from "./block_name_config.js";
    import * as graphic_novel from "../../_base/js/block_name.js";
    block_name.setConfig(config);
</script>

There should not be any styles in here once the block is ready for production. Styles should be in ../../_base/css/block_name. css

</head>
<body>
<div id="wrapper" class="container">

There may be another div in here if this is a visual novel block or for some other reason. 

<div id="main" class="row mt-0 g-0">

There will probably be some divs in here specific to the block.

   </div>


</div>
<!-- There could be a script added here for a specific block -->
</body>
</html>