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.
v1.13.0 and above
Bissetii loads all its CSS files asynchonously.
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
assets/amp.sass using its library
assets/css/bissetii. Hence, you should leave them as it is.
To include external CSS files, the configurations varies depending on the Bissetii version you use.
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]- COMPULSORY
- Keep it numerical for positioning purposes.
- 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).
- The selected processing algorithm to handle this CSS. The values can any of the following:
- The CSS URL source. The URL can be Bissetii’s compatible relative URL.
Depending on the Algorithm, your CSS file should be stored in
compress, place it inside
include, place it inside
- 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:
- Cross Origin ID. The ID for cross-origin verification when downloading
the CSS from other origin. This requires a valid
Integrityvalue 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.
- Cross Origin ID. The ID for cross-origin verification when downloading the CSS from other origin. This requires a valid
- The algorithmic shasum value for cross-origin request file
verification. It need a valid
CrossOriginvalue in order to operate properly.
- The algorithmic shasum value for cross-origin request file verification. It need a valid
trueto disable this CSS to load.
media=attribute for downloading and when to load 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.
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.