Skip to content

Importing HTML and CSS

For the next examples we will get help from two further libraries to make the page more beautiful: Bottstrap and Font Awesome. To install these libraries and inject them automatically we will use the @cc-external directory like in the chapter before:

1
2
npm i @cc-external/bootstrap
npm i @cc-external/fortawesome_fontawesome-free

Now we create an HTML structure for our container. Instead of creating each element by code we will outsource the HTML structure in an own file. This file will be placed in the src folder to include its content as variable in our library.

In this HTML structure we will point to an image which is located in the dist folder. To point to assets in the dist folder you can use a path as they would be in the src folder.

Let's create the HTML file which makes the matter clear:

src/amazing-button.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="amazing-button card h-100">
  <div class="card-header">
    Amazing Button <i class="fa fa-magic"></i>
  </div>
  <div class="card-body">
    <h5 class="card-title">Click on the button to see the miracle</h5>
    <p class="card-text">
      <button class="btn btn-secondary">Press Me</button>
    </p>
    <div class="result border border-primary mb-2">No Result</div>
    <img src="logo.png" />
  </div>
</div>

Now we create a stylesheet file. As in the JavaScript files we will use some really useful CSS proposals like nesting classes and variables. All these proposals will be transpiled into CSS that runs in mostly each relevant browser out there.

In this CSS we will point also to the image which is located in the dist folder. To point to assets in the dist folder you can use a path as they would be in the src folder as before.

src/amazing-button.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
.amazing-button {
  & .card-header {
    --my-color: #f30000;
    color: var(--my-color);
    background-image: url(logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: left;
  }
  & .card-title {
    text-decoration: underline;
  }
}

We write now a new class that imports the HTML structure, insert it into the container element and use the CSS (relevant places highlighted in yellow):

src/amazing-button-bootstrap.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import $ from "jquery";
import htmlTemplate from "./amazing-button.html";
import "./amazing-button.css";
export default class {
  #maximumNumber = 9;
  #button;
  get maximumNumber() {
    return this.#maximumNumber;
  }
  set maximumNumber(value) {
    this.#maximumNumber = value;
    this.#button.html(`Show number from 1 to ${this.#maximumNumber}`);
  }
  constructor(element) {
    console.debug("Starting Bootstrap Button");
    $(element).html(htmlTemplate);
    $(element).css({
      border: "1px solid red",
      textAlign: "center"
    });
    this.#button = $(element)
      .find("button")
      .html(`Show number from 1 to ${this.#maximumNumber}`)
      .on("click", () => {
        this.resultDiv.html(Math.floor(Math.random() * this.#maximumNumber));
      });
    this.resultDiv = $(element).find("div.result");
  }
}

Let's add a third container in our static HTML file in which we will start the Bootstrap based application:

static/index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>CodeCoupler</title>
    <style>
      .test-container {
        width: 400px;
        height: 350px;
        margin: 100px;
        border: 1px solid green;
        float: left;
      }
    </style>
  </head>

  <body>
    <div id="test-container-vanilla" class="test-container"></div>
    <div id="test-container-jquery" class="test-container"></div>
    <div id="test-container-bootstrap" class="test-container"></div>
    <div class="test-container" style="overflow: scroll">
      <%= htmlWebpackPlugin.tags.headTags %>
    </div>
    <div class="test-container" style="overflow: scroll">
      <%- include inc/part.html %>
    </div>
  </body>
</html>

Finally we will change the index.js and start our new Bootstrap based library in the third container:

src/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { default as MyVanillaApp } from "./amazing-button-vanilla";
import { default as MyJQueryApp } from "./amazing-button-jquery";
import { default as MyBootstrapApp } from "./amazing-button-bootstrap";

let myVanillaInstance = new MyVanillaApp(
  document.getElementById("test-container-vanilla")
);
myVanillaInstance.maximumNumber = 99;

let myJQueryInstance = new MyJQueryApp(
  document.getElementById("test-container-jquery")
);
myJQueryInstance.maximumNumber = 49;

let myBootstrapInstance = new MyBootstrapApp(
  document.getElementById("test-container-bootstrap")
);
myBootstrapInstance.maximumNumber = 79;

Now you should see the running example in your browser.