juanmiguelbesada/amp-bundle

Installs: 8

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 0

Forks: 0

Open Issues: 0

Language:HTML

Type:symfony-bundle

v1.1.0 2018-12-11 12:20 UTC

This package is auto-updated.

Last update: 2024-04-12 04:08:25 UTC


README

Installation

Applications that use Symfony Flex

Open a command console, enter your project directory and execute:

$ composer require juanmiguelbesada/amp-bundle

Applications that don't use Symfony Flex

Step 1: Download the Bundle

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:

$ composer require juanmiguelbesada/amp-bundle

This command requires you to have Composer installed globally, as explained in the installation chapter of the Composer documentation.

Step 2: Enable the Bundle

Then, enable the bundle by adding it to the list of registered bundles in the app/AppKernel.php file of your project:

<?php
// app/AppKernel.php

// ...
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            // ...
            new JuanMiguelBesada\AMPBundle\AMPBundle(),
        );

        // ...
    }

    // ...
}

How to use

Use this bundle is so simple, you only have to extends the base template.

Out of the box you will get a AMP validated template with a min modifier version of basscss and normalize.css

{# base.html.twig #}
{% extends "@AMP/base.html.twig" %}

{% block title %}Welcome to AMP{% endblock %}

{% block body %}
    This is a valid AMP
{% endblock %}

Custom styles

AmpBundle includes a twig filter to help minify your custom css. It uses the Minify library by Matthias Mullie.

The minifyCSS filter, strip comments, remove whitespaces, and remove any !important declaration from your css.

{# base.html.twig #}
{% extends "@AMP/base.html.twig" %}

{% block title %}Welcome to AMP{% endblock %}

{% block amp_custom_styles %}
    {{ parent() }}
    {{ include('my_custom_twig_css.css.twig')|minifyCSS }}
{% endblock amp_custom_styles %}

{% block body %}
    This is a valid AMP
{% endblock %}