Hugo Compile SCSS y SASS a CSS Curso completo

1. Introducción: Hola, mi nombre es Sean y bienvenido a mi curso compilando CSS y S con Hugo Antes de completar este curso, se supone que tienes algunos conocimientos básicos sobre el uso de Hugo si necesitas ayuda. Hay un enlace en la sección de recursos a continuación para comenzar con el curso de introducción a Hugo. En este curso, estoy usando Bootstrap five como framework CSS. Después de completar este curso, podrías aplicar las habilidades aprendidas a cualquier otro framework CSS o a tu propio proyecto de código personalizado. Uno se enfoca en los siguientes temas, paquetes NPM, compilando CSS y S a Creando prefijos de navegador con autoprefijador, eliminando clases CSS no utilizadas con CSS purgado Usando el archivo de lista de navegador bootstrap para replicar su propio soporte de navegador Importar selectivamente el origen de arranque para minimizar el tamaño del archivo. Personalización de bootstrap a través de sus variables. Y creando clases de utilidad CSS personalizadas con API de utilidad bootstraps En el proyecto dos, puedes implementar las habilidades que has aprendido en el proyecto uno, junto con tu propia creatividad. Estarás modificando una plantilla de sitio web que te he proporcionado. Yo estaré ahí para ayudarte en el camino. Simplemente publique un enlace a su trabajo en la sección de proyectos. Estoy constantemente actualizando este curso medida que Hugo y Bootstrap evolucionan. Puedes estar seguro de que estás obteniendo la información más actualizada. Estoy muy contenta de que hayas elegido tomar mi curso. No puedo esperar a ver un progreso en el camino. 2. Lección2: Bienvenido al proyecto uno. El proyecto uno es un proyecto basado en habilidades y luego las habilidades que has aprendido, proyecto uno se usarán creativamente en el proyecto dos Antes de comenzar con el proyecto uno, veamos los requisitos previos de este curso Necesitarás un conocimiento laboral de Hugo, solo lo básico. Si tienes alguna dificultad, puedes referirte a mi curso de introducción a Hugo y Bootstrap. Hay un enlace en la sección de recursos. Necesitarás tener Hugo instalado localmente. Puedes aprender esto en mi curso de introducción. También necesitarás tener nos instalados, y eso incluye NPM, eso es una parte integral de este curso Nuevamente, puedes referirte al curso de introducción. Necesitas tener instalado un código visual studio o un editor de código con el que estés familiarizado. Te estaré enseñando el curso vía código visual studio, pero eres bienvenido a usar el tuyo propio. Si necesitas alguna ayuda para instalarlo, simplemente haz clic en el enlace a mi curso de introducción y te mostraré cómo instalar todo lo que necesites para Hugo. El proyecto uno es un proyecto basado en habilidades y estar trabajando en todas estas habilidades que se enumeran aquí y de las que hablé en la introducción, es muy importante cuando terminas proyecto uno o si tienes alguna dificultad en el camino, subes una copia de tu trabajo en la sección de proyectos. La forma de hacerlo es que necesitas usar un servicio en la nube, como Dropbox Cloud o One Drive, o Google Drive o cualquier otro servicio en la nube para proporcionar un enlace a tu trabajo. Entonces nunca podré mirar tu trabajo y darte comentarios si tienes alguna dificultad en el camino. Te veré en la siguiente clase. 3. Lección3: En esta lección, puedes descargar el archivo zip por menos de tres en la sección de recursos. Luego pasaré por un rápido desempaque de la plantilla y te explicaré cada sección Si has completado mi curso de introducción a Hugo y Bootstrap, entenderás completamente la plantilla Estoy dando esta explicación para aquellos que no han hecho mi curso de introducción o no lo han hecho desde hace algún tiempo. Si tienes alguna duda, asegúrate revisar mi curso de introducción a Hugo. Dejaré un enlace a eso en la sección de recursos, bajo la lección tres. Echemos un vistazo rápido a la plantilla con la que vamos a trabajar. Puedes encontrar estos archivos en la sección de recursos. Para la lección tres, necesitas descargar la carpeta zip y luego extraerla. Una vez que lo hayas extraído, tendrás lo que yo tengo aquí. Si escribes click, puedes abrir con código VS. Entonces una vez que estemos en código VS, si abrimos una nueva terminal y escribimos en Hugo server, entonces podremos echar un vistazo a la plantilla, puedes controlar click en ese enlace. Si inspeccionamos la página, mira dentro de la cabeza, podemos ver que el archivo CSS viene de una red de entrega de contenido CDN Y es descargar el archivo CSS de Bootstrap que no se ha modificado en absoluto, es solo usar todos los valores predeterminados de Bootstrap Entonces si nos desplazamos hacia abajo hasta la parte inferior del cuerpo, verás que el archivo JS, nuevamente, es el archivo JS completo y viene de la CDN Ahora que estamos en código VS, te daré una visión general rápida de cómo funciona la plantilla. Si tiene algún problema con alguno de estos conceptos, por favor, eche un vistazo a mi curso de introducción a Hugo. Verás el enlace a eso abajo en la sección de recursos. Arquetipos es para configurar una nueva página. Siempre que ejecutes Hugo new Hugo utilizará los datos en arquetipos para generar una nueva página El contenido de sus páginas se almacena en la carpeta de contenido. Hay dos tipos de índice Dodd marcado hacia abajo, el punto índice D con un guión bajo es para una página de lista En este caso este índice punto MDs para la página de inicio. Pero si vas a la carpeta de productos, aquí tenemos un montón de páginas secundarias. Nuestro punto índice de subrayado MD es una plantilla de lista que enumera todos estos productos Y te voy a mostrar qué plantillas de lista son en un segundo. Mientras que este punto índice MDs es la página única normal. No estamos usando datos en este proyecto. Si tuvieras que mostrar información extraída de un archivo de datos, la guardarías aquí. diseños aquí son predeterminados, la base de es para toda la página Todos los diferentes componentes HTML, tenemos parciales y bloques Los bloques se controlan a nivel de página. Este es nuestro bloque aquí, el bloque principal de nuestra página única. Los parciales se extraen de la carpeta de parciales. Si estamos usando un punto de índice de subrayado d, usaremos una plantilla de lista Si es un punto de índice estándar d o cualquier otro archivo, usaremos nuestra plantilla única. Aquí están todos nuestros parciales. En este curso, estaremos trabajando en el pie de página del guión. Vamos a estar anulando el archivo Javascript de CDN. También, en la cabeza, estaremos anulando el archivo CSS CDN Bootstrap con el nuestro propio Tenemos una carpeta de resultados la cual es generada por Hugo. No tienes que preocuparte por eso. Hay una carpeta estática, ahí tenemos un archivo CSS, y tenemos un archivo JS. En este curso estaremos deshaciéndonos de este archivo CSS y poniéndolo en una carpeta Assets para que podamos construirlo a través de CSS o SS. Entonces, si tienes alguna duda sobre lo que hace algo de eso, por favor echa un vistazo a mi curso introductorio a Hugo, lo contrario empezaremos. 4. Lección4: En esta lección, estamos inicializando tu proyecto Hugo como un proyecto NPM, creando así un archivo Json de paquete. Entonces vamos a instalar Bootstrap como dependencia de NPM. Es decir, estaremos descargando Bootstrap del registro de NPM, instalándolo en la carpeta de módulos de nodo Y luego en la lección posterior, estaremos accediendo a los archivos fuente de Bootstrap. Vamos a configurar nuestro proyecto para que esté listo para aceptar paquetes de NPM. Debe tener Nots instalado en el Gestor de Paquetes de NPM. Puedes instalar ambos a la vez simplemente instalando notas. Si aún no lo has hecho, es muy importante. Ves mi curso de introducción a Hugo, y la primera Leslie se trata de descargar todos los paquetes de y la primera Leslie se trata de descargar todos los paquetes de software que necesites, prepárate para comenzar Lo que hay que hacer es iniciar una nueva terminal y ejecutar el comando NPM. Ahora bien, si esto no funciona, es más que probable porque no tienes NPM instalado, vuelve a ese otro curso y sigue esas instrucciones Cuando ejecutas esto, lo primero que hace es que te pida un nombre para el paquete. Ahora bien, si vas a estar publicando en NPM, necesitas poner un letrero al inicio y el nombre de tu nombre de usuario de NPM. Pero no vamos a estar publicando en NPM, solo estamos usando esto para descargar paquetes Probablemente puedas aceptar el valor predeterminado si quieres, que si ya has guardado tu proyecto para conseguirlo probablemente te lo incorporará . De lo contrario solo puedes darle un nombre como Hugo SCSS haría el truco o por supuesto Hugo SCSS Entonces te pido una versión. Normalmente voy a empezar con 0.0 0.1 Pero eso realmente no importa en esta etapa a menos que estés usando alguna descripción de la herramienta de administración de versiones, nuevamente, no estamos publicando el NPM. No es demasiado importante, pero siempre puedes proporcionar una descripción si lo deseas punto de entrada realmente no se aplica a lo que estamos haciendo aquí porque no es un verdadero paquete de NPM. No necesitamos un comando de prueba. Nuevamente, si tienes un repositorio Git configurado, lo sacarás. Nuevamente, no es tan importante porque no estamos publicando palabras clave. Realmente no importa. Autor, puedes configurarlo si lo deseas y licencia. Ahora tengo ese paquete paquete JSON Jason. Si miras ahí, verás todos los datos que acabas de poner. Para qué sirve esto es para administrar paquetes. El primer paquete que vamos a instalar es Bootstrap. La forma en que haces eso, escribes NPM y luego instalas Bootstrap Antes de entrar, solo te mostraré cómo funciona esto buscándolo en el registro de NPM. He ido a pms.com voy a buscar Bootstrap. Tenemos su versión cinco de Bootstrap. Tenemos un comando aquí para instalar este paquete NPM en particular, lo cual es bastante útil si eres un principiante También se han vinculado a su repositorio Github, que fue de donde se saca todo este código. Entonces tenemos que enlazar a su página de inicio buscando acceso a documentaciones. Tengo algunas estadísticas interesantes. Verás que tienen 3.5 millones de descargas cada semana. Eso te permite saber que en realidad es un paquete muy popular y es uno que se está descargando actualmente. Sabes, no se ha vuelto rancio. Estamos en la versión 5.1 0.3 versión cinco es definitivamente lo que quieres. Se puede ver que la última publicación fue hace un mes. Al menos sabes que actualmente se está desarrollando y no se ha vuelto rancio Tenemos algunos documentos básicos aquí, pero te recomiendo que uses un enlace a su sitio web. Golpeamos Enter y se va a descargar del registro de NPM. Y está instalado. Volvamos a echar un vistazo a nuestro paquete archivo Json, cerraremos la terminal, verás que ahí tenemos una dependencia de Bootstrap. Si miramos por encima en nuestro proyecto, bajo los módulos de nodo, vemos que no solo hemos instalado bootstrap, sino que también hay una carpeta en PoperJS Lo que es, en realidad es una dependencia de pares de Bootstrap. Es una biblioteca adicional en la biblioteca Javascript de la que depende Bootstrap Javascript. No solo hemos instalado Bootstrap, también hemos instalado algunas dependencias al mismo tiempo, si entramos en el paquete Bootstraps Json y echamos un vistazo por ahí, verás que hay una dependencia de pares de Pops, y por eso eso se instala automáticamente Para nosotros, eso es sólo si tienes nodo JS versión siete o superior, que probablemente sea el caso. Hay una última cosa que tendrás que hacer, es decir, si estás usando Git para guardar el progreso, tendrás que entrar en tu Git e ignorar el pliegue de los módulos de nodo porque actualmente Git quiere comprometer 472 archivos ahí. Los archivos acaban de ser descargados en módulos de nodo. No quieres subirlos a tu repositorio Git y te mostraré por qué en un segundo. Entraremos en nuestro Git ignore. Añadiremos un nuevo nodo de línea, módulos de subrayado. Termina con la baraja, salvo eso. Verás que acaba de bajar a los tres archivos en los que estoy trabajando actualmente. Pero no voy a incluir git en este curso en particular solo para mantener las cosas simples. Ahora bien, si tuvieras que guardar este proyecto para obtener el contenido de la carpeta de módulos de nodo no se guardaría tu repositorio Get o Github. Solo para mostrarte cómo funciona eso, digamos que íbamos a eliminar la carpeta de módulos de nodo y eso es para emular la descarga de este proyecto desde Get Te voy a mostrar como podemos entonces instalar todo con un solo comando. He limitado la carpeta de módulos de nodo, así que acabas de descargar este proyecto de tu cuenta get. Todo lo que tienes que hacer es ejecutar NPM install. Luego mira a tu archivo package dot json e instala todo lo que hay en nuestro archivo package dot json como acabamos de discutir. Tenemos Bootstrap. Como puedes ver, está instalado dos paquetes, y eso es Bootstrap y pops. Es por eso que no comprometes el contenido de esta carpeta de módulos de nodo para obtener porque llenará tu cuenta get realmente rápido. Tenemos que ignorar esa carpeta y luego si has descargado tu proyecto de Get, solo tienes que ejecutar NPM install y ya estás listo para comenzar Ahí lo tenemos. Hemos instalado Bootstrap como una dependencia de NPM. Estamos listos para comenzar. 5. Lección5: En esta lección, estaremos configurando algunos comandos de NPM. La razón por la que estamos haciendo esto es para que podamos ejecutar rápidamente diferentes comandos hugo. Vamos a crear algunos comandos hugo complejos. Probablemente no vas a querer escribir en la línea de comandos. Si entra en su paquete archivado, verá que tenemos un script de prueba. Ahora lo que vamos a hacer para empezar es que vamos a crear un script de desarrollo. Debes poner una coma después de eso. Entonces vamos a crear un script de compilación. Caminaremos primero sobre esos dos y luego agregaremos algunos más. En términos de dev, sabes que tienes que ejecutar Hugo server para poder ejecutar el servidor de recarga automática Hay algunas cosas extra que podemos agregar a eso. El primero es GC y eso es para recolección de basura. Cuando cierre ese servidor, eliminará los archivos no utilizados. El siguiente que vamos a hacer es deshabilitar el renderizado rápido. En realidad poner mayúsculas al inicio de cada palabra excepto la primera Eso significa que cada vez que guardas un archivo, todo tu sitio se vuelve a cargar, por lo que garantizaste tener la versión más actualizada de tu sitio Lo siguiente que haremos es el script de compilación. Esta vez sólo vamos a ejecutar el comando Hugo. Vamos a agregar GC para recolección de basura. Esta vez también vamos a limpiar la carpeta que estamos usando para construir. Se va a construir en una carpeta pública. Queremos asegurarnos de que esté completamente vacío para que no haya archivos obsoletos ahí de versiones anteriores del sitio web Ejecutaremos el destino limpio D con solo una D mayúscula Solo lo siguiente que haremos es unificar para intentar reducir ese archivo HTML minify Eso lo guardaremos y los revisaremos. Verás en la parte inferior si se usa código VS hay una sección llamada scripts NPM. Y esto es muy útil. Estos dos scripts que acabamos escribir y ahora están disponibles aquí, si mantienes el mouse sobre ellos, podrás ver el comando real que has escrito y se alinean. Intentaremos que el dev quiera comenzar con el juego. Lo está ejecutando en la terminal, se puede ver que está construido los archivos, no ha hecho ninguna limpieza con recolección de basura. Te da la dirección. Puedes hacer clic en eso para abrirte en el navegador. Ahora que estamos en el sitio web, escribiremos y haremos clic, y veremos la fuente y verás como hay mucho espacio en blanco entre todas las líneas. Volvamos al código VS e intentaremos ejecutar el script de producción. Lo primero que haremos es golpear el control C o golpear la papelera. Entonces construiremos. Esto no va a ejecutar un servidor, solo va a escribir los archivos en el disco. Después entraremos en la carpeta pública. Revisaremos nuestro índice, Html. Verás cómo va, quita todo ese espacio en blanco porque están ejecutando el comando minify Hay una cosa más que tienes que hacer y puedes ver consigue, tratando de extraer todos estos archivos que acabamos de crear. Tendremos que ignorar esos archivos si estás usando Git para la administración de versiones. Y para respaldar tu trabajo, solo tienes que agregar público. Y ya ves que ha bajado de 29 a dos. Solo estamos empujando los dos archivos en los que estamos trabajando para conseguirlo. Si estás usando no tienes que hacer para este curso, eso es realmente importante. Voy a añadir algunos guiones más a nuestro paquete, Jason. El siguiente que agregaremos es renderizar que a medida que Hugo corre, renderizará todos esos archivos en el disco para que podamos inspeccionarlos si es necesario, copiaremos y pegaremos el contenido del script dev. Lo único importante tenemos que agregar que un render al disco porque estamos trabajando fuera del disco. También tenemos que asegurarnos de limpiar el directorio de destino antes de que eso suceda. Debe poner una coma después de su segundo comando. Ahora para render, haremos ese render dev porque estamos corriendo como un servidor de desarrollo. Luego crearemos uno de estos pero para producción, que podamos probar cómo será el sitio web en producción. Pero con un servidor de desarrollo, pondremos un render dev y cambiaremos éste a Render Prod para producción. Vamos a hacer un par de cambios. El primero que tenemos que hacer es tenemos que decirle que va a ser un servidor de producción. Vamos a hacer producción de espacio ambiental que imitará cómo será tu sitio web cuando realmente ejecutes la compilación Por ejemplo, es posible que tengas algunos scripts que solo se ejecutan en producción. O algunas cosas que podrían estar unificadas, por ejemplo, con Javascript o SCSS Lo siguiente que tienes que añadir es Unificar. Eso es sólo para tu HTML. También hay que poder ejecutar un servidor dev, pero para archivos que tengan fechas en el futuro. Y también para archivos o páginas que estén marcadas como borradores. Copiaremos y pegaremos nuestro script de desarrollo y lo pegaremos a continuación, llamaremos borradores de dos puntos de desarrollo Entonces vamos a agregar dos opciones. El primero será construir capital futuro y construir borradores. No me gusta usar estas dos opciones para producción porque creo que es un poco engañoso porque eso no es lo que va a pasar en el servidor. Pero sí me gusta usarlo para el servidor Dev. Hay una última orden, ¿ vas a poner? Y eso es para PM, es realmente complicado de usar a la hora de actualizar tus paquetes. Pero hay un programa que puedes instalar que es algo gráfico y lo hace realmente fácil. Abre nueva terminal y ejecuta NPM install NPM o hyphen check, te dirá que está instalado ocho paquetes y eso es porque son dependencias Si tienes mirada en tu carpeta non-modules, verás que está empezando a llenarse un poco. Pero el principal que realmente instalamos fue NPM check. Pero hay muchos otros que las dependencias de NPM comprueban. Luego iremos a una y una nueva línea y verificamos PM que podrías escribir actualización pero eso podría ser engañoso. En realidad se está actualizando con NPM. Yo solo lo llamo cheque NPM. Sé exactamente lo que estoy haciendo. Poner en una columna y después algunas comas invertidas. Y el comando que vamos a ejecutar, cheque NPM, hay que ejecutar, eso es para actualizar, lo contrario no obtendrá esa opción cuando haga clic en él Podemos probarlo haciendo clic en PM check, nos está diciendo que Irving está al día Y eso es porque acabamos de instalar Bootstrap. Pero si tienes paquetes desactualizados, te dará una lista de paquetes que se pueden actualizar. Ejecutaremos una prueba rápida del comando render. Haremos render dev para empezar, verás que está construyendo Hugo, pero también está renderizando en disco. Si subimos a nuestra carpeta pública, son todos los archivos que se están utilizando en el sitio web del host local. Si miramos nuestro índice HL, verás mucho espacio. Voy a cerrar eso. Haré producción de render. Si miras con mucho cuidado, verás producción del entorno en lugar del desarrollo. Y aquí están todos nuestros archivos aquí, pero también son visibles en el servidor de carga de la biblioteca. Si abrimos HTML de punto índice, verás que no hay todo, pero se ha eliminado la mayor parte del espacio en blanco para mantener el tamaño del archivo bajo. Entonces, sentémonos a esta lección. Te veré en la siguiente. 6. Lección6: En esta lección vamos a agregar algunos paquetes más de NPM. Y lo estamos haciendo para que podamos agregar hugo como dependencia de NPM. Eso significará quien trabaje en el proyecto o donde sea que trabajes en el proyecto, ya sea en una computadora diferente, estarás usando la misma versión de Hugo. Funcionará en cualquier plataforma, ya sea Linux, Mac o Windows. Hugo descargará en el formato necesario para esa plataforma. Vamos a instalar dos paquetes NPM. Abrir nueva terminal. Vamos a escribir en NPM install. El primero es Hugo instalador. segundo es del mismo autor y está en asegúrate conseguir todos estos nombres al contado porque si te pierdes deletrear, podrías descargar algo que no quieras. Echemos un vistazo rápido a nuestro paquete archivo Json. Verás bajo dependencias, ahora tenemos cada pin y Hugo instala La forma más fácil de conseguir que el instalador de Hugo funcione es subir a tu sección de dependencias. Poner un después en una nueva línea, poner en una nueva sección llamada otras dependencias te hace usar una D mayúscula para las dependencias Después ponemos dos puntos y unas llaves rizadas en una nueva línea, Comas invertidas escribiendo Hugo, luego un Entonces hay que proporcionar la última versión. Vas a teclearlo exactamente como lo tiene Hugo en su página web. Voy a hacer una búsqueda de la versión Hugo. Después iré a la página de Github. Ves la versión actual, cuando esta lección ha sido grabada es 0.89 0.4 Vamos a escribir eso exactamente sin las colillas V. 0.89 0.4 No necesitas un después de esa línea o después de las llaves porque son las últimas en sus respectivas secciones Entonces iremos a nuestro guión. Pondremos aquí un script final llamado post install. Ahora post install, tu segundo último script, post install se ejecutará. Después de ejecutar la instalación de NPM, pondremos dos puntos. Y luego a las comas inventadas. Y vamos a ejecutar Hugo installer, que es lo que acabamos de instalar. Para la versión usaremos otras dependencias hugo. Y eso hará referencia abajo a esta sección que acabamos de crear. Para que puedas actualizar a hugo aquí abajo. Después le diremos que instale la versión extendida que instala el fold en Linux y la placa Mac en Windows. No lo hace. Es muy importante que lo necesites para lo que vamos a pasar en esta lección con CSS y como construcción. Tenemos que decirle al instalador de Hugo a dónde queremos que vayan los archivos que hayan descargado el archivo ejecutable de Hugo. Especificaremos destino, luego vamos a instalar en módulos de subrayado de nodo En Hugo probablemente deberías estar diciéndole a get que no subas la carpeta de módulos de nodo. Obtendrás archivo de ignorar, no tienes que preocuparte tu archivo hugo se cargue. Eso lo guardaremos. Si ejecutamos el comando NPM install, hugo será y dependerá de tu sistema y se guardará en la carpeta de módulos de nodo. Sigamos adelante y hagamos eso. Ejecuta la instalación de NPM, está pasando y comprobando, ahora está descargando el binario hugo en Windows, va a ser un archivo C. Vamos a echar un vistazo. Ahora, en nuestra carpeta de módulos de nodo, estamos buscando módulos de nodo. Hugo ya entramos y luego tenemos a Hugo. Y ya verás ahí tenemos a Hugo Doc. Si estuvieras ejecutando Macolinux, tendrías un archivo ejecutable que se adapte a tendrías un archivo ejecutable que se adapte a tu sistema. Eso es genial. Pero nuestros comandos aquí son todos sobre hugo server o hugo. No están apuntando a ese expediente. Y estamos tratando de configurar nuestros guiones para que el multiplataforma o plataforma independiente, tenemos que añadir algo extra a lo que vamos a hacer. Voy a hacer click antes de hugo. Cada vez que voy a mantener presionado el botón Alt, eso significa que puedo editarlos todos al mismo tiempo. Voy a dirigir Exec bin. Exec bin, que es otro paquete que acabamos de descargar Voy a decirle a exec bin que busque dentro de los módulos de nodo Shinhugo Entonces necesitamos un show exact bin es multiplataforma, es plataforma independiente. Se ejecutará el archivo hugo file, dependiendo de cualquier sistema en el que se encuentre. Guardemos eso y ejecutemos uno de nuestros guiones aquí abajo. Y darle una oportunidad. Entonces parece que está funcionando muy bien. Está usando la versión extendida de Hugo que solicitamos fue descargada. Se pueden ver bins exec ejecutando el ejecutable Hugo de módulos conocidos Hugo, Hugo. O si estás en Macolinux no lo estarás, lo cual es genial. Entonces eso es todo para esta lección. Veré en la siguiente lección donde empezamos a construir con CSS. Y como 7. Lección7: En esta lección, vamos a importar los archivos fuente CSS bootstrap del paquete bootstrap NPN Entonces los vamos a compilar a CSS para que puedan ser utilizados en un navegador. Lo que vamos a estar haciendo, si miras en tu carpeta de maquetación, en los parciales y en el parcial de cabeza, verás que el CSS Bootstrap está siendo sacado de un servidor CDN o red de entrega de contenido Se trata de descargar Bootstrap versión 5.1 0.3 Eso es un archivo CSS de falla con todos los valores predeterminados de Bootstrap ahí dentro Tu color primario va a ser azul, Tu color secundario va a ser gris. se ha personalizado nada. Incluye todo. Ese es un archivo bastante grande. Lo que vamos a hacer es que vamos a extraer el CSS Bootstrap del paquete NPM. Y luego en otra lección, vamos a estar personalizándolo y también quitando partes, no necesitamos hacer esto Lo que haremos es volver a la raíz del proyecto. Haremos una nueva carpeta llamada Activos. Esta es una carpeta con la que trabaja Hugo. Después dentro harán una carpeta llamada CSS. Harán un archivo ahí dentro llamado Misa. Lo que ahora tenemos que hacer es importar el CSS Bootstrap desde el paquete MPM Vamos a ejecutar import y luego meter una entrada invertida. Buscamos bootstraps. Bootstraps. Eso va a ser relativo a la carpeta de módulos de nodo. Asegúrate de poner un resfriado al final. Eso lo buscaremos. Entraremos en la carpeta Nodemodules, y luego bajaremos a Bootstrap. Entonces estamos buscando en el CSS. Esta es una fuente, ha compilado CSS que no queremos. Queremos la fuente. Vamos a entrar en la carpeta SCSS y verás en la parte inferior tenemos un archivo CSS bootstrap Eso es lo que vamos a estar sacando desde dentro de ese archivo. Todos estos archivos se importan que las partes estén listas para funcionar. Ahora tenemos que configurar a Hugo para que use liss para ejecutar este archivo SCSS Actualmente, nada va a pasar realmente con este archivo, es simplemente sentado ahí volviendo a los diseños de la cabeza, Parciales, cabeza, vamos a comentar este control de línea KC para comentarlo Lo dejaremos ahí, pero por si acaso lo necesitamos para las pruebas. Más adelante vamos a tratar de hacer esto lo más sencillo posible. Para comenzar con poner en dos llaves K y vamos a crear una nueva variable llamada CSS, porque la estamos declarando, tenemos que usar dos puntos enter Vamos a ejecutar recursos, obtener recursos , obtener agarra un recurso La ruta que vamos a proporcionar es relativa a la carpeta assets. Volvemos a nuestra carpeta Activos, verás que son activos, SS, SS, voy a escribir eso en masa. Así accedemos al expediente. Lo siguiente que hacemos es que tenemos que compilar realmente lo que hay en ese archivo. Porque el navegador, solo diré esto, el navegador no sabe qué hacer con eso. Además, esos archivos existen en la carpeta NPM y el navegador no podrá acceder a ellos. Hugo no va a proporcionar esos expedientes. Vamos a atraerlos y procesarlos. Tenemos que hacer, ponerlo en una pipa, que es la clave anterior. Ingrese la diagonal invertida, mueva la diagonal invertida para obtener una tubería. Y vamos a ejecutar dos CSS. Es CSS de capital el que funcionará por sí solo sin ninguna opción. Pero no sabe dónde encontrar este bootstrap, plegado boto fold No sabe que necesita buscar en la carpeta de módulos de nodo. La configuración se va a proporcionar como un objeto. Pero en Go y aquí vamos, eso se llama dict o diccionario. Ponemos entre paréntesis, reescribimos luego nuestro primer elemento de configuración y nuestro primero en este reporte en el tiempo será incluir rutas Cuando especifica las rutas de inclusión, es necesario que se les proporcione una matriz. La razón de ese ser es porque puedes proporcionar múltiples rutas de inclusión. Una matriz es la manera perfecta de hacerlo. Abre y cierra nuestros corchetes y escribimos en Slice, en Go y en Hugo Slice es lo que usas para arrays, vamos a estar proporcionando un ítem. Entonces es un poco extraño para una matriz, pero puedes agregar más si es necesario. Vamos a proporcionar módulos de subrayado de nodo como la ruta que necesita ser incluida. Entonces lo que tenemos que hacer es proporcionar un enlace para el navegador. Si escribimos un enlace, dos puntos proporciona un enlace de estilo, nos desharemos de ese archivo. Nos pondremos nuestras llaves rizadas. Nos referiremos a la variable CSS que acabamos de crear, L enlace permanente con R mayúscula y capital Entonces tienes que cerrar tus aparatos ortopédicos. Hugo proporcionará un enlace a este archivo que se ha generado a través de esta variable Rel permalink, o permalink relativo significa que no incluirá el dominio, parte del dominio parte del dominio Vamos a guardar eso y echarle un vistazo. Después controlaremos haga clic en el enlace y lo comprobaremos en el navegador. Haremos clic derecho e inspeccionaremos. Iremos a la cabeza. Primero verás que hay un enlace a Cssmin. Ese es este archivo bootstrap. Eso es en realidad, este archivo se convirtió en un archivo CSS a través de esta variable. Si vamos a la pestaña Fuentes y luego abrimos la carpeta SCSS, podremos ver el contenido del archivo que se acaba de generar Verás que es prácticamente exactamente lo mismo que el CSS de Bootstrap que puedes sacar de la CDN o incluso puedes descargar del sitio web de Bootstrap Hay muchas ventajas. Podemos modificar toda esta información, mucho más a través de variables. También podemos quitar partes que no queramos. Incluso podemos llegar hasta eliminar partes no utilizadas del archivo en comparación con las etiquetas que hemos solicitado en el HTML de nuestro sitio web. Si puedes conseguir que el CSS Bootstrap se muestre en la carpeta SCSS en tu SS principal, estás listo para pasar a la siguiente lección 8. Lección8: En la última lección, configuramos la compilación de SCSS. Ahora necesitamos crear algunos parámetros tanto para entornos de producción como de desarrollo para que el compilador CSS se comporte de manera diferente ya sea que estemos usando un servidor de desarrollo o estamos construyendo producción hugo Four En la sección de recursos, verás un enlace a esta página. Son las pipas Hugo, CSS y página la cantidad de opciones que podemos pasar cuando estamos compilando Primero voy a ver transpiler. Por defecto Hugo actualmente usa Lipsas. Vamos a configurar eso para que obligue a Hugo a usar Lipsas Por si acaso Hugo sí consigue actualizado a dartsas. En el futuro, no vamos a tener ningún cambio de ruptura. Vamos a ver el estilo de salida. El valor predeterminado está anidado, lo cual es genial para cuando estamos desarrollando Pero también queremos que se comprima si es para que la producción reduzca el tamaño. Vamos a ver habilitar mapas de salsa para el desarrollo. Ya hemos mirado incluye piezas para módulos de nodo. Vamos a llegar a ello. Si vas a la carpeta layouts y luego a la carpeta de parciales y Html resaltan todo lo que has proporcionado a dos CSS Todas las opciones que has proporcionado que actualmente es solo la opción include pass, resalta eso y córtalo con control X o comando X. En vez de eso, proporcionaremos una variable que llamaremos que opta por opciones a CSS Ahora declaremos esa variable y creemos las opciones que pondremos en llaves Escribiremos opt a CSS porque lo estamos declarando. Tenemos que usar carbón e inter. Luego crearemos un diccionario que es un objeto para nuestras opciones. El primero que haremos es transpiler. El transpiler que vamos a usar es Lisa. La razón por la que estamos encerrando eso es que va a haber algún punto en el futuro en el que Hugo actualice a dardo As y no queremos ningún cambio de ruptura. Entonces declararemos el estilo de salida por defecto. El estilo de salida está anidado, lo cual es genial para el desarrollo, pero queremos usar comprimido para la producción Actualmente estamos analizando nuestras opciones de producción. Entonces tenemos nuestro último, incluye Pass, que solo puedes pegar si quieres. Eso va a ser un slice y tenemos módulos de nodo. Bien, así que esos son nuestros valores de producción. Entonces puedes copiar eso y hacer una nueva línea. Y vamos a usar una declaración if si eso es si es igual O entorno con un desarrollo E capital. Si estamos en el entorno de desarrollo, ponemos una etiqueta aquí dentro. Vamos a tabular y luego pegar lo que acabamos de escribir, pero hay que quitar esa columna. Súper importante. Ahora vamos a eliminar el estilo de salida comprimido porque queremos usar el valor por defecto de anidado Pero vamos a habilitar mapas fuente, así que como singular, no hay fuente al final de la misma, es solo fuente con una en el ES. Después mapa con mayúscula y capital. Vamos a usar la opción de true. No es necesario usar comas invertidas alrededor true porque es un Boolen Es verdadero o falso, No se requieren comas invertidas Guardemos eso y vamos a darle una oportunidad. Comenzaré con el script dev, luego controlaremos click y lo abriremos en el navegador. Después haremos clic derecho e inspeccionaremos. Iremos a Fuentes y abriremos CSS Mass. Si te desplazas hasta la parte inferior, verás que hay un enlace al mapa fuente que hemos generado, lo cual es genial para depurar Vamos a dar el guión de producción para ir. Ahora haremos el control C para salir, y luego Y, lo contrario solo puedes usar el en el bote de basura para matar la terminal. Luego ejecutaremos la producción. Para ello, tendremos que usar el comando Render. Haga clic en Control de Producción de Render. Entonces puedes escribir, Click e inspeccionar, ir a Fuentes y luego CSS y puede que no CSS. Verás que ha sido minimizado o comprimido. Así que tenemos que eliminar todos los espacios blancos. Está en una larga fila grande. Si tienes razón hasta el final, no hay ningún enlace a un mapa fuente, lo cual es genial para la producción. Eso no queremos. Hay archivos adicionales escritos, y los mapas de origen no son realmente útiles para la producción. Además, significa que Alá no puede colarse y ver exactamente cómo se escribe nuestro código. Hace que sea un poco más difícil para otras personas separar nuestro código, pero no imposible si puedes conseguir los scripts de desarrollo y producción funcionen los scripts de desarrollo y producción y tienes munificación, no tienes mapas fuente en tu producción, en tu dev No tienes código unificado y tienes un mapa fuente. Estás listo para pasar al siguiente paso, veremos en la siguiente lección. 9. Lección9: En esta lección, vamos a estar huellas digitales de la salida CSS Vamos a estar aplicando una suma de cheque, un hash al archivo. Eso significa que cada vez que actualicemos el archivo, estará dirigiendo al navegador a la forma más reciente de ese archivo. No habrá confusión con el navegador que almacene en caché versiones antiguas del archivo También se pueden utilizar las huellas digitales con fines de seguridad, pero no vamos a entrar en la implementación de eso en este curso Su enlace final a esta página en la sección de recursos de la página Hugo Pipes para huellas dactilares y SRI Ahora bien, si estás usando huellas digitales puramente para reventar , asegúrate de que la versión más actualizada del archivo está siendo solicitada por el navegador Si constantemente tienes nuevas versiones de la página evolucionando y quieres asegurarte de que el navegador busca la versión más reciente, probablemente deberías usar MD five. Md cinco va a ser un poco más corto. No obstante, si estás intentando asegurar tu sitio web con CSP, que no es algo en lo que voy a entrar en este curso, posible que quieras usar un cifrado de alto nivel como el S HA 384 Vamos a llegar a ello. Vamos a estar pasando por este proceso aquí en nuestro proyecto en nuestra línea con la variable CSS. Nosotros usando recursos sí conseguimos sacar el archivo de la carpeta de recursos. Luego lo ejecutamos a través de dos CSS para procesarlo. Entonces vamos a ejecutar otro comando. Vamos en vez de pipa con cambio hacia atrás, el comando es huella digital. La opción que vamos a utilizar es MD five. Y eso dice que se mantenga el nombre del archivo un poco más corto ya que va a estar usando un hash al final del nombre del archivo. Si estás usando CSP por razones de seguridad, es posible que no quieras usar MD five, solo puedes mantenerlo en el valor predeterminado En ese caso, solo te desharías de eso por completo. Vamos a usar MD five solo para mantener nuestro nombre de archivo corto. Entonces vamos a bajar a nuestra etiqueta aquí abajo. El nombre del archivo generado por una huella digital será automáticamente ingresado al enlace. Para la integridad, necesitamos poner una etiqueta de integridad para eso. Usaremos algunas llaves y va a ser CSS, que es la misma variable utilizada para nuestro enlace de archivo, pero van a ser datos con una integridad de Capital D. Después haremos un espacio y cerraremos nuestras llaves Ur. Eso lo guardaremos y vamos a echar un vistazo. Entonces si echamos un vistazo en la fuente, baja al enlace, verás que cambiaron los nombres de los archivos. Tiene la primera parte principal, pero luego han incluido un hash que es un MD five. Tiene entonces en la etiqueta de integridad, tiene MD cinco y tiene una clave que se puede usar para verificar que este es en realidad el archivo correcto, pero no vamos a estar usando CSP y entrando en cómo configurarlo con bateadores, porque ese es un tema completamente diferente Si has podido generar un archivo hash y generar tu etiqueta de integridad, estás listo para pasar a la siguiente lección 10. Lección10: Ahora vamos a instalar dos paquetes NPM más, eso es post CSS y Autoprefixer La razón por la que los estamos usando es porque cuando ejecutas la fuente CSS Bootstrap desde su paquete NPM, no proporcionan prefijos para navegadores más antiguos Es algo que hace Bootstrap cuando ofrecen su fuente CSS precompilada Vamos a hacer exactamente el mismo proceso para que el archivo que estamos generando tenga la misma compatibilidad con navegadores más antiguos Bootstraps precompilado Entonces, si miras la página de documentos de Bootstrap para Bill Tools, se trata más de construir una versión del archivo CSS que coincida exactamente con la suya, pero están usando SAS para compilar, lo que estamos haciendo Entonces van a ejecutar Autoprefixer. Lo que vamos a hacer, en realidad vamos a copiar archivo de lista de navegadores Bootstrap para que admitamos exactamente los mismos navegadores que Bootstrap admite cuando descargas su archivo CSS predeterminado de su sitio web. Antes empezamos a mirar cómo implementar post CSS y prefijo automático. Así que vamos a necesitar un archivo para definir a qué navegadores estamos tratando de apuntar en términos de prefijos. Antes de continuar, vamos a dirigirnos a la página de Bootstraps Github Lo puedes encontrar buscando en la sección de recursos el enlace. O puedes hacer una búsqueda en Google para Bootstrap Github. Dirígete a la página, y luego te desplazas hacia abajo y buscas navegadores lista punto de lista de navegadores punto. La forma más fácil de conseguirlo es simplemente copiar el contenido de ese archivo, luego dirigirse a la raíz de su proyecto, luego dirigirse a la raíz de su proyecto Hacer un nuevo archivo llamar a los navegadores lista R, y luego dentro de ese archivo, y luego dentro de ese archivo, pegando la información de Bootstrap skew Este archivo le dirá a Autoprefixer qué prefijos necesita crear. Muchos navegadores más antiguos requieren diferentes prefijos en las clases CSS, no tan comunes en los navegadores modernos Al definir a qué navegadores nos dirigimos, estamos usando la lista predeterminada de Bootstrap. Aquí, estamos evitando sumar cantidades excesivas de clases. Por ejemplo, no vamos a estar proporcionando prefijos de Internet Explorer Estamos de vuelta en la página Hugo bajo Hugo partes para post CSS, y encontrarás un enlace para esto en la sección de recursos. Si tienes una lectura rápida, verás que necesitas tener post SS CLI, y también necesitas tener post CSS, y necesitas tener autoprefixer Ahora, Hugo sugiere que los instales globalmente. Te recomiendo instalarlos en el ambiente. Vamos a volver atrás y vamos a agregar algunos paquetes más de NPM, abrir una nueva terminal, luego ejecutar NPM install. El primero fue publicar CSS, luego publicar CSS CLI, y luego Autoprefixer Solicitamos tres paquetes, 39 han sido instalados porque hay muchas dependencias. Solicitamos tres paquetes. 54 se han instalado porque hay muchas dependencias. Si abres tu paquete Jason, verás que tenemos nuestras dependencias listadas aquí y se han agregado Después leyendo los docs, verás que tenemos que usar recursos PostSS, hay un atajo alrededor de eso, pero puedes quitar la parte de recursos y luego puedes minúsculas la Vamos a darle una oportunidad Entra en diseños, parciales y cabeza. Entonces al final de nuestra cadena CSS justo antes de la huella dactilar, vamos a poner en otra pipa. Y luego ejecutaremos publicaciones para nuestras opciones. Volveremos al doctor. Ahora necesitamos crear un archivo de configuración para post CSS. Post CSS buscará automáticamente este archivo de configuración en la raíz del proyecto. Crearemos un archivo en la raíz del proyecto y lo llamaremos post Css config. Lo primero que tenemos que hacer es puerto autoprefixer como un plug in, vamos a ejecutar constante autoprefixer iguales requieren corchete abierto, dos comas invertidas y autoprefixer iguales requieren corchete abierto, en realidad poner un punto y coma final Entonces tenemos que ejecutar las exportaciones. Haremos exportaciones de módulos es igual a soporte abierto. Declararemos los plug ins colon y haremos un corchete. Aquí es donde empieza a ponerse complicado. Volvemos a nuestro script Hugo, notaremos que post CSS se está ejecutando todo el tiempo, tanto en desarrollo como en producción. La forma más fácil de configurarlo para que solo funcione en producción no es a través de esta parte aquí en Hugo, sino a través de JS. Es mucho más fácil sobrescribirlo para probarlo. Verás que podemos acceder al entorno Hugo. Volvamos. Accedemos al entorno de Hugo con proceso. Se trata de un entorno de subrayado de Hugo en mayúscula. Buscamos tres iguales para una réplica exacta de lo que se ha escrito. Y eso es desarrollo. Hay un, es posible que tenga algunos entornos de producción diferentes. Cuando se trata de desarrollo, probablemente solo tengas el que es cuando estás probando con el servidor de carga de la biblioteca. Entonces vamos a poner un signo de interrogación. Si es desarrollo, vamos a devolver null, pero en realidad vamos a estar devolviendo algunas matrices. Pondremos null dentro de algunos corchetes. A la siguiente línea la pondremos en una columna. Y todo esto se puede hacer en una línea, pero lo estamos separando para que sea más fácil en esta línea. Estos son los plug ins que se ejecutarán cuando no sea desarrollo. Vamos a devolver Autoprefixer y agregaremos otro plug in en la Debido a que hemos proporcionado los valores que devuelven como matrices, necesitamos las cadenas individuales, no la matriz de cadenas. Para extraer las cadenas de las matrices se pusieron en tres puntos, el inicio de esa línea. Y luego, cuando se ejecuta esta línea, bien proporcionará a la matriz con null dentro o le proporcionará a la matriz un prefijador automático Estaremos deconstruyendo esa matriz en cadenas individuales debido a los tres puntos Debería funcionar. Eso lo guardaremos. Ejecutaremos el servidor Dev, lo probaremos con el servidor Dev original. Primero para verificar cuántos prefijos hay actualmente presentes. Y son prefijos que están integrados en Bootstrap. Eso es parte de los puntos normalizados. Ejecutaremos el servidor Dev, nosotros controlaremos clic en el enlace que te hace refrescar. Después de haber recargado, el servidor no se actualizará automáticamente en la primera carga Entonces revisa tus fuentes. Ir a CSS y Principal. Y vamos a hacer una búsqueda de control para kit web. Verás que hay 40 presentes. Estos vienen por defecto con CSS normalizado. CSS normalizado es un archivo HTML que se ha escrito para hacer que todos los elementos de muchos navegadores diferentes se vean iguales. CSS normalizado anula los valores predeterminados del navegador una manera que todos los navegadores se ven algo iguales bootstraps usan esto, y también han trabajado un poco en ello Y lo han incluido como parte de Bootstrap. De eso son esas 40 clases de webkit. Ahora cerremos ese proceso. Haremos producción de render. Eso es en un entorno de producción que imita lo que sucede cuando construyes Verás que su entorno es la producción. Controlemos, haga clic en el enlace. Después entraremos en Fuentes y CSS y Principal, y haremos Control y webkit Verás las 99 clases presentes ahí. El prefijo automático ha agregado esas 99 clases basadas en el archivo de lista de navegadores. Si miras en la raíz directa, verás B navegadores lista RC basada en estos navegadores que Bootstrap ha especificado, son la web Prefijos que se requieren para aquellos navegadores que serán los navegadores más antiguos entre esta lista, generalmente no los más nuevos. Puedes modificar esta lista si estás especificando algunos navegadores más antiguos que los que están presentes aquí. Obtendrás más prefijos. Pero hay algunos atributos CSS que se han utilizado en la versión actual de Bootstrap, Bootstrap five, los cuales, incluso con prefijos, no funcionarán en navegadores más antiguos, hay que tener cuidado Este archivo estará produciendo un archivo CSS, que Bootstrap admite. Para tener cuidado, no empujas las cosas demasiado lejos o es posible que no obtengas los resultados aquí después. Si puedes producir un archivo CSS con 99 prefijos o por ahí en el entorno de producción, puedes ejecutar tu entorno de desarrollo , el servidor dev, y tienes 40 Eso significa que estás usando correctamente Autoprefixer y estás listo para pasar a la siguiente lección Viendo la siguiente lección. 11. Lección11: Ahora que hemos configurado Hugo para compilar la fuente CSS bootstrap a un archivo CSS que cumple con las mismas especificaciones que bootstraps archivo CSS disponible, que es para descargar en su sitio web Ahora vamos a usar un paquete llamado CSS para eliminar las clases CSS no utilizadas. Para reducir el tamaño del archivo, necesitamos instalar el programa CSS de purga. Si haces una búsqueda de NPM y purgas CSS, vienes sobre esta página aquí que se instala con NPM o NPM install y luego Pero no te confundas porque este paquete en particular no funcionará con post CSS y Hugo. Lo que necesitas es el siguiente plug in y voy a poner el comando para ello en la sección de recursos para esta lección. Esta es una versión de Per CSS que funciona como un plug in para post CSS. Una vez que lo hayamos instalado, podemos ejecutarlo con este código Javascript aquí. Sigamos adelante y copiaremos y pegaremos ese comando, y lo ejecutaremos en nuestro proyecto. Abriremos una nueva terminal. Vamos a pegar en ese código que está instalado. Ahora sigamos adelante y escribamos el código en nuestro archivo de configuración post Css Empezaremos con este texto aquí, lo copiaremos. Luego pegaremos ese texto debajo del prefijo automático align top de la página. Ahora para que las cosas sean más simples aquí abajo como viste, copiamos y pegamos los corchetes de apertura y cierre para ejecutar el prefijo automático Para enchufar la parte superior donde se está definiendo. Eso también lo haremos por los PerGS. Lo que tendremos que hacer es que podamos deshacernos de esta línea por completo y sus corchetes asociados. Y luego nos desharemos de la palabra por CSS. Vamos a sacar eso a colación. Podemos usar Alt Shift para reformatear todo lo que parece mucho ne Luego iremos a la fuente a una nueva línea. Y también llevaremos ese corchete de cierre a una nueva línea. Cambiaremos la carpeta de origen a diseños. Ahí es donde vive nuestro HTML. La estrella doble se refiere a cualquier carpeta en los diseños, o incluso puede ser ninguna carpeta en los diseños. Si no tenemos carpetas nuevas, entonces hacemos una coma y una nueva línea y pondremos algunas comas invertidas y haremos contenido estrella, estrella, estrella, Eso hará referencia a cualquiera de los archivos markdown si están en una carpeta o no dentro del contenido Ahora eso solo va a ser proporcionar clases HTL CSS a poss que se han escrito explícitamente en markdown a través Es Pss no sabrá ninguna etiqueta HTL que se produzca a través Ahora que ya lo hemos configurado, lo que podemos hacer es ir allí. Dice autoprefijador. Pondremos una coma y luego ejecutaremos la purga. La constante CSS, que hará referencia aquí arriba. Tiramos en el enchufe y luego lo estamos ejecutando con estos ajustes. Vamos a darle una oportunidad a eso. Guardaremos nuestra configuración. Tenemos que ejecutar el producto, renderizar la producción para verificar que funcione. Después controlaremos haga clic en el enlace o abra su navegador. Si ya lo tienes funcionando, actualiza tu página, haremos clic derecho, inspeccionaremos. Después iremos a los tres puntos. Y vamos a ir a más herramientas. Y vamos a correr cobertura. La cobertura aparecerá en la parte inferior. Tienes que recargar. Puedes hacer control R o comando R, o puedes presionar el botón Recargar, Luego vuelve a cargar tu sitio Y realiza un seguimiento de cuánto de los recursos se han utilizado. Por ejemplo, el archivo Javascript, 65% del archivo Bootstrap Javascript no está utilizado. Se puede ignorar la carga de la biblioteca porque eso es de Hugo. Pero la SS principal, es decir 47% está sin usar. Vamos a hacer un chequeo en un minuto. Lo compararemos con el script dev donde ninguno de estos complementos se está ejecutando. Pero vamos a hacer una rápida comprobación de que todas las páginas están funcionando. Antes de continuar, nos hemos topado con nuestro primer problema, Esa es la paginación paginación no se proporcionó a través del archivo HTML, se proporcionó a través de una plantilla construida en Hugo Volvamos rápido al proyecto y echemos un vistazo a eso. Un resumen rápido en caso de que seas el último curso, para que puedas ver exactamente cómo funciona eso Si entra en diseños y predeterminados, luego enumere Html. Verás en la parte inferior, estamos tirando de la plantilla de paginación interna de Hugo Regresa al sitio web e inspeccionamos. Y veremos qué clases se están utilizando. De hecho, haremos clic derecho en la navegación rota e inspeccionaremos eso. Tenemos algunas clases. Tenemos paginación, página predeterminado desactivado, elemento de página activo Y luego tenemos un enlace a la página que es por cada enlace que se ha proporcionado. Ahora volvamos a purgar CSS, la configuración, y configurarlo para que incluya en listas blancas estas clases CSS. Si vas a la página de documentos de Pss, purgas CSS.com y op link en la sección de recursos, pasamos a listado seguro Verás que hay algunas formas en las que podemos proporcionar esta información para purgar CSS. Hay una lista segura estándar donde puedes poner una lista de clases o que podemos hacer es donde podemos proporcionar formularios estándar profundos y codiciosos Aquí hay algunos ejemplos. Si miras a codiciosos, eso es bastante útil para nosotros porque utilizará el texto que nos proporcionaste También tendrá clases a ambos lados de la misma. Estos ejemplos están usando el texto al final de la clase. Si nos deshacemos de ese signo de dólar y ponemos una zanahoria, que es el turno seis, el inicio, estaremos usando el texto al inicio de la cadena y estos son comandos re jx Vamos a entrar en nuestra configuración y vamos a configurar eso, copiar y pegar esta configuración de lista segura. Volveremos a nuestros proyectos y los pondremos en marcha. Pondremos una coma al final de la sección de contenido. Vamos a pegar en lo que tenemos de los docs borraremos lo que hay dentro profundo y estándar y también dentro codicioso Por ahora, comentaremos estándar y profundo porque no los vamos a usar. Solo escribamos una lista rápida de todas las clases a las que estamos tratando de apuntar. Estas son todas nuestras clases. Escribamos algunos rechazos. Empezaremos con los dos primeros. Si hacemos una barra y luego una zanahoria, que es el turno seis y luego la paginación, también recogerá paginación por defecto Entonces pondremos eso en una nueva línea para que las cosas sean un poco más fáciles de leer. Ponemos una última tajada y luego una coma para nuestros próximos rechazos Zanahoria coincide con este texto con el inicio de la cuerda. No coincidirá con nada antes de la palabra paginación, pero coincidirá con las cosas después de ella porque estamos usando codiciosos Luego coincidirás con la página que recogerá todas estas clases aquí abajo. Eliminemos nuestras notas. guardaremos, revisaremos el sitio. Se ve genial. Tenemos nuestros enlaces deshabilitados a páginas anteriores en la primera página, que está deshabilitada porque ya estamos en la primera página. Tenemos la página actual que está resaltada en azul. Tenemos la segunda página y tenemos la página siguiente y los enlaces de la última página ahí los cuales están funcionando todos. Genial. Hagamos ahora una comparación rápida para ver cuánto tamaño de archivo estamos realmente guardados. Lo que vamos a hacer es desactivar el CSS de purga. Lo pondré en su propia línea, y luego lo comentaré con un doble y lo guardaré. Después volveremos al navegador e inspeccionaremos y actualizaremos. Estoy viendo 165 kilobytes y 96% sin usar. Entonces voy a volver a habilitar purgar CSS. Vamos a refrescar con control o comando R, Tenemos 13 kilobytes y sólo 58% Esa es una reducción bastante grande si has logrado llegar a esta etapa en la que has habilitado por CSS y has reducido sustancialmente el tamaño de tu archivo, y debajo de la sección de cobertura, tienes un porcentaje mucho menor que no se usa y has logrado que tu paginación funcione Estás listo para pasar a la siguiente lección. Ver ahí. 12. Lección12: Ahora que hemos terminado de escribir nuestro código para la compilación de la fuente SCSS, ahora vamos a mover todo ese script a un parcial para que pueda ser re, usado para importar otros archivos SCSS De esa manera no tenemos que copiar y pegar nuestro código. Podemos simplemente llamar al parcial múltiples veces con diferentes parámetros. Lo primero que tenemos que hacer para crear nuestro parcial es en la cabeza y encontrar el código que queremos mover. Toda esta sección aquí se va a mover a un parcial. Cortaremos ese código, luego volveremos a nuestra carpeta de parciales. Haremos un nuevo archivo. Lo llamaremos lib sa hl. La razón por la que lo llamo libsas es porque en nuestra configuración estamos forzando a Hugo Che Lipsas que actualmente es el predeterminado Pero eso puede cambiar y no queremos romper cambios. Eso lo guardaremos aquí. Estamos apuntando al archivo. Voy a resaltar eso y controlar o mandar X para cortarlo y reemplazarlo por un punto. Y guardaremos el archivo. Entonces vamos a configurar, llamar a nuestro parcial para que el archivo que estamos tratando recuperar sea el contexto del parcial. Volvemos a nuestra cabeza, ponemos los dos paréntesis, y ejecutaremos la función llamada parcial. El parcial será, ya que no es necesario poner HTML, luego después de las libsas, normalmente para un parcial pondrías en un punto completo Estás aportando todo el contexto de tu proyecto Hugo al parcial. Pero en este caso, vamos a pegar en el nombre del archivo. Ahora, por ejemplo, queríamos crear un archivo Vendors CS. Volveremos a nuestros activos y CSS y haremos un nuevo archivo, y lo llamaremos proveedores. Entonces es tan fácil como hacer un nuevo parcial. Incluso podríamos copiar y pegar esa. Cambiaremos el CSS principal a proveedor. Digamos que íbamos a sacar algunos enchufes de terceros. Podríamos ejecutar su código en el archivo de proveedores si queremos dividirlo y mantener el tamaño del archivo bajo para disminuir el tiempo de carga de nuestra página debido a que los archivos se cargan simultáneamente. Esa es una gran manera de hacerlo por ahora. Voy a comentarlo. Para comentar Hugo tags ponemos en slash star y luego una estrella slash Porque actualmente no estoy usando ese archivo. Vamos a ejecutarlo y comprobar que funciona. Parece que está funcionando bien. Solo ve e inspecciona nuestras fuentes. Todo sigue siendo jalado como deseábamos. Si has logrado seguir generando el CSS incluso después de colocar tu código en un parcial, estás listo para pasar a la siguiente lección. 13. Lección13: Entonces terminamos de tratar con los paquetes de NPM y el script Ahora vamos a ver cómo importar solo las partes de la fuente Bootstrap que requerimos. Esto reducirá sustancialmente el tamaño del archivo, y en cierto modo es mejor que Perd CSS Pero obviamente hay cosas que Perd CSS hace que no puedes hacer a través de la importación selectiva Comenzaré esta lección en el sitio web de Bootstrap Five Docs y pondré el enlace para esta página en particular. En la sección de recursos, vamos a personalizar y Sas. Actualmente tenemos nuestro proyecto configurado para importar todo el proyecto Bootstrap, pero el enfoque de esta lección es crear una importación lean. Solo estamos importando las partes de Bootstrap que queremos para nuestro sitio web. Esa es la opción A. Vamos a ver la opción B. Y así es como solo incluimos partes de Bootstrap. Verás aquí que lo han desmentido en trozos. Pero si lees el texto con mucha atención, tienes que incluir realmente todo lo que quieras. Y solo están incluyendo partes de ella aquí para ti. Lo que vamos a hacer, vamos a sumergirnos en el paquete Bootstrap y echar un vistazo a todas las diferentes partes que se importan. Y configurar nuestro propio archivo SS principal para importar solo las partes de Bootstrap que requerimos. Empezaremos copiando y pegando todo lo que hay aquí Después abriremos la carpeta Assets y CSS y el CSS principal. Y verás originalmente estamos importando todo el proyecto Bootstrap. Simplemente lo comentaremos por ahora ya que es una buena referencia. Después pegaremos el texto que acabamos de copiar del sitio web de Bootstrap. Consulta la referencia anterior, verás que tenemos bootstraps. Bootstraps aquí. En los ejemplos proporcionados tienes módulos de nodo, tendremos que eliminar esa parte de módulos de nodo al inicio. Puedes hacerlas todas a la vez con solo resaltarlo y luego hacer clic derecho y cambiar todas las ocurrencias. Y vamos a quitar eso, ya está listo para funcionar. Sin embargo, aún no hemos incluido todos los componentes de Bootstrap. Guardaremos nuestro archivo y luego iremos a ver qué tiene Bootstrap en sus proyectos. Abriremos módulos de nodo, algunos lo revisaremos, encontraremos Bootstrap. Estamos buscando en las carpetas CSS como aquí. Bootstrapssn' navega a este archivo original , BootstrapSS. Eso es justo en la parte inferior. Se trata de algunos otros archivos. Tenemos utilidades, reinicio y red ahí dentro. Importaciones optativas. Personas que no quieren usar toda la biblioteca Bootstrap. Probablemente solo importarán, por ejemplo, la grilla o el reinicio. Si estamos buscando aquí, verá todos los componentes. Vamos a destacar todos esos. Copiarlos. Después cerraremos la carpeta Node Modules porque siempre es grande y voluminosa Vuelve aquí y los pegaremos por el fondo. Y luego averiguaremos lo que tenemos y qué no tenemos. Tenemos funciones en la parte superior para que podamos eliminar eso. Tenemos variables y mix ins. Aún no tenemos servicios públicos, luego todos estos hasta el fondo. No los hemos importado. Ahora tenemos un poco de problema. Es decir, necesitamos configurar la ruta porque actualmente estos enlaces son relativos a la carpeta bootstrap en la carpeta de módulos de nodo, mientras que nuestros enlaces de importación aquí son relativos a nuestro archivo. Lo que haremos es destacar todos estos. Cortarlos, y luego los pegaremos aquí. Tendremos que destacar la primera parte de la URL. Y luego mantén pulsada la llave antigua y da clic al inicio de estas importaciones y pégala. Otra forma de hacerlo es que podrías resaltar todo ahí, solo los que no tienes, la URL completa y cortarlos. Haz un nuevo archivo, pégalo ahí, regresa, resalta la parte que necesitas agregar. Copiarlo. Entonces podrías resaltar esta parte del código, hacer clic derecho y cambiar todas las ocurrencias. Usa tu tecla de flecha y pégala. Te ahorra mucho tiempo. Entonces vamos a cortar eso. Cierre el archivo. Y pegarlo en. Ya casi estamos ahí. Lo siguiente que tenemos que hacer es crear un archivo para las anulaciones de variables predeterminadas y crearemos un archivo para código personalizado adicional Volvemos a nuestra carpeta SCSS y haremos un nuevo archivo Ahora los archivos que no están destinados a ser importados directamente, usamos guiones bajos Vamos a hacer subrayado variables personalizadas, CSS, subrayado CSS personalizado Después volveremos a nuestro principal y le pondremos un enlace de importación. No necesitas el cursor de subrayado cuando estás ejecutando una importación, vamos a hacer variables que no necesitas el CSS Eso lo resuelve automáticamente. Debemos poner el colon al final. Después nos desplazaremos hacia abajo hasta el fondo. Paso cinco, haremos una importación y va a ser CSS personalizado. Vamos a poner una columna y sólo vamos a arreglar ese nombre de ese archivo terminó con un guion bajo Todo bien. Vamos a decir que lo vamos a ejecutar, vamos a comprobar que todo funciona. Y luego volveremos y empezaremos a deshabilitar algunas partes de Bootstrap para ayudar a hacerlo más delgado y realmente importar las partes que necesitamos Esto, sin embargo, no es tan bueno como el paso anterior. Purgamos CSS Tienes que ejecutar ambas cosas juntas para conseguir realmente un archivo pequeño. Nos quedaremos sin script dev, La página sigue funcionando. Un vistazo rápido, podemos ver que tenemos las tarjetas de imágenes navbar, tenemos paginación Estas son algunas de las cosas que tenemos para asegurarnos de que no eliminemos. Repasemos nuestra lista. No podemos eliminar ninguno de los elementos de configuración en uno a cuatro podemos sentarnos pasando por los componentes. Es necesario tener root y reiniciar más que probable. Escriba imágenes, contenedores de lata y cuadrícula, no estamos usando tablas, podemos comentarlo. De hecho, puedes destacar algunas cosas. Nuevo control K C o comando C en código VS. Vamos a necesitar botones. Destacaremos transiciones, Desmontables. Grupo de botones, necesitaremos nav, navbar y tarjeta. No estamos usando acordeón ni pan rallado. Controla KC para comentarlos, estamos alerta o grupo de progreso, cerrar, brindis, punta de herramienta modal, pop over carrusel, spinners off canvas o marcadores de posición controlan KC para Mantendremos la API de ayudantes ahí. Lo guardaremos e iremos a revisar nuestro sitio. Tienes que revisar con mucho cuidado todo tu sitio y asegurarte de que ninguno de los CSS de tu sitio se haya roto por lo que acabas de hacer. Es un proceso un poco intensivo de mano de obra, pero cada vez que restringes las importaciones de CSS o cambias o purgas la configuración de CSS, es muy importante que verifiques dos veces si no has roto el sitio, todo se ve genial Si has logrado reducir tu importación de CSS bootstrap a solo unos pocos componentes que requieres y no has roto el CSS de tu sitio web, estás listo para pasar al siguiente paso y te va muy bien con el proyecto. 14. Lección14: Ahora vamos a ver personalizar el archivo CSS Bootstrap que se ha generado para que tenga cosas como colores, tamaños, sombras de estilo que coincidan con la forma en que queremos que se vea nuestro sitio web Por defecto, Bootstrap es bastante genérico, y hay muchos sitios web que utilizan los valores predeterminados de Bootstrap Estamos buscando cambiarlos, pero sin crear CSS adicional que finalmente creará archivos más grandes para su sitio web. En realidad vamos a cambiar la fuente de Bootstrap para que lo que es output sea diferente. Pero lo estamos haciendo sin tocar los archivos en la carpeta de módulos de nodo. Simplemente creando nuestro propio archivo de variables. Comencemos esta lección en la misma página de doc bootstrap que la anterior. La página hemos completado todo en la estructura de archivos y sección de importación. Ahora estamos en los valores predeterminados de las variables. Y dice que cada como variable en Bootstrap incluye la bandera por defecto de exclamación Si elimina eso, puede anular ese valor predeterminado con su propia variable sin modificar los códigos fuente de arranque. No es necesario modificar el código fuente bootstrap. Tampoco tienes que duplicar con tu propio CSS para sobrescribirlo De hecho, podemos modificar código fuente de bootstrap a través de nuestras propias variables. Bootstrap se instala en la carpeta non-modules. No modificamos nada ahí en absoluto, solo proporcionamos nuestras propias variables. A medida que estamos importando Bootstrap, encontrarás una lista completa de variables Bootstraps en el archivo SS de variables de guión bajo Vamos a comprobarlo en un minuto porque ahí es de donde los vamos a copiar y pegar. Necesitas importar funciones bootstraps, que tenemos, entonces ya hemos configurado nuestro propio archivo para esta sección Aquí lo que haremos es saltar y revisar el archivo CSS variable bootstrap. Y luego empezaremos a tematizar nuestro sitio web a través de variables. El primer ejemplo, copiaremos y pegaremos las variables que Bootstrap nos ha proporcionado para el color de fondo y el color del texto para el cuerpo. Antes de sumergirnos en la carpeta de módulos de nodo, abriremos nuestra carpeta de variables personalizadas y las pegaremos. Lo estamos tematizando con un fondo negro y un color de texto muy oscuro Siempre vamos a quedarnos con eso, pero solo lo guardaremos y vamos a echar un vistazo. Obviamente ha funcionado. No es la mejor idea, pero al menos sabemos que sí funciona. Volvamos ahora y vamos a tener una re tematización nuestro sitio web más a nuestro gusto. Nos dijo eliminar esos por completo y guardarlos. Como puede ver, volvió a aparecer en los colores originales por defecto. Voy a bajar a los Módulos de Nodo, colocarlo en Bootstrap y luego abrir el variabless Aquí es donde encontramos todas las variables por defecto. Lo primero que haremos es bajar y encontrar las variables para el del texto y el color de fondo. Después de haber revisado esto varias veces, comenzarás a recordar la ubicación de todo. Todas las variables comunes aquí. Tenemos el fondo del cuerpo, color del cuerpo y la línea de texto. Sólo copiaremos esos dos primeros. Aquí está la captura. Sólo voy a pegarlas. Aquí está nuestro primer problema. Si guardo esto, el compilador SCSS en vivo Sas no sabrá lo que significa blanco y no sabrá qué significa grano 900 El motivo por el que no sabrá es porque en este punto lo único que se ha importado son las funciones. No ha importado ninguna de esas variables de color que podemos ver aquí. Yo sólo voy a guardar eso. Está lanzando un error y dice variable indefinida blanca. Si comento eso y lo guardo arroja un error diferente el cual es la variable indefinida gris, 900. Lo que tenemos que hacer, esto va en contra de lo que recomiendan los docs de la SCSS Si no estás seguro de cuáles son los documentos de SCSS, es argot do com ahí, encontrarás todos los docs para ejecutar CSS y Como comúnmente se llama Pero si nos fijamos en los documentos, por defecto cada página en realidad tiene por defecto CSS Por ejemplo, entraremos en una de las páginas, ya está en SCSS Podemos cambiarlo a SS, pero por defecto a SCSS porque en realidad SCSS se vuelve más popular Eso es porque SSS en realidad está escrito como CSS con algunas diferencias menores que están fuera del alcance de esta clase Para solucionar nuestro problema, tenemos que entrar en variables y tenemos que encontrar la variable blanca y la variable grano 100. Y tenemos que declarar esas variables antes de que estemos modificando. Estas clases, lo que haremos es poner algunas líneas en blanco. Vuelve a Variables, y volveremos a desplazarnos hacia arriba. Algunas personas copian y pegan todo el archivo, pero es un poco excesivo. Copiaremos y pegaremos en nuestros grises hasta la parte superior. Podemos dejarlos con las etiquetas predeterminadas si queremos porque no las estamos modificando. Y luego bajaremos y encontraremos nuestros colores. Aquí están los colores básicos. Péguelas en. Yo diría que hay una alta probabilidad de que necesites tener los colores mapeados a primario y secundario y así sucesivamente. Así que bien podríamos ponerlos en. Bueno, bien. Se tiene que asegurarse de mantener el pedido igual también. Porque aquí primaria se refiere al azul y luego el azul se declara aquí. Ahora vamos a eliminar default en lugar de blanco, lo cambiaremos a light, que es un color mucho más suave para el color del cuerpo de fondo está actualmente en gris 900. Reconocimiento, lo probaremos en gris 800 en su lugar. Eso lo guardaremos, lo comprobaremos. Se ve genial. Nuestro color de texto es mucho más suave. Fondos. Una diapositiva de color blanquecino. Si inspeccionamos y vamos a, verás que el color es una variable. Bs, color del cuerpo, color de fondo es BS, cuerpo BG. Haremos click en eso, verás que hay un 800 gris. Si buscamos fondo corporal, en realidad es un IGB, pero ese es nuestro color claro ahí Eso está funcionando Bueno, pasemos por ahora y cambiaremos nuestro color primario a algo un poco más apetecible Es muy común que la gente use este color azul. Entonces podríamos pasar y cambiaremos la apariencia de nuestras tarjetas también. La forma más fácil de hacerlo es que nos desharemos del azul. De hecho, podemos elegir uno de estos colores. Esta es la forma más básica. Entonces te mostraré una forma más avanzada. Ya no queremos ser azules. Queremos que sea, por ejemplo, naranja. Sólo estamos escribiendo la variable naranja porque ya se ha declarado aquí arriba. Vamos a guardar ese cambio. Nuestra secundaria podría oscurecer un poco el 700. Solo ten cuidado. Pero debido a que el texto de nuestro botón también es gris, no queremos chocar. Nuestras primarias ahora se vuelven naranjas. Y en todas partes hemos usado primary para cualquiera de nuestros elementos, ahora ha cambiado a lo largo de todo el sitio, lo cual es mucho más fácil que anular el CSS Luego entraremos y cambiaremos nuestras tarjetas. Entraremos en nuestro archivo de variables el archivo bootstrap del paquete MPM Haremos el control y buscaremos tarjeta. Ahora estamos en la sección de tarjetas. Destacaremos todo eso. Y vamos a tener cuidado porque se refiere a otras variables y eso va a provocar un error. Lo copiaremos y pegaremos. Volveremos a nuestras variables personalizadas. Intentaremos mantener las cosas en el mismo orden. Tendremos que encontrar complicado el ancho del borde espaciador. Como puedes ver, es por esto que algunas personas simplemente copian y pegan todo el archivo. Lo que realmente nos preocupa, sin embargo me gustaría cambiar el radio, vamos al radio del borde de la tarjeta, usa radio fronterizo. Una forma de hacerlo es que en realidad puede eliminar partes. Entonces no queremos modificar para decir que solo quería cambiar el radio de la frontera. También podría cambiar el grosor del borde. Voy a borrar los tres primeros. Dejaremos el color por ahora. Cambiaremos el radio. Voy a borrar el resto de esos sólo para mantener las cosas simples. Tenemos algunas variables aquí, tenemos radio de borde y ancho de borde. Eso sólo lo guardaremos. Verás que va a arrojar un error. Volveremos a nuestro archivo de variables y buscaremos el ancho del borde y el radio del borde. La forma más fácil de hacerlo es desplazarse de nuevo al ancho del borde de control superior. Tenemos un ancho de borde de uno. La forma más fácil de cambiar es simplemente poner en un valor de dos P x tres Px y así sucesivamente. Entonces tenemos radio fronterizo. Voy a copiar todos esos adentro, lo pondré encima de las tarjetas. Digamos por ejemplo, quiero cambiar mi radio fronterizo. En primer lugar, deshazte del default. Podría cambiarlo a, digamos, por ejemplo, para darle un radio pequeño. Nuestro ancho de borde que actualmente está en un píxel, podría cambiar eso a dos P X. Y lo guardaremos, lo revisaremos. Ahora tenemos nuestro borde de dos píxeles de ancho y tenemos nuestro radio estrecho. Si hacemos clic derecho e inspeccionamos y vamos a la etiqueta de la tarjeta, verá el radio de borde de 0.2 m, que es un radio de borde muy estrecho. Después borde borde de 22 píxeles de espesor. Eso se hace exactamente como pedimos. Si te desplazas hacia abajo hasta la parte inferior de casi todas las secciones de los documentos de bootstrap, en realidad te dice cuáles como variables puedes anular para personalizar, es realmente útil. Digamos por ejemplo, querías tener un borde de dos píxeles en tus tarjetas, pero querías que todo con un borde fuera de dos píxeles. Eso es muy fácil. Simplemente lo dejaremos en el ancho del borde predeterminado. Incluso podrías comentarlo porque no lo estamos anulando. Luego volvemos a subir al ancho del borde, que no copiamos y pegamos. Volveremos a buscar el ancho del borde, asegúrate de que estás buscando la primera instancia. Volveremos a subir al primero. Entonces copiaremos y pegaremos el ancho del borde, aseguraremos de que esté en el orden correcto. Entonces cambiaremos esos dos. Ahora cada elemento en su sitio web que tiene un borde, ahora tendremos un ancho de dos. Y todavía tendremos un ancho de borde de dos. Lo último que tenemos que hacer es mirar los colores y veremos el cambio de colores. No usar bootstraps, colores predeterminados antes de cambiar primario a naranja Y eso fue usando un construido en naranja. Hay dos formas en las que podemos hacer esto. En primer lugar, veremos modificar el naranja. Vamos a sacar la bandera por defecto en el código VS. Es bastante fácil, solo tienes que pasar el cursor sobre la pequeña muestra que te da Entonces podemos hacer algunos cambios. Entonces queríamos darle un poco más de rojo. Podemos arrastrar hacia arriba, ya no es realmente una naranja lo que ha cambiado entonces es más un respiro solar. Eso lo guardaremos. Ahora, el naranja se vuelve más de un rojo sunburst De otra manera podemos hacerlo, solo voy a comentar que naranja no lo comentará porque puede ser requerido en el camino. Yo sólo controlaré a Ed para traerlo de vuelta. La otra cosa que podemos hacer, en lugar de usar una variable aquí, en realidad podemos poner un hash y luego un color. Por ejemplo, si apenas empezamos con blanco por ejemplo, entonces colocamos el cursor sobre Entonces podemos entrar ahí y personalizarlo a cualquier color. Dónde. Después de que depende totalmente de nosotros, estoy pensando que podría ir por un bonito azul profundo. Bueno, ten cuidado con el blues porque hay en tantos sitios web bootstrap, eso lo guardaremos. Esa es nuestra primaria. Recomiendo, si es posible, los mapees a variables de color. De esa manera puedes usarlos más abajo en tu código. Pero de todos modos, esta es una forma de hacerlo . Entonces lo revisaremos. Ahí está nuestro azul profundo siendo reproducido en todo el sitio. Si has logrado anular las variables bootstrap y cambias con éxito algunos componentes en el sitio a través los diferentes métodos que te he mostrado, estás listo para pasar a la siguiente lección. 15. Lección15: Ahora vamos a ver hacer nuestras propias clases de utilidad. Es decir, clases como las que usamos que forman parte de bootstrap. Pero vamos a hacer los nuestros propios porque a veces bootstrap simplemente no es suficiente. Hay una API, un sistema que está integrado en Bootstrap que nos permite hacer nuestras propias clases con bastante facilidad. Vamos a comenzar esta lección nuevamente en una página de Bootstrap Do. Ahora estamos viendo la API de utilidad que se encuentra en la sección de utilidad bajo API en los cinco de Bootstrap. ¿Utilizamos la API de utilidad para generar nuestras propias clases de utilidad? Las clases de utilidad son las clases que utilizamos con Bootstrap. Las dos cosas que se requieren cuando estás creando nuestras propias clases son la propiedad a la que estás apuntando y los valores que le estás dando. Si te desplazas hacia abajo, el primer ejemplo es bastante sencillo. Tenemos una propiedad de opacidad. Tenemos valores de 025507500, y hemos asignado valores de 0.25 0.5 0.75 0.1 Probablemente no vas a usar 100 a menos que estés tratando anular algo que ya es transparente Si usamos un valor de 25, por ejemplo, que será opacidad 25, nosotros opacidad de 0.25 Eso es bastante transparente Ahora podrías estar pensando que es una palabra bastante larga. Tienes que escribir cada vez y probablemente no sea necesario. Y ahí es cuando puedes agregar clase. El siguiente ejemplo estamos proporcionando una clase de O y esa es la letra, el número cero y tenemos nuestros mismos valores. Y luego salidas 02550 y así sucesivamente. Nos hemos acortado con la clase personalizada. Seguimos apuntando a la opacidad, pero ahora tenemos una clase personalizada Estos son un poco difíciles de implementar. Pasaremos por los estados más tarde. Si te desplazas hacia abajo hasta la parte inferior usando la API, aquí hay un ejemplo. Necesitamos tener funciones y variables importadas , y utilidades. Después de haber importado las utilidades, podemos realizar un mapa. Fusionar con nuestro propio mapa de servicios públicos. Ese va a ser el único mapa. En definitiva, copiaremos y pegaremos este ejemplo de cómo usarlo. Bueno, entonces entra en los activos y SCSS en Maine. Vamos a ir por debajo donde hemos importado los servicios públicos. Reorganizaremos esto en un minuto. Sólo vamos a conseguir que todo funcione. Vamos a pegar eso en. Entonces volveremos a nuestra capacidad. Lo usaremos con la clase personalizada. Copiaremos solo la sección con opacidad incluyendo sus corchetes requeridos. Nosotros copiaremos eso. Luego nos desharemos de la sección del cursor, asegúrate de que estás seleccionando los corchetes correctos cuando lo hagas. pegaremos en O Shift para Reformatear. Eso lo guardaremos. Luego agregaremos la clase a la imagen en nuestro sitio web. Nosotros, usaremos probablemente opacidad de 0.75 Por ahora, entrar en layouts e indexar HTML Buscaremos nuestra imagen e iremos a clases y pondremos 75 de ahorro. Después ejecutaremos el servidor Dev. Nuestra imagen es mucho más transparente de lo que solía ser. Si lo inspeccionamos, podemos ver esa clase de aquí diciendo que la clase crea una opacidad de 0.75 Pero podemos hacerlo mejor que eso porque lo siguiente en nuestros documentos bootstrapped Hemos mirado la propiedad y la clase, ahora estamos mirando al estado, y por ejemplo, Hova, esto es útil Lo que haremos es copiar y pegar este ejemplo. Apenas la parte de la opacidad. Incluso podríamos copiar y pegar la línea Hova si quisieras Después volveremos a la red eléctrica, resaltaremos el código existente. Probablemente podríamos simplemente agregar la línea extra, pero pegar en nuestro nuevo formato de código. Ahora creará las etiquetas de opacidad originales de 25, 50 y así sucesivamente También tendremos una opción de estado Hova. Eso va a salvar. Vamos a deshacernos de un vistazo al CSS y lo comprobaremos Antes de hacer eso, aquí hay un ejemplo. Yo tengo opacidad, pero también vas a conseguir estas opacidad, opacidad 25 así como los estados Hova, tenemos una Creo que podríamos dejar opacidad como nombre de clase. Un poco fácil de recordar. Si estás pasando por un sitio web que no has visto desde hace tiempo, probablemente sea un poco más fácil jog tu memoria Tenemos el sitio, inspeccionaremos, entraremos en fuentes, abriremos la carpeta SCSS Ya estoy en ese punto puedes hacer control y teclear opacidad Entonces verás que tenemos opacidad cero, que es opacidad de Entonces tenemos opacidad cero. Placa, no muy útil, cero, pero por ejemplo 25 y luego 25 Hoa Podemos establecer un objeto para que a medida que el ratón lo pase por encima, se vuelva más transparente. Vamos a mantener eso a prueba. Volveremos al índice Html. Esta vez vamos a hacer opacidad 75, flotar. Y eso lo guardaremos. Entonces al pasar el mouse sobre, obtenemos el efecto de opacidad Vayamos a nuestras cartas y las pondremos para que todas las cartas tengan ese efecto. Sólo voy a quitar ese efecto de la imagen de héroe porque no creo que sea muy apropiado. Hacer control X. Luego me desplazaré hacia abajo hasta nuestras tarjetas, hasta la imagen. Iremos a la clase y lo pegaremos. Esto se va a aplicar a todas las cartas porque estamos variando sobre las cartas desde los parámetros. Si no has hecho mi curso de introducción, solo te lo mostraré muy rápido. Vamos al contenido y luego indexd. Verás las tarjetas aquí y las hemos configurado, cada guión es una tarjeta nueva, y esos datos están en bucle sobre su tarjeta, una tarjeta dos, tarjeta tres, produciendo tres tarjetas de una tarjeta por valor de HTML Eso lo guardaremos, entonces podrás ver cuando pasas el mouse sobre ellos, obtenemos el efecto hover Si eres capaz de crear tus propias clases de servicios públicos, especialmente usando un estado que es excelente para llevar las botas de viaje a un nuevo nivel, entonces terminaste con esta lección. 16. Conclusión de Lección16 p1: Enhorabuena por llegar al final del proyecto uno. A seguro tiene mucho que tomar. Recuerda compartir un enlace con tu trabajo en la sección de proyectos para que pueda echar un vistazo a tu trabajo en el proyecto dos. 17. Lección17: Bienvenido al proyecto dos. El proyecto dos es un proyecto creativo. Es necesario darle estilo a la página de inicio o aterrizaje y la página acerca de la página usando las siguientes técnicas. Modificar variables bootstrap. Brindé una lección en video sobre cómo hacer esto. Lo haces a través del archivo SCSS. También tienes que cambiar las clases de utilidad CSS de Bootstrap en el HTML de las plantillas HTML singlete y punto índice El archivo Html singlete es para la página acerca de, y el archivo HTL índice es para la página de inicio o destino También tienes que crear tus propias clases de utilidad nuevas usando la API de utilidad Bootstrap. Por ejemplo, en un Hoa, proporcioné una lección en video sobre cómo hacer esto También he proporcionado algunos enlaces a algunas ideas de estilo de ejemplo en la sección de recursos bajo el proyecto dos. Tengo muchas ganas de ver tu trabajo en tu propio proyecto. Asegúrate de compartir el enlace. Puedes usar servicios como Cloud, Dropbox, One Drive o Google Drive, y compartir un enlace a la carpeta que contiene tu trabajo. No puedo esperar para darles algunos comentarios. 18. Conclusión del proyecto 2: Enhorabuena por llegar hasta aquí y hasta el final del proyecto dos. Recuerda, si aún no has hecho subir un enlace a tu trabajo en la sección de proyectos para que te pueda dar algunos comentarios. Gracias por tomar este curso. Ha sido genial trabajar contigo. Siempre estoy subiendo nuevos cursos sobre diseño web estático, Hugo y Bootstrap Te veré en mi próximo curso.