¿Qué pasa con el CSS?
Eres libre de añadir el CSS que quieras a app/styles/app.css.
Ese archivo ya está cargado en la página.
¿Quieres utilizar CSS de Bootstrap?
Consulta la documentación de Asset Mapper sobre cómo hacerlo.
O, si quieres usar Sass, hay un symfonycasts/sass-bundle para hacerlo fácilmente.
No obstante, te recomiendo que no te lances a utilizar Sass demasiado rápido. Muchas
de las características por las que Sass es famoso pueden hacerse ahora en CSS nativo,
como las variables CSS e incluso el anidamiento CSS.
¿Cuál es mi elección personal para un framework CSS?
Tailwind. Y parte de la razón es que Tailwind es increíblemente popular.
Así que si buscas recursos o componentes preconstruidos, vas a tener mucha
suerte si utilizas Tailwind.
Pero Tailwind es un poco extraño en un sentido:
no es simplemente un gran archivo CSS que colocas en tu página.
En su lugar, tiene un proceso de construcción que escanea tu código en busca de todas las clases Tailwind que estés utilizando.
Luego vuelca un archivo CSS final que sólo contiene el código que necesitas.
En el mundo Symfony, si quieres utilizar Tailwind, hay
un bundle que lo hace realmente fácil.
Gira sobre tu terminal e instala un nuevo paquete: composer require symfonycasts -
hey los conozco - tailwind-bundle: Para este paquete,
la receta no hace nada más que activar el nuevo bundle.
Para poner en marcha Tailwind, una vez en tu proyecto, ejecuta:
php bin/console tailwind:init Esto hace tres cosas.
En primer lugar, descarga un binario de Tailwind en segundo plano,
algo en lo que nunca tendrás que pensar.
En segundo lugar, crea un archivo tailwind.config.js en la raíz de nuestro proyecto.
Esto indica a Tailwind dónde tiene que buscar en nuestro proyecto las clases CSS de Tailwind.
Y tercero, actualiza nuestro app.css para añadir estas tres líneas.
Éstas serán sustituidas por el código real de Tailwind en segundo plano por el binario.
Por último, hay que compilar Tailwind, así que tenemos que ejecutar un comando para hacerlo:
php bin/console tailwind:build -w Esto escanea nuestras plantillas
y genera el archivo CSS final en segundo plano.
El -w lo pone en modo "vigilar": en lugar de construir una vez y salir,
vigila nuestras plantillas en busca de cambios.
Cuando detecte alguna actualización, reconstruirá automáticamente el archivo CSS.
Lo veremos en un minuto.
Pero ya deberíamos ver una diferencia.
Vamos a la página de inicio.
¿Lo has visto?
El código base de Tailwind ha hecho un reset.
Por ejemplo, ¡nuestro h1 es ahora diminuto!
Vamos a probarlo de verdad.
Abre templates/main/homepage.html.twig.
Encima de h1, hazlo más grande añadiendo una clase: text-2xl.
En cuanto guardemos eso, podrás ver que tailwind se dio cuenta de nuestro cambio y reconstruyó el CSS.
Y cuando actualizamos, ¡se hizo más grande!
Nuestro archivo fuente app.css sigue siendo super sencillo: sólo esas pocas líneas que vimos antes.
Pero mira el código fuente de la página y abre el app.css que se está enviando a nuestros usuarios.
¡Es la versión construida de Tailwind!
Entre bastidores, existe cierta magia
que sustituye esas tres líneas de Tailwind por el código CSS real de Tailwind.
Y... ¡eso es todo!
Simplemente funciona.
Aunque hay una forma más fácil y automática de ejecutar Tailwind.
Pulsa Ctrl+C en el comando Tailwind para detenerlo.
A continuación, en la raíz de nuestro proyecto, crea un archivo llamado .symfony.local.yaml.
Se trata de un archivo de configuración para el servidor web binario symfony que estamos utilizando.
Dentro, añade workers, tailwind, y luego cmd configurados en una matriz con cada parte de un comando: symfony,
console, tailwind, build, --watch, o podrías utilizar -w: es lo mismo.
Aún no he hablado de ello, pero en lugar de ejecutar php bin/console,
también podemos ejecutar symfony console seguido de cualquier comando para obtener el mismo resultado.
Hablaremos de por qué te conviene hacerlo en un futuro tutorial.
Pero por ahora, considera que bin/console y symfony console son lo mismo.
Además, al añadir esta clave workers, significa que en lugar de que tengamos
que ejecutar el comando manualmente, cuando iniciemos el servidor web symfony,
éste lo ejecutará por nosotros en segundo plano.
Observa. En tu primera pestaña, pulsa Ctrl+C para detener el servidor web...
y vuelve a ejecutar symfony serve para que vea el nuevo archivo de configuración.
Observa: ¡ahí está!
¡Está ejecutando el comando tailwind en segundo plano!
Podemos aprovecharnos de esto inmediatamente.
En homepage.html.twig, cambia esto a text-4xl, gira y...
¡funciona! Ya ni siquiera tenemos que pensar en el comando tailwind:build.
Y como vamos a estilizar con Tailwind, elimina el fondo azul.
Vale, este tutorial no trata de Tailwind ni de cómo diseñar un sitio web.
Créeme, no quieres que Ryan dirija la carga del diseño web.
Pero sí quiero tener un sitio bonito...
y también es importante pasar por el proceso de trabajar con un diseñador.
Así que imaginemos que otra persona ha creado un diseño para nuestro sitio.
E incluso nos han dado algo de HTML con clases de Tailwind para ese diseño.
Si descargas el código del curso,
en un directorio tutorial/templates/, tenemos 3 plantillas.
Uno a uno, voy a copiar cada archivo y pegarlo sobre el original.
No te preocupes, vamos a ver lo que ocurre en cada uno de estos archivos.
Haz homepage.html.twig...
y finalmente show.html.twig. Voy a
borrar por completo el directorio tutorial/
para no confundirme y editar las plantillas equivocadas.
Vale, ¡vamos a ver qué ha hecho esto!
Actualizar. ¡Tiene un aspecto precioso!
Me encanta trabajar dentro de un diseño bonito.
Pero... algunas partes están rotas.
En homepage.html.twig, ésta es nuestra cola de reparación de barcos...
que tiene buen aspecto...
¡pero no hay código Twig!
El estado está codificado, el nombre está codificado y no hay bucle.
A continuación: tomemos nuestro nuevo diseño y hagámoslo dinámico.
También aprenderemos a organizar las cosas en parciales de plantilla
e introduciremos un enum PHP, que son divertidos.