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 every 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
14
15
:root {
  --my-color: #f30000;
}
.amazing-button {
  & .card-header {
    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
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) {
    $(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");
  }
}

Finally we will change the index.js and switch to our new Bootstrap based library:

src/index.js

1
2
3
import { default as AmazingButton } from "./amazing-button-bootstrap";
let myClass = new AmazingButton(document.getElementById("test-container"));
myClass.maximumNumber = 99;

Now you should see the running example in your browser.

Back to top