Totem module: loadCSS
Twig partial for outputting your stylesheets in the loadCSS pattern to load your css asynchronous.
This module is created for Totem projects but can also be used in any other Twig related project.
Installation
Install totem.module.loadcss with npm (we assume you have pre-installed node.js).
$ npm install totem.module.loadcss --saveHow to include loadcss.twig
In the following example we will include loadcss.twig from our default page. You can define multiple stylesheets at the include. You this by defining the stylesheets parameter.
Source
<head> ... <link rel="stylesheet" href="main.css"> {% include 'node_modules/totem.module.loadcss/partials/loadcss.twig' with { stylesheets: [ 'foo.css', 'bar.css' ] } %} ...</head>Result:
Include onloadCSS.js
This module will output the Javascript functions for browser that support the onload event. You can extend the ouput by setting the include_onload_fallback parameter to true
Base parameter
loadcss.twig will include the loadCSS Javascript Functions from itself. You can include the loadCSS Javascript files from another location by defining the base parameter.
Using the base parameter is optional since we asum you can use the totem_submodules:: namespace. The loadCSS javascript file will also be synced to your dist When using this module within the Totem project structure.
<head> ... <link rel="stylesheet" href="main.css"> {% include 'node_modules/totem.module.loadcss/partials/loadcss.twig' with { stylesheets: [ 'foo.css', 'bar.css' ], base: 'dist/resources/' {# Lookup into: `dist/resources/totem.module.loadcss/` #} } %} ...</head>loadCSS
This module uses the original loadCSS package created by Filament group. Any bugs related to the actual loadCSS functions should be reported at it's Github Repository