totemcss-module-loadcss v0.1.2
Totemcss module: loadCSS
Twig partial for outputting your stylesheets in the loadCSS pattern to load your css asynchronous.
This module is created for Totemcss projects but can also be used in any other Twig related project.
Installation
Install totemcss-module-loadcss with npm (we assume you have pre-installed node.js).
$ npm install totemcss-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/totemcss-module-loadcss/partials/loadcss.twig' with {
stylesheets: [
'foo.css',
'bar.css'
]
} %}
...
</head>Result:
<link rel="preload" href="foo.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="bar.css" as="style" onload="this.rel='stylesheet'">
<noscript>
<link rel="stylesheet" href="foo.css">
<link rel="stylesheet" href="bar.css">
</noscript>
<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
(function(){ ... }()); /* loadCSS.min.js */
(function(){ ... }()); /* cssrelpreload.min.js */
</script>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 totemcss_packages:: namespace. The loadCSS javascript file will also be synced to your dist When using this module within the Totemcss project structure.
<head>
...
<link rel="stylesheet" href="main.css">
{% include 'node_modules/totemcss-module-loadcss/partials/loadcss.twig' with {
stylesheets: [
'foo.css',
'bar.css'
],
base: 'dist/resources/' {# Lookup into: `dist/resources/totemcss-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