Tema Future2021 para Grav CMS

Future Imperfect de HTML5UP

El tema Future Imperfect de HTML5UP, adaptado desde cero para Grav. Versión 2021. Future Imperfect de HTML5UP presenta un diseño limpio y minimalista, estilos para todos los elementos básicos de la página y código HTML5/CSS3 diseñado para una personalización rápida y sencilla.

Tabla de contenido

  1. Características
  2. Instalación
    1. Instalación Manual
  3. Opciones Predeterminadas
  4. Logotipos Personalizados
  5. Opciones de Portafolio
  6. Página de demostración

Características

Rediseñado desde cero (versión 2021)

  • HTML5 y CSS3
  • Totalmente responsivo
  • Microdatos para blogs
  • Conforme con la accesibilidad ARIA
  • Varias plantillas para presentar tu contenido
  • Menú desplegable completo integrado en la barra de menú y la barra lateral.
  • Estilos para todos los elementos básicos de la página
  • Estilos para varios módulos
  • Compatible con todos los navegadores
  • Botones para compartir en Facebook, Twitter, Whatsapp y Telegram.
  • Páginas de contenido superior en la barra lateral
  • Totalmente responsivo con navegación móvil a pantalla completa
  • Archivos fuente de CSS basados en SCSS para una fácil personalización
  • Planos para pie de página, eslogan e íconos sociales.
  • Plantilla completa de portafolio con la biblioteca Glightbox
  • Listo para trabajar con Archivos, Migas de pan, Editable con Contenttools, Feed, Langswitcher, Mantenimiento, Tiempo de lectura, Páginas relacionadas, Extensiones Twig, Búsqueda simple y Lista de taxonomías.

Plantillas de Página Compatibles

  • Plantilla de vista predeterminada default.md
  • Plantilla de vista de error error.md
  • Plantilla de vista de blog blog.md
  • Plantilla de vista de artículo de blog item.md
  • Plantilla de vista de portafolio
  • Plantilla de vista de formulario form.md
  • Plantillas de vista modular: modular.md
    • Plantilla de vista modular de características features.md
    • Plantilla de vista modular de banner banner.md
    • Plantilla de vista modular de contacto contact.md
  • Plantilla de Owlcarousel
  • Plantilla parcial de publicaciones recientes
  • Plantilla parcial de publicaciones relacionadas

Instalación

La instalación del tema Future 2021 se puede realizar de dos maneras. Nuestro método de instalación con GPM (Gestor de Paquetes Grav) le permite instalar rápidamente el tema con un simple comando de terminal, mientras que el método manual le permite hacerlo a través de un archivo zip. Instalación con GPM (Preferido)

La forma más sencilla de instalar este tema es a través del Gestor de Paquetes Grav (GPM) desde la Terminal de su sistema (también llamada línea de comandos). Desde la raíz de su instalación de Grav, escriba bin/gpm install future2021.

Esto instalará el tema Future2021 en su directorio /user/themes dentro de Grav. Sus archivos se pueden encontrar en /tu-sitio-grav/user/themes/future2021.

Instalación Manual

Para instalar este tema, simplemente descargue la versión comprimida de este repositorio y descomprímala en /tu-sitio-grav/user/themes. Luego, renombre la carpeta a future2021. Puede encontrar estos archivos en GitHub o a través de GetGrav.org.

Ahora debería tener todos los archivos del tema en /tu-sitio-grav/user/themes/future2021.

Opciones Predeterminadas

Future2021 viene con algunas opciones predeterminadas que se pueden configurar en todo el sitio. Estas opciones son:

VALOR DEFINICIÓN
production-mode En modo de producción, solo se utiliza CSS minificado. Cuando está deshabilitado, se activan los CSS anidados.
sidebar Habilitar/Deshabilitar la barra lateral en páginas no editables como resultados de búsqueda simple, sin conexión, etc.
google_fonts_local Opción para cargar las fuentes de Google desde el tema o desde los servidores de Google.
favicon Elija su propio favicon.
custom_logo Un logotipo personalizado en lugar del predeterminado (ver más abajo).
custom_logo_mobile Un logotipo personalizado para usar en la navegación móvil.
slogan Texto personalizado para el lema.
menu_langswitcher Habilitar/Deshabilitar el icono de cambio de idioma en el menú (se necesita el complemento langswitcher).
menu_search Habilitar/Deshabilitar el icono de búsqueda en el menú (se necesita el complemento simplesearch).
menu_login Habilitar/Deshabilitar el icono de inicio de sesión en el menú.
blog-page La ruta a la página de listado de blogs, útil para un diseño de estilo blog.
miniposts Habilitar/Deshabilitar miniposts en la barra lateral izquierda.
miniposts_category Seleccionar el nombre de la categoría para miniposts (configurado en taxonomías).
miniposts_number El número de miniposts que se mostrará en la barra lateral izquierda.
recent_posts_enabled Habilitar/Deshabilitar entradas recientes en la barra lateral izquierda.
recent_posts_number El número de entradas recientes que se mostrará en la barra lateral izquierda.
footer.title Título del bloque de pie de página en la barra lateral izquierda.
footer.description Descripción del bloque de pie de página en la barra lateral izquierda.
footer.copyright_text Texto de copyright del bloque de pie de página en la barra lateral izquierda.
footer.button_text Texto del botón del bloque de pie de página en la barra lateral izquierda.
footer.button_url URL del botón del bloque de pie de página en la barra lateral izquierda.
enable_social Habilitar/Deshabilitar íconos sociales en el pie de página.
social_style Seleccionar el estilo para los íconos de Fontawesome.
custommenus.enabled Habilitar/Deshabilitar menús personalizados en el menú superior.

Para realizar modificaciones, puedes copiar el archivo user/themes/future2021/future2021.yaml en la carpeta user/config/themes/ y modificarlo, o puedes utilizar el complemento de administración.

NOTA: No modifiques directamente el archivo user/themes/future2021/future2021.yaml o tus cambios se perderán con futuras actualizaciones.

Logotipos Personalizados

Para agregar un logotipo personalizado, debes colocar el logotipo en la carpeta user/themes/future2021/images/logo. Se admiten formatos de imagen estándar (.png, .jpg, .gif, .svg, etc.). Luego, haz referencia al logotipo a través del archivo YAML de la siguiente manera:

custom_logo:
    - name: 'mi-logotipo-personalizado.png'
custom_logo_mobile:
    - name: 'mi-logotipo-movil-personalizado.png'

Alternativamente, puedes utilizar la opción de arrastrar y soltar en el campo "Custom Logo" en las opciones del tema Future2021.

Opciones de Portafolio

OPCIÓN TIPO VALOR POR DEFECTO DESCRIPCIÓN
OPENEFFECT string zoom Nombre del efecto al abrir la caja de luz. (zoom, fade, none)
CLOSEEFFECT string zoom Nombre del efecto al cerrar la caja de luz. (zoom, fade, none)
SLIDEEFFECT string slide Nombre del efecto al cambiar de diapositiva. (slide, fade, zoom, none)
MORETEXT string See more Texto adicional para descripciones en dispositivos móviles.
MORELENGTH number 60 Número de caracteres a mostrar en la descripción antes de agregar el enlace moreText (solo para móviles), si es 0, se mostrará toda la descripción.
CLOSEBUTTON boolean true Mostrar u ocultar el botón de cierre.
TOUCHNAVIGATION boolean true Habilitar o deshabilitar la navegación táctil (deslizar).
TOUCHFOLLOWAXIS boolean true Seguir el eje de la imagen al arrastrar en dispositivos móviles.
KEYBOARDNAVIGATION boolean true Habilitar o deshabilitar la navegación por teclado.
CLOSEONOUTSIDECLICK boolean true Cerrar la caja de luz al hacer clic fuera de la diapositiva activa.
STARTAT number 0 Iniciar la caja de luz en el índice definido.
WIDTH number 900px Ancho predeterminado para elementos en línea y iframes, puedes definir un tamaño específico en cada diapositiva. Puedes usar cualquier unidad, por ejemplo, 90% o 100vw para el ancho completo.
HEIGHT number 506px Altura predeterminada para elementos en línea e iframes, puedes definir un tamaño específico en cada diapositiva. Puedes usar cualquier unidad, por ejemplo, 90% o 100vh. Para elementos en línea, puedes configurar la altura en auto.
DESCPOSITION string bottom Posición global para la descripción de las diapositivas, puedes definir una posición específica en cada diapositiva (bottom, top, left, right).
LOOP boolean false Repetir las diapositivas al final.
ZOOMABLE boolean true Habilitar o deshabilitar imágenes con capacidad de zoom, también puedes usar data-zoomable="false" en nodos individuales.
DRAGGABLE boolean true Habilitar o deshabilitar el arrastre del mouse para ir a la diapositiva anterior y siguiente (solo imágenes y contenido en línea), también puedes usar data-draggable="false" en nodos individuales.
DRAGTOLERANCEX number 40 Utilizado con draggable. Número de píxeles que el usuario tiene que arrastrar para ir a la diapositiva anterior o siguiente.
DRAGTOLERANCEY number 65 Utilizado con draggable. Número de píxeles que el usuario tiene que arrastrar hacia arriba o hacia abajo para cerrar la caja de luz (establecer en 0 para deshabilitar el arrastre vertical).
DRAGAUTOSNAP boolean false Si es verdadero, la diapositiva cambiará automáticamente a la anterior/siguiente o se cerrará si se alcanza dragToleranceX o dragToleranceY; de lo contrario, esperará hasta que se suelte el mouse.
PRELOAD boolean true Habilitar o deshabilitar la precarga.

Página de demostración

https://future2021.pmdesign.dev