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
Understand How Bissetii Loads CSS
Depending on your Bissetii version, the CSS loading varies accordingly.
v1.13.0 and above
Bissetii now fully loads all CSS files (including its
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)
Main Sass/Scss Configuration Files
assets/amp.sass using its library
assets/css/bissetii. Hence, you should leave them as it is.
Depending on your Bissetii version, the configurations varies accordingly.
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:
- [Basic Index ID] - Keep it numerical for positioning purposes.
- Algorithm - The selected processing algorithm to handle this CSS. The
values can be the following:
compresswill concatenate all CSS files with the same process algorithm into a single large CSS file.
includewill add each CSS files with the same process algorithm with dedicated
- URL - 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:
compress, place it inside
include, place it inside
- CrossOrigin - Cross Origin ID. The ID for cross-origin verification when
downloading the CSS from other origin. This requires a valid
Integrity in order to work. 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 - The algorithmic shasum value for cross-origin request file verification. It need a valid CrossOrigin in order to work.
- Disabled - The
disabledattribute flag. Set
trueto disable this CSS to load.
- Media - The
media=attribute for downloading and loading the stylesheet.
onload=HTML attribute. This allows one to asynchonously load the CSS as long as the process algorithm permits.
v1.12.0 to Version
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.
To include the Sass/Scss asset concatenations, you add the relative URL into
includes.CSS map table list.
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.