Recientemente Yootheme ha anunciado el lanzamiento de su muy esperado framework Uikit 3, el cual ha tenido un sorpresivo aumento de cantidad de usuarios y compite codo a codo con Bootstrap.

Primero veamos:
¿Qué es un framework de diseño web? Es conjunto de componentes, clases CSS y Javascript predesarrollados que nos permiten construir desde un simple botón hasta un sitio web responsive y multinavegador.
¿Cómo funciona? simplemente llamando una clase “uk-button”, “uk-grid”,  etc.

Como menciona Yootheme, Uikit fue reconstruido desde su base para presentarnos un framework aún más potente y sorprendentemente más rápido y liviano. La versión 3 ha sido catalogada como BETA, pero en realidad está bastante madura como para utilizarla en un sitio en producción, de hecho Yootheme la ha venido incorporando en sus últimas 4 plantillas (Fuse, Horizon, Max y Joline).

Además de los nuevos cambios al framework mismo, cabe destacar los cambios que se han hecho al sitio web de Uikit 3 el cual es mucho más intuitivo, rápido de navegar e interactivo.

¿Qué nos trae de nuevo?

Grilla (Grid)
Ahora la grilla es mucho más potente, flexible y dinámica. Grid ahora trabaja en conjunto con Width el cual es ahora un componente. Entre otras novedades puedes dividir el contenido en columnas distribuidas uniformemente y puedes lograr que el contenido se adapte automáticamente al contenedor para llenar el espacio sobrante.

Iconos
Ahora el sistema de íconos ya no depende de Font Awesome, sino que incorpora sus propios íconos en SVG. De esta forma se puede lograr más flexibilidad a la hora de utilizarlos, por ejemplo puedes ajustar el tamaño que quieras mediante la utilización de “Ratio”.  El desarrollador indica que se irán incorporando nuevos iconos en el transcurso del tiempo.

Inverse
Mediante esta clase puedes indicar a un bloque que sea claro u obscuro, Uikit se encargará de todos los detalles como color de texto, fondo, botones, etc.

Card
Viene a reemplazar a uk-panel pero con muchas más funciones para presentar los contenidos, por ejemplo ahora puedes incorporar un header y un footer a tu contenido.

Drop y Dropdown
Se le aplicó reingeniería en este componente para posicionar contenido en los eventos click y hover.

Navbar
Ha sido mejorado en cuanto a nuevas opciones para Toggle, click y hover, y una vista de transparencia que se ve espectacular con un fondo detrás. También puedes optar por la opción full-width.

Offcanvas
Cuenta con nuevas animaciones, como push, reveal y slide mas nuevas funciones.

Form, Form Advanced
Y otros componentes relacionados con formularios fueron unificados.

Overlay, position y Transition
Ahora han sido extraídos y se puede utilizar en otros contextos más fácilmente en combinación con otros componentes.

Margin
Se ha añadido la clase margin-extra-large para crear un espacio aún mucho más grande y auto margin para centrar horizontal o verticalmente un elemento en relación a su contenedor.

Padding
Funcionando al 100%

Background
Fue una de las que más me gusto porque nos ayuda a crear fondos 100% responsives y nos ahorra muchas líneas de css. Viene además con efectos para nuestras imágenes de fondo para poder jugar con su nitidez, luminosidad, etc

Divider y Heading
Ahora incluyen íconos decorativos en el separador (hr) o una línea más corta para títulos.

Spinner
Fue renovado y se cambió por un círculo animado.

Estos son los principales cambios te recomiendo que los revises todos en el siguiente sitio web https://getuikit.com/

 

¿Cómo podemos comenzar a aprender a trabajar con UIKIT?

Te recomiendo que revises el sitio web de Yootheme, existe una plantilla gratuita llamada Master 2 que viene con Warp 7 (framework base para Joomla con Uikit 2 en su core). Si además trabajas construyendo sitios web en HTML u otras plataformas puedes descargar directamente los ficheros desde su sitio web https://getuikit.com/

 

Mi opinión

Es una muy buena actualización

Pros:

• Más funciones
• Mejor despliegue móvil
• Más rápido
• Más liviano
• Script de migración

Contras:  

• Se extrañarán los íconos de Font Awesome que ya nos habíamos acostumbrado a usar.
• Menos css más javascript

 

No olviden dejar sus comentarios…