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:

  1. Main Sass Codes (synchnonous loading)
  2. Plain CSS Inclusion (asynchonous loading)
  3. 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

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.

Example:

1
2
3
4
[CSS]
assets = [                                 #--> compile into 1 CSS
       #"css/myCSS.css"                    #--> $assetDir/css/myCSS.css
]

Wrapping Up

That is all for including external CSS files with Bissetii into Hugo. If you have any question to ask us directly, please feel free to raise it at our GitLab Issues Section. We will be happy to assist you.