Advertisement
  1. Web Design
  2. Frameworks

Un Rápido Recorrido por el Framework UIkit

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Mientras que Bootstrap y Foundation podrían ser los dos más populares frameworks front-end entre los diseñadores web, en éste artículo, voy a presentarte las características de UIkit, un ligero y modular framework front-end que utilizo casi en todos mis proyectos.

Nota: Éste artículo asume que estás familiarizado sobre cómo funcionan los frameworks front-end. También, el principal objetivo de éste artículo no es cubrir extensamente las partes individuales de éste framework (por ejemplo, el sistema de grilla). Mejor nos enfocaremos en presentar brevemente las diferentes y útiles características de UIkit.

Empezando

UIkit es creado y mantenido por YOOtheme, una compañía alemana que se especializa en crear temas y aplicaciones para la web.

Cómo Descargar UIkit

Hay diferentes opciones disponibles para incluir UIkit en tus proyectos. Puedes usar un gestor de paquetes como Bower, una red de entrega de contenidos como cdnjs, o puedes descargarlo manualmente desde su página en Github. Nota que UIkit requiere de jQuery, así que asegúrate de incluirlo en tus proyectos.

Para los propósitos de éste tutorial, usaremos cdnjs para incluir los archivos requeridos de UIkit en nuestros demos en Codepen. La mayor parte del tiempo, por simpleza, tendremos que incluir los archivos uikit.min.css y uikit.min.js. Aunque en los dos ejemplos finales, también incluiremos algunos archivos adicionales que no están incluidos en el framework. Ten en cuenta que UIkit es modular, permitiéndonos cargar sólo los archivos que realmente necesitamos.

Puedes aprender sobre la estructura de UIkit en ésta página.

Personalizando UIkit

El framework es completamente personalizable. Antes de descargar podemos modificar sus estilos predeterminados y aplicar los nuestros. Por ejemplo, si queremos cambiar los puntos de quiebre predeterminados, podemos visitar la página customizer (personalizador) y marcar la opción Advanced Mode (Modo Avanzado). Desde ahí, buscamos la sección Breakpoints (puntos de quiebre) y agregamos nuestros puntos de quiebre. Luego, obtenemos el archivo CSS recientemente generado.

Soporte de Navegadores

UIkit funciona en las versiones recientes de todos los navegadores, específicamente:

Image taken from UIkits GitHub pageImage taken from UIkits GitHub pageImage taken from UIkits GitHub page
Imagen tomada de la página de UIkit en Github

Funcionalidades Útiles de Uikit

¡Ahora es tiempo de explorar algunas funcionalidades útiles de UIkit que podrías querer utilizar en uno de tus próximos proyectos!

Flexbox y Grids

UIkit ofrece sus componentes Grid y Flex para crear maquetados responsivos. Para comprender mejor cómo funcionan éstos componentes, vamos a crear un maquetado sencillo. Antes de hacerlo, tenemos que agregar el archivo uikit.min.css para nuestro ejemplo.

Aquí están los requisitos:

  • En ventanas gráficas de hasta 767px de ancho, todas las columnas son apiladas verticalmente.
  • En ventanas gráficas de más de 767px de ancho, las anchuras de la primera y tercera columnas son 25% de la anchura del elemento padre, mientras que la anchura de la segunda columna es 50% de la anchura del elemento padre.

El marcado se ve así:

Nota los elementos .card dentro de nuestras columnas. Por razones estéticas, aplicaremos algunos estilos básicos:

Aquí está el demo en Codepen:

Como puedes ver en el demo de arriba (cuando la anchura de la ventana gráfica es mayor a 767px, los elementos .card no cubren la altura total del padre. Asumamos que queremos que ello ocurra.

Una solución rápida podría ser dar a los elementos objetivo height: 100%, ¿verdad? Sin embargo, ésto no funciona en algunos navegadores (por ejemplo en Safari), así que tenemos que descartar ese enfoque y buscar una alternativa. Un truco es definir las columnas como contenedores flex al darles la clase de uk-flex. Así que ahora si probamos de nuevo la página, veremos que los elementos .card heredan la altura del padre. Si quieres más información sobre por qué funciona esa solución, te recomiendo que veas éste planteamiento en Stack Overflow.

Éste es el demo actualizado:

Creando Animaciones basadas en el Scroll

Si eres aficionado de las animaciones basadas en el scroll o barra de desplazamiento seguramente agradecerás el componente Scrollspy de UIkit. Éste componente nos permite desencadenar animaciones y eventos mientras movemos el scroll o barra lateral de desplazamiento hacia arriba o hacia abajo. Veamos un ejemplo real para entender cómo funciona.

Para éste ejemplo, incluiremos los archivos uikit.min.css y uikit.min.js en nuestro proyecto.

La estructura del código es similar al ejemplo anterior. Nuestro objetivo es desencadenar diferentes animaciones cuando los elementos con la clase blue (en total cinco elementos) ingresan a la ventana gráfica. Para implementar éste comportamiento, agregamos el atributo data-uk-scrollspy a los elementos objetivo, su valor siendo un objeto configurable que controla la animación real. Por ejemplo, la propiedad del objeto cls guarda el tipo de animación:

<div data-uk-scrollspy={cls:'uk-animation-slide-left', repeat: true, delay: 300}">

Parte del marcado requerido se muestra abajo:

Aquí está el demo correspondiente en Codepen:

Manipulando SVGs

UIkit ofrece una magnífica forma de controlar la apariencia de SVGs. En lugar de llenar nuestro HTML con SVGs, podemos usar etiquetas img para cargar nuestros SVGs, luego añadir el atributo data-uk-svg a esas etiquetas. De ésta forma, las imágenes son convertidas en SVGs dentro del HTML que podemos manipular posteriormente. Éste comportamiento es posible si agregamos el archivo uikit.min.js a nuestro proyecto.

El marcado para un SVG es tan simple como ésto:

<img src="IMAGE_PATH" alt=" data-uk-svg>

Ahora en el CSS, podemos personalizarlo. Por ejemplo, en nuestro caso podemos cambiar algunos estilos básicos:

El demo en Codepen:

Imágenes de Fondo Responsivas

Hay ocasiones que queremos que una imagen de fondo adopte el comportamiento responsivo de una etiqueta img. Para hacer ello, podemos aprovechar el componente Cover de UIkit. Así que, primero agregamos la clase uk-invisible a una etiqueta img y luego lo encerramos en un elemento padre con la clase de uk-cover-background. Posteriormente, opcionalmente, podemos usar los componentes Utility y Flex para colocar contenido sobre la imagen de fondo.

Para hacer que ésto funcione, tenemos que incluir el archivo uikit.min.css en nuestro proyecto.

Con ello en mente, para crear una imagen de fondo responsiva con el contenido que esté centrado vertical y horizontalmente en ella, necesitaremos que el HTML se vea así:

En nuestro CSS, ahora tenemos que especificar la imagen de fondo para el padre (claro podemos agregar una imagen de fondo dentro del HTML también):

Eso nos da el siguiente resultado:

Creando Superposiciones

UIkit ofrece el componente Overlay (superponer) para ayudar a crear superposiciones en imágenes. Lo que es realmente sensacional de éste componente es que éstas superposiciones vienen en diferentes estilos con muchas opciones interesantes.

Para éste comportamiento, el único archivo requerido es uikit.min.css. Un ejemplo del marcado requerido para crear cuatro overlays (superposiciones) se muestra abajo:

No le temas al código de arriba. La gran cantidad de letras se debe a las diversas clases descriptivas que hemos agregado a nuestras imágenes. Para mayor comprensión, asegúrate de leer la documenetación para éste componente.

Éste es el demo incluído en Codepen:

Creando Presentaciones de Imágenes Responsivas a Pantalla Completa

Una de los componentes más atractivos de UIkit es el componente Slideshow (Presentación de Imágenes) Éste nos permite crear (ve si puedes adivinar) bellas presentaciones de imágenes responsivas. Para demostrarlo, vamos a crear una presentación de imágenes totalmente responsiva.

Aquí están los archivos de UIkit que necesitaremos:

  • uikit.min.css
  • slideshow.min.css
  • slidenav.min.css
  • uikit.min.js
  • slideshow.min.js

El código para la presentación de imágenes se ve así:

Aquí vale la pena mencionar dos cosas:

  • El valor del atributo data-uk-slideshow es un objeto configurable que determina la apariencia de nuestra presentación de imágenes.
  • Cuando colocamos el puntero del mouse sobre una imagen, aparecen las flechas de navegación. Ésto es algo opcional y lo hemos logrado gracias al componente Slidenav. De la misma manera, pudimos haber usado el componente Dotnav para generar una navegación por puntos.

Mira abajo el mencionado demo en Codepen:

Creando Headers Fijos o Siempre Visibles

Otro útil componente es el componente Sticky. Veámoslo en acción al crear un header fijo.

De nuevo, aquí están los archivos de UIkit necesarios:

  • uikit.min.css
  • sticky.min.css
  • uikit.min.js
  • sticky.min.js

En nuestro marcado, agregamos el atributo data-uk-sticky al elemento header. Asimismo, sólo por razones estéticas, utilizamos el componente navbar para crear la barra de navegación.

Aquí está parte del código HTML:

Para éste ejemplo, no pasamos ningún valor al atributo data-uk-sticky. Pero si queremos personalizar el comportamiento predeterminado del elemento sticky (fijo), tenemos que modificar el objeto que es pasado como un valor a éste atributo.

El demo referido en Codepen:

Conclusión

Espero que hayas disfrutado éste rápido recorrido por UIkit y te hayas dado una idea de lo que podemos crear con éste sorprendente framework. Claro, hay muchos más componentes magníficos disponibles que no abordé, así que te animo a que los veas por tí mismo. Al final pero no menos importante, una nueva versión de UIkit (v.3) será lanzada en los próximos meses con características aún más interesantes. ¡Mantente informado!

Si tienes alguna pregunta concerniente a UIkit, házmelo saber en la sección de comentarios abajo.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.