ether/critical

A Critical CSS generator for Craft CMS

Maintainers

Details

github.com/ethercreative/critical

Source

Issues

Documentation

Installs: 63

Dependents: 0

Suggesters: 0

Security: 0

Stars: 2

Watchers: 4

Forks: 1

Open Issues: 4

Type:craft-plugin

0.0.1-alpha.5 2018-11-05 12:32 UTC

Requires

proprietary 352b234dad5079a1d756dd1ea623291ff743ef34

csscmscriticalCraftcraftcmscraft-plugin

This package is auto-updated.

Last update: 2024-04-06 08:58:52 UTC

README

A Critical CSS generator for Craft CMS.

Usage

Add the critical-css hook to your head tag:

<head>
    {# ... #}
    
    {% hook 'critical-css' %}
    
    {# ... #}
</head>

Wrap anything you consider to be above the fold with fold tags:

{% fold %}

...

{% endfold %}

The fold tag supports an If statement, useful when using the tag in a loop:

{% for block in entry.pageContent %}
    {% fold if loop.index < 2 %}
        ...
    {% endfold %}
{% endfor %}

Upcoming Features

  • Exclude @font-face's if their font isn't referenced in critical.
  • Ability to ignore certain CSS files.
  • Ability to clear all critical CSS files
  • Ability to clear all critical CSS files for a certain template
  • Ability to (re)gen critical en masse (loop through all elements)
  • Support all possible templates (products, categories, static, etc.)
  • Option to generate missing critical on page load
  • Customize Critical CSS save location.