Modyo ofrece muchas herramientas para la creación acelerada de canales digitales. Una de estas el la plantilla Minimal, que es automáticamente generada al crear un nuevo sitio. Esta plantilla fue creada para proveer una manera ágil de crear sitios tomando en cuenta las mejores prácticas del diseño web, como parte del paquete se incluye Bootstrap 4, una de las librerías más populares entre desarrolladores frontend.
Con el crecimiento continuo de la industria digital, nuevas versiones de Bootstrap están saliendo y hoy veremos cómo cambiar la versión de esta librería a la más reciente.
El primer paso es entender cómo la plantilla Minimal contiene un snippetvariables_cssen donde los valores se toman desde Bootstrap. Para llevar a cabo el cambio de versión hay dos caminos posibles: uno es cambiar los parámetros de hoja de estilo de Bootstrap y la otra es modificar el CSS directamente.
Para ambos casos, la primer cosa que tenemos que hacer es reemplazar Bootstrap JS con la versión que queremos actualizar. Para esto, dentro de Modyo Platform dirígete a tu sitio y haz click en Plantillas. Abre el archivobootstrap_jsy pega el código Javascript de la última versión de bootstrap.
Then we have to make the decision if we are going to use the variables or not, I will leave you the two possible options so that you can focus on the one you choose.
Luego, debes tomar la opción de cómo llevar a cabo la actualización:
Opción A: Actualizar Bootstrap sin variables
Esta opción tomará la versión más reciente de Bootstrap, sin alguna integración con la plantilla Modyo. Esta es una buena opción si planeas empezar un proyecto desde cero e implementar tus propias hojas de estilo.
Desde Modyo Platform, dentro de Plantillas, abrebootstrap_cssy reemplaza el código con la hoja de estilo de la versión actualizada de Bootstrap.
Opción B: Actualizar Bootstrap con variables
Esta opción es recomendada si ya tienes un sitio implementado y solo quieres actualizar Bootstrap a su versión más reciente o si quieres aprovechar las herramientas de desarrollo acelerado que Modyo ofrece. Esto se va a lograr modificando variables dentro de la hoja de estilo.
Para integrar Bootstrap en Modyo Platform, tenemos que abrir la hoja de estilo de la nueva versión de Bootstrap en un editor de texto. Encuentra y reemplaza el color primario (#0d6efd) y cambialo por. Este código Liquid se encuentra dentro del snippet variablesy es importante para el funcionamiento correcto de la plantilla.
Este proceso se debe repetir con todas las instancias donde se use #od6efd.
Al terminar de editar la hoja de estilo, en tu sitio de Modyo Platform, dentro de Plantiillas, abrebootstrap_cssy reemplaza el código por la nueva hoja de estilo.
Es importante mencionar que la plantilla Minimal fue optimizada para Bootstrap 4. Si se modificaron los valores de grido dehelpers, el resultado final puede ser afectado. Recuerda que puedes ver una vista previa de tu sitio con todos tus cambios usando el modo de vista previa.
Foto por Josh Olaldeen Unsplash.
