Chapters

23 Chapters | 2:07:02 |

01

¿Un mundo sin sistemas de construcción?

4:04
02

Hacer JS moderno directamente en tu navegador

7:41
03

Instalación de AssetMapper

3:03
04

Mapear Activos

6:01
05

CSS e imágenes de fondo

3:26
06

cSS de terceros

6:09
07

Añadir fuentes

3:02
08

CSS de Tailwind

5:47
09

JavaScript y mapa de importación

7:38
10

importmap:require - Libs JS de terceros

5:07
11

Importar archivos específicos de un paquete

4:54
12

Añadir Stimulus

8:04
13

Paquetes Symfony UX Stimulus

4:00
14

Controladores de Stimulus perezosos

2:28
15

Depurando

5:12
16

CSS y JS específicos de la página

5:05
17

Excluir archivos

3:53
18

Despliegue en Platform.sh

6:29
19

Configurar el despliegue de platform.sh

9:08
20

Desplegar los activos

5:04
21

Almacenamiento en caché a largo plazo, compresión y combinación de archivos

5:27
22

Optimización y perfiles

6:06
23

Carga previa

9:14

> Symfony 6 > AssetMapper: JS Moderno sin Sistema de Compilación

Buy Access to Course

06.

cSS de terceros

Autoplay

Previous Challenge

Next Chapter

Hemos hablado de añadir CSS a nuestro sitio, pero ¿qué pasa con el CSS de terceros, como Bootstrap? Con un sistema de compilación como Encore, tenemos un archivo package.json, y podemos ejecutarlo:

npm install bootstrap

En AssetMapper, como no hay Node, no tenemos un sistema tan fácil para coger paquetes CSS. Pero aún podemos obtenerlos.

Encontrar paquetes en jsDelivr

Me gusta utilizar jsDelivr para esto: un CDN para todos los paquetes NPM. Aunque al final no lo utilices como CDN, es una buena forma de encontrar y descargar lo que necesitas.

Busca "Bootstrap" y... ahí está. Muchas veces, encontrarás el archivo CSS que necesitas justo aquí arriba, así. Le daré a "Copiar HTML + ISR". Si no ves el archivo CSS aquí... o necesitas uno diferente, puedes hacer clic en la pestaña "Archivos" para examinar todo el paquete. Por ejemplo - dist/css/ y luego lo que necesites.

Vale, sabemos que el CSS con AssetMapper es deliciosamente aburrido... así que vuelve al bloque stylesheets y, encima de styles/app.css, pega la nueva etiquetalink.

            Copy Code

                            Show All Lines

                        74 lines
            |
            templates/base.html.twig
        
                Show Lines

                                                    // ... lines 1 - 2
                            
                <head>
        
                Show Lines

                                                    // ... lines 4 - 11
                            
                    {% block stylesheets %}
        
                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha256-fx038NkLY4U1TCrBDiu5FWPEa9eiZu01EiLryshJbCo=" crossorigin="anonymous">
        
                Show Lines

                                                    // ... line 14
                            
                    {% endblock %}
        
                Show Lines

                                                    // ... lines 16 - 20
                            
                </head>
        
                Show Lines

                                                    // ... lines 22 - 74

Si quieres evitar usar el CDN, puedes descargar este archivo directamente en tu proyecto. Como no hay un sistema de paquetes como NPM, yo probablemente crearía un directorio assets/vendor/ y pondría el archivo dentro de él. Luego confirmaría ese directorio assets/vendor/ en Git para mantenerlo en tu proyecto y versionado. Cometer archivos de proveedor en tu proyecto no es asombroso, pero no es un gran problema y es tu mejor opción en este momento si quieres evitar un CDN. Me verás hacer esto más adelante para un archivo JavaScript.

Vale, ¡vamos a ver si esto funciona! Desplázate hasta la mitad de la página y añade un button con btn btn-primary para utilizar algunos estilos comunes de Bootstrap.

            Copy Code

                            Show All Lines

                        74 lines
            |
            templates/base.html.twig
        
                Show Lines

                                                    // ... lines 1 - 21
                            
                <body class="bg-gray-800 text-white">
        
                Show Lines

                                                    // ... lines 23 - 50
                            
                    <button class="btn btn-primary">Primary Button</button>
        
                Show Lines

                                                    // ... lines 52 - 71
                            
                </body>
        
                Show Lines

                                                    // ... lines 73 - 74

Cuando vayamos al sitio y actualicemos... ¡funciona! ¡Precioso!

¿Bootstrap Sass?

Vale, pero ¿y si quiero modificar Bootstrap? El propio Bootstrap está construido con Sass. Así que, si quieres, puedes crear archivos Sass que anulen las variables de Bootstrap, por ejemplo para cambiar los colores por defecto.

Hay dos cosas importantes al respecto. En primer lugar, puedes utilizar Sass con AssetMapper. Hay detalles en la documentación sobre cómo hacerlo... y esperamos añadir pronto un bundle para hacerlo aún más fácil.

Además, en un momento, vamos a añadir Tailwind CSS a nuestro sitio, que no requiere Sass, pero tiene un flujo de trabajo muy similar porque Tailwind necesita ser "construido".

Y, si quieres utilizar Sass con Bootstrap, una forma sencilla de obtener el código fuente de Bootstrap es a través del paquete oficial de Composer para Bootstrap:

composer require twbs/bootstrap

Si esto es algo que quieres, consulta la documentación de AssetMapper.

Variables CSS de Bootstrap

La segunda cosa importante es que, dependiendo de lo que quieras hacer, puede que no necesites utilizar Sass para personalizar Bootstrap. Esto se debe a que Bootstrap también expone variables CSS, aunque no son tan potentes.

Podemos ver esto más abajo en la sección "Personalizar" "Variables CSS". Las variables CSS son una función del navegador que te permite establecer variables dentro del CSS y luego hacer referencia a ellas. No es necesario usar Sass.

Por ejemplo, en app.css... en la parte superior... añade un pseudo selector :root, que es un lugar habitual para inicializar variables que se utilizarán más adelante. Aquí, anula una variable CSS que Bootstrap proporciona y utiliza: --bs-border-radius. Establécela en 1rem.

            Copy Code

                            Show All Lines

                        15 lines
            |
            assets/styles/app.css
        
            :root {
        
                --bs-border-radius: 1rem;
        
            }
        
                Show Lines

                                                    // ... lines 4 - 15

Esto debería hacer que los bordes sean notablemente más grandes. De vuelta al navegador... ¡funciona! El radio del borde es ahora mayor en todo el sitio. Esta es una de las variables que encontrarás en la documentación de Bootstrap.

Sin embargo, no siempre es tan sencillo. Digamos que queremos anular este color primario. Podrías pensar que puedes hacerlo buscando "primario"... aquí arriba... y anulando algo como --bs-primary. Eso es más o menos correcto.

Si inspeccionas nuestro botón, este color es el color de fondo real. Pero mira. Intenta anularlo cambiándolo a un color ligeramente más claro. Luego vuelve y pruébalo. No hace nada.

            Copy Code

                            Show All Lines

                        16 lines
            |
            assets/styles/app.css
        
            :root {
        
                --bs-primary: #0de1fd;
        
                Show Lines

                                                    // ... line 3
                            
            }
        
                Show Lines

                                                    // ... lines 5 - 16

Copia la URL del CDN, ponla en tu navegador y quita el .min para que podamos ver qué está pasando. Encima, está configurando todas esas bonitas variables CSS. Busca btn-primary. No voy a profundizar demasiado, pero dentro de .btn-primary, está configurando estas variables CSS con estos colores codificados, en lugar de utilizar otras variables CSS que podemos controlar.

¿Y qué hacemos? En este caso, volvemos a la estrategia básica de anular CSS... aunque al menos podemos utilizar variables CSS cuando hacemos esto.

Vuelve a app.css y pegaré algo de estilo para .btn-primary. Esto anula las variables establecidas por Bootstrap con un color diferente. Al menos estamos utilizando la variable bs-primary: la establecemos aquí y podemos hacer referencia a ella en tantos sitios como queramos. Así pues, una anulación CSS bastante básica, pero con menos repeticiones.

            Copy Code

                            Show All Lines

                        24 lines
            |
            assets/styles/app.css
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            .btn-primary {
        
                --bs-btn-bg: var(--bs-primary);
        
                --bs-btn-border-color: var(--bs-primary);
        
                --bs-btn-disabled-bg: var(--bs-primary);
        
                --bs-btn-disabled-border-color: var(--bs-primary);
        
                --bs-btn-hover-bg: #0bbfd7;
        
                --bs-btn-hover-border-color: #0ba7d7;
        
            }
        
                Show Lines

                                                    // ... lines 13 - 24

Y cuando lo probamos... cambia el color. ¡Genial! Así que las variables CSS son una forma de personalizar Bootstrap, pero Sass sigue siendo una opción aún más potente.

A continuación: vamos a coger una cosa más de estilo externo: ¡una fuente de código abierto!

4 Comments

Sort By

lexhartman 10 months ago edited

I have (or is it "am in") a dillema. I see you updated the script with a link to the sassbundle (https://symfony.com/bundles/SassBundle/current/index.html). BUT on that page there is a tip that says: "While this bundle is great, you may not need to use Sass!". Development goes fast so i understand the 'overthinkings'. What would you recommend now to do? I would like to use Bootstrap with Assetmapper in my Symfony 7 project, what would be the best practice?

1 | Reply |

Victor SFCASTS lexhartman 10 months ago edited

Hey @lexhartman

Good discovery on that note! It mostly depends on how you use Sass in your project, I mean, what exactly features from Sass you're using in your project. I would recommend you to read this blog post: https://gomakethings.com/is-it-time-to-drop-sass/ - to see what you can do with the latest CSS and what you can't do (i.e. what features are only available in Sass). So, in short, if you don't need those extra features that are available only in Sass, or you can just get rid of them in favor of a simpler CSS way - then you don't need Sass in your project at all, and so you don't need that bundle too - just write plain CSS files. But if you need them - we covered you with this Sass bundle, use it :)

I hope this helps!

Cheers!

| Reply |

John-S 3 months ago

In installed bootstrap via composer:
php bin/console importmap:require bootstrap

app.css(background-color {skyblue}) not working

//app.js
import './styles/app.css';
import 'bootstrap/dist/css/bootstrap.min.css';

app.css working:

import 'bootstrap/dist/css/bootstrap.min.css';
import './styles/app.css';

If I add one more css file:

// purple.css
body {
    background-color: purple;
}

app.css purple.css overwrites default app.css(skyblue):

// bootstrap css
import 'bootstrap/dist/css/bootstrap.min.css';
// main css
import './styles/app.css';
// purple css
import './styles/purple.css';

It seems that later files overwrites the former ones. Am It is what it is or the way i'm including css is not recommended ?

| Reply |

Victor SFCASTS John-S 3 months ago

Hey John,

Good research! The order of included files is indeed important, and as you can see the latter included file will override previous properties if there will be a conflict, i.e. if you declare the same in both files with different values, so you just need to keep it in mind. And yeah, usually you may want to include all the third-party CSS files like Bootstrap one, and only then your own custom styles that will help you to override some defaults from those files, that's the correct strategy :)

I hope this helps!

Cheers!

| Reply |

Symfony 6.3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.1",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "^4.0", // v4.2.0
        "doctrine/doctrine-bundle": "^2.7", // 2.10.0
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.4
        "doctrine/orm": "^2.12", // 2.15.2
        "knplabs/knp-time-bundle": "^1.18", // v1.20.0
        "pagerfanta/doctrine-orm-adapter": "^4.0", // v4.1.0
        "pagerfanta/twig": "^4.0", // v4.1.0
        "stof/doctrine-extensions-bundle": "^1.7", // v1.7.1
        "symfony/asset": "6.3.*", // v6.3.0
        "symfony/asset-mapper": "6.3.*", // v6.3.0
        "symfony/console": "6.3.*", // v6.3.0
        "symfony/dotenv": "6.3.*", // v6.3.0
        "symfony/flex": "^2", // v2.3.1
        "symfony/framework-bundle": "6.3.*", // v6.3.0
        "symfony/http-client": "6.3.*", // v6.3.0
        "symfony/monolog-bundle": "^3.0", // v3.8.0
        "symfony/proxy-manager-bridge": "6.3.*", // v6.3.0
        "symfony/runtime": "6.3.*", // v6.3.0
        "symfony/stimulus-bundle": "^2.9", // v2.9.1
        "symfony/twig-bundle": "6.3.*", // v6.3.0
        "symfony/ux-turbo": "^2.9", // v2.9.1
        "symfony/web-link": "6.3.*", // v6.3.0
        "symfony/yaml": "6.3.*", // v6.3.0
        "twig/extra-bundle": "^2.12|^3.0", // v3.6.1
        "twig/twig": "^2.12|^3.0" // v3.6.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.4
        "symfony/debug-bundle": "6.3.*", // v6.3.0
        "symfony/maker-bundle": "^1.41", // v1.49.0
        "symfony/stopwatch": "6.3.*", // v6.3.0
        "symfony/web-profiler-bundle": "6.3.*", // v6.3.0
        "zenstruck/foundry": "^1.21" // v1.33.0
    }
}

Previous Challenge

Next Chapter

cSS de terceros

Share this awesome video!

Encontrar paquetes en jsDelivr

¿Bootstrap Sass?

Variables CSS de Bootstrap

4 Comments

Delete comment?

What PHP libraries does this tutorial use?

Show Lines	// ... lines 1 - 2
	<head>
Show Lines	// ... lines 4 - 11
	{% block stylesheets %}
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" integrity="sha256-fx038NkLY4U1TCrBDiu5FWPEa9eiZu01EiLryshJbCo=" crossorigin="anonymous">
Show Lines	// ... line 14
	{% endblock %}
Show Lines	// ... lines 16 - 20
	</head>
Show Lines	// ... lines 22 - 74

Show Lines	// ... lines 1 - 21
	<body class="bg-gray-800 text-white">
Show Lines	// ... lines 23 - 50
	<button class="btn btn-primary">Primary Button</button>
Show Lines	// ... lines 52 - 71
	</body>
Show Lines	// ... lines 73 - 74

	:root {
	--bs-border-radius: 1rem;
	}
Show Lines	// ... lines 4 - 15

	:root {
	--bs-primary: #0de1fd;
Show Lines	// ... line 3
	}
Show Lines	// ... lines 5 - 16

Show Lines	// ... lines 1 - 4
	.btn-primary {
	--bs-btn-bg: var(--bs-primary);
	--bs-btn-border-color: var(--bs-primary);
	--bs-btn-disabled-bg: var(--bs-primary);
	--bs-btn-disabled-border-color: var(--bs-primary);
	--bs-btn-hover-bg: #0bbfd7;
	--bs-btn-hover-border-color: #0ba7d7;
	}
Show Lines	// ... lines 13 - 24