Include CSS Files with Hugo

Although Bissetii itself is heading towards CSS framework, it allows its Hugo interface to include external or custom CSS files seamelessly. That way, you are not restricted to only use Bissetii CSS framework.

Loading CSS and Assets

Bissetii always load its assets and external files asynchonously by default to prevent page blocking. This loading behavior availability depends on the Bissetii version you use.

Version `v1.13.0` and above

Bissetii loads all its CSS files asynchonously.

Version `v1.12.5` and below

Bissetii loads each CSS components both synchonous and asynchnonous manner. The sequences are as follows:

Main Sass Codes (synchnonous loading)
Plain CSS Inclusion (asynchonous loading)
Asset Concatenation (asynchonous loading)

Sass/Scss Configuration Files

Bissetii compile assets/main.sass and assets/amp.sass using its library assets/css/bissetii. Hence, you should leave them as it is.

Including CSS

To include external CSS files, the configurations varies depending on the Bissetii version you use.

Version `v1.13.0` onwards

Starting from v1.13.0, Bissetii uses a single data file located in data/bissetii/assets/css.toml to organize the CSS file inclusion. This is mainly to facilitate additional security features like SRI integrity checking and cross-origin ID.

Each CSS file metadata and how it should be loaded is stated in each entry complying to the following pattern:

1
2
3
4
5
6
7
8


[0]
Algorithm = "include"
URL = "/css/myCSS.min.css"
CrossOrigin = "anonymous"
Integrity = "sha512-awraerrhe....reagaeg"
Disabled = false
Media = "all"
OnLoad = 'this.media="all"'           # be careful with the quote

[Basic Index ID] - COMPULSORY
- Keep it numerical for positioning purposes.
Algorithm - COMPULSORY
- The selected processing algorithm to handle this CSS. The values can any of the following:
  - compress - concatenate all CSS files with the same process algorithm into a single large CSS file.
  - include - add each CSS files with the same process algorithm with dedicated <link> tag (multiple network downloads).
URL - COMPULSORY
- The CSS URL source. The URL can be Bissetii’s compatible relative URL. Depending on the Algorithm, your CSS file should be stored in different directory:
  - For compress, place it inside assets/ directory.
  - For include, place it inside static/ directory.
CrossOrigin - COMPULSORY
- Cross Origin ID. The ID for cross-origin verification when downloading the CSS from other origin. This requires a valid Integrity value in order to operate properly. The possible values are:
  - anonymous - anyone can download via cross-origin as long as SRI is verified.
  - use-credentials - use request credentials for verifications.
Integrity - COMPULSORY
- The algorithmic shasum value for cross-origin request file verification. It need a valid CrossOrigin value in order to operate properly.
Disabled - OPTIONAL
- The disabled attribute flag.
- Set true to disable this CSS to load.
Media - COMPULSORY
- The media= attribute for downloading and when to load the stylesheet.
OnLoad - COMPULSORY
- The Javascript onload= HTML attribute. This allows one to asynchonously load the CSS as long as the process algorithm permits.

Version `v1.12.0` to Version `v1.12.5`

Starting from v1.12.0 to v1.12.5, Bissetii uses the TOML map table to organize the configuration parameters inside /data/bissetii toml data file.

The responsible file for including the list of CSS / Sass / Scss files is located in:

pattern  :                data/bissetii/includes.toml
directory:          docs/.data/bissetii/
repo-docs:          docs/.data/bissetii/includes.toml

Plain CSS Inclusion

To include plain CSS, you add the URL into the includes.CSS map table list.

Example:

1
2
3
4


[CSS]
files  = [                                   #--> just include the CSS-es
       #"https://cdn.example.com/myCSS.css"
]

Asset Concatenation

To include the Sass/Scss asset concatenations, you add the relative URL into the includes.CSS map table list.