How To Include External CSS File

Apart from using Bissetii styling, you can also include your very own CSS files for additional stylings. In most cases, you can include an external CSS designs add-on to extend from Bissetii's simplified inclusion mechanism.

This feature is available starting from v1.11.0 onwards.

Understand How Bissetii Loads CSS

Depending on your Bissetii version, the CSS loading varies accordingly.

Version v1.13.0 and above

Bissetii now fully loads all CSS files (including its bissetii-main.min.css) 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)

Main 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

Depending on your Bissetii version, the configurations varies accordingly.

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
]

Epilouge

Now that you know how to include external CSS into your website. If you have any questions, feel free to raise them in our Issues Section.