<commit_before><div class="[ o-basic-layout ] {{ animation?'js-animations':'' }}">
    {% include 'includes/sidebar.twig' with{'logoClass': animation?'intro-animation':'', 'menuClass': animation?'intro-animation':''} %}
    <main class="[ c-main ] {{ animation?'intro-animation':'' }}">
        <h2 class="c-page-title">Automatic critical css with twig and PHP.</h2>
        {% include 'includes/sharelinks.twig' %}
        <p>Small php library in combination with a twig extention that allows you to annotate above-the-fold-html in your twig files which will than extract all the necessary CSS.</p>
        <p>In combination with loadCSS you can setup a critcal CSS solution quite easy.</p>

        <h3>Key features</h3>
        <ul>
            <li>Automatically generated for each page</li>
            <li>Manual control through <code class="language-twig">{{ '{% fold %}{% endfold %}' }}</code> tags</li>
            <li>Dynamically resolves CSS used on each page</li>
        </ul>
        
        <h3>Documentation & Installation</h3>
        <p><a href="https://github.com/JanDC/critical-css">Github</a> or <a href="https://packagist.org/packages/jandc/critical-css">Packagist</a></p>

        <h3>Demo</h3>
        <p>
            <a rel="noopener" target="_blank" href="/with">/with</a> – <a rel="noopener" target="_blank" title="Benchmark with critical CSS enabled on a slow 3G connection" href="https://www.webpagetest.org/result/171021_SB_2b475c119a4e5000c88dabea8a37dac3/">benchmark <em>*</em></a> – <em>critical CSS enabled</em><br>
            <a rel="noopener" target="_blank" href="/without">/without</a> – <a rel="noopener" target="_blank" title="Benchmark with critical CSS enabled on a slow 3G connection" href="https://www.webpagetest.org/result/171021_V7_440ec64c9313718fb0a6290d44115ecd/">benchmark <em>*</em></a> – <em>critical CSS <b>not</b>
                enabled</em>
        </p>
        <p>Take a look at these page sources to see the critical CSS in action.</p>
        <p><em>*</em> These benchmarks are run on a slow 3G connection. This is where critical CSS is the most important.</p>

        <h3 id="usage">Usage</h3>
        <pre class="u-margin-bottom-none">
<code class="language-twig">{% filter e %}
{{ '{% fold %}' }}
    <button class=”your-css-class”>Button</button>
{{ '{% endfold %}' }}{% endfilter %}<commit_msg>* Added key feature<commit_after><div class="[ o-basic-layout ] {{ animation?'js-animations':'' }}">
    {% include 'includes/sidebar.twig' with{'logoClass': animation?'intro-animation':'', 'menuClass': animation?'intro-animation':''} %}
    <main class="[ c-main ] {{ animation?'intro-animation':'' }}">
        <h2 class="c-page-title">Automatic critical css with twig and PHP.</h2>
        {% include 'includes/sharelinks.twig' %}
        <p>Small php library in combination with a twig extention that allows you to annotate above-the-fold-html in your twig files which will than extract all the necessary CSS.</p>
        <p>In combination with loadCSS you can setup a critcal CSS solution quite easy.</p>

        <h3>Key features</h3>
        <ul>
            <li>PHP only, no Node.js required.</li>
            <li>Automatically generated for each page</li>
            <li>Manual control through <code class="language-twig">{{ '{% fold %}{% endfold %}' }}</code> tags</li>
            <li>Dynamically resolves CSS used on each page</li>
        </ul>
        
        <h3>Documentation & Installation</h3>
        <p><a href="https://github.com/JanDC/critical-css">Github</a> or <a href="https://packagist.org/packages/jandc/critical-css">Packagist</a></p>

        <h3>Demo</h3>
        <p>
            <a rel="noopener" target="_blank" href="/with">/with</a> – <a rel="noopener" target="_blank" title="Benchmark with critical CSS enabled on a slow 3G connection" href="https://www.webpagetest.org/result/171021_SB_2b475c119a4e5000c88dabea8a37dac3/">benchmark <em>*</em></a> – <em>critical CSS enabled</em><br>
            <a rel="noopener" target="_blank" href="/without">/without</a> – <a rel="noopener" target="_blank" title="Benchmark with critical CSS enabled on a slow 3G connection" href="https://www.webpagetest.org/result/171021_V7_440ec64c9313718fb0a6290d44115ecd/">benchmark <em>*</em></a> – <em>critical CSS <b>not</b>
                enabled</em>
        </p>
        <p>Take a look at these page sources to see the critical CSS in action.</p>
        <p><em>*</em> These benchmarks are run on a slow 3G connection. This is where critical CSS is the most important.</p>

        <h3 id="usage">Usage</h3>
        <pre class="u-margin-bottom-none">
<code class="language-twig">{% filter e %}
{{ '{% fold %}' }}
    <button class=”your-css-class”>Button</button>
{{ '{% endfold %}' }}{% endfilter %}
{'fraction_non_alphanumeric': 0.1696652719665272, 'fraction_numerical': 0.027615062761506277, 'mean_word_length': 3.378205128205128, 'pattern_counts': {'":': 0, '<': 131, '<?xml version=': 0, '>': 131, 'https://': 8, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5915920', 'n_tokens_mistral': 1647, 'n_tokens_neox': 1521, 'n_words': 396}