totemcss-module-loadcss
Advanced tools
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.
Install totemcss-module-loadcss with npm (we assume you have pre-installed node.js).
$ npm install totemcss-module-loadcss --save
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.
<head>
...
<link rel="stylesheet" href="main.css">
{% include 'node_modules/totemcss-module-loadcss/partials/loadcss.twig' with {
stylesheets: [
'foo.css',
'bar.css'
]
} %}
...
</head>
<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>
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
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>
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
FAQs
Totemcss module with fg-loadcss snippets for twig
The npm package totemcss-module-loadcss receives a total of 0 weekly downloads. As such, totemcss-module-loadcss popularity was classified as not popular.
We found that totemcss-module-loadcss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.