Desenredando Warp 7 y UIKIT (Primera Parte: Warp 7)

Escrito por | 01 Octubre 2014 | Publicado en Octubre 2014
Hace un tiempo la empresa alemana Yootheme nos presentó con muchos bombos y platillos la nueva versión de su galardonado Warp, la versión número 7 que para sorpresa de todos incorpora su propio Framework de desarrollo al que llamaron UIKIT, el cual salió directamente a competir con Bootstrap y Foundation que eran hasta hace tiempo los frameworks más utilizados.

¿Que es un Framework?

Si buscamos en algún diccionario por muy técnico que este sea, solo encontraremos “Marco o entorno de Trabajo” respuesta que probablemente no nos dejará muy conformes. Dentro del diseño y desarrollo web un Framework es una base compuesta por muchas lineas de código con distintas funciones pre desarrolladas que podemos ejecutar con solo un comando, ejemplo:

Si queremos crear un botón no hace falta escribir en el css

.boton { margin: 0; font: arial; color: #666; text-transform: none; display: inline-block; padding: 0 12px; background: #f7f7f7; vertical-align: middle; line-height: 28px; min-height: 30px; font-size: 1rem; text-align: center; border-radius: 4px; }

Sino que solo bastará con escribir en la clase "uk-button", en donde "uk" es el identificador del framework, en este caso  UIKIT, y en donde "button" trae todas las lineas CSS que dan forma y estilo a nuestro botón.

Así como en este caso el framework nos facilitó la tarea de diseñar un botón, también nos facilita la tarea al momento de hacer tablas, incorporar Javascript, incorporar fuentes e iconos, diseñar formularios y muchas otras cosas más.

¿Un framework dentro de otro?

Si es posible y cada vez más frecuente que encontremos frameworks juntos complementándose por ejemplo, es probable que para el desarrollo de una aplicación se podría utilizar:

  1. Node JS= Javascript
  2. Symphony , CakePHP, ZEND: PHP
  3. Uikit, Bootstrap, Foundation: Diseño
  4. RAZR: Grillas y maquetacion
  5. Warp, Gantry, T3: plantillas para Joomla

Ahora si luego de esta “breve” introducción, veamos Warp 7.

Warp 7

Framework desarrollado por Yootheme. Cuenta con los clásicos elementos de su predecesor y galardonado Warp 6 pero a esto debemos sumar la potencia de su nuevo y recién incorporado Framework UIKIT.

Para revisar Warp7 podemos descargar la version gratuita con informacion demo (Quickstart) para facilitar la tarea desde el siguiente enlace  Una vez instalado, accedemos al editor de plantillas y elegimos YOO_Master2, y nos encontraremos con un nuevo diseño muy distinto al anterior destacando en primer lugar el botón “Customizer”, una de las principales características del Framework UIKIT y una poderosa herramienta para la personalización de nuestra plantilla.

Customizer

Customizer es una interfaz de usuario que permite cambiar prácticamente todos los estilos gráficos de nuestra plantilla escribiendo directamente sobre LESS, para ser más preciso sobre un archivo llamado custom.less aprovechando todas las ventajas que este lenguaje nos ofrece. Al acceder al Customizer nos encontraremos con la siguiente vista:

 ss warp7

La pantalla quedará dividida en 2 partes, una el panel de customizer y en la otra una vista en tiempo real para que vamos revisando los cambios que se van haciendo mediante el panel.

Mediante el panel podemos combinar distintas paletas de colores creando distintos estilos, para crear uno nuevo basta con apretar el botón “Copy” y asignarle un nuevo nombre a nuestros estilo.

Para empezar a explorar nuestro panel y hacer modificaciones sobre el no es necesario ser un gran erudito en HTML y CSS, se necesita más que nada las ganas ya que el panel es sumamente intuitivo y nos encontraremos con selectores para los colores, cajas para ingresar los valores numéricos, listas desplegables para las opciones de selección, etc.

Otra gran ventaja que nos ofrece Customizer es la importación directa de tipografías desde Google Fonts, tan solo basta con seleccionarla desde una lista desplegable y obtendremos la tipografía que queremos y compatible con todos los navegadores.

Siguiendo con las características generales de Warp 7. veremos las distintas opciones que nos presenta la pestaña “Settings”.

  1. Development (Desarrollo): opciones avanzadas relacionadas con Less
  2. Compression:(Compresión): opciones para hacer mas rápida la carga de nuestro sitio web, es recomendable utilizarlas una vez terminado para que no entorpezcan nuestro trabajo.
  3. Responsive: deshabilita la mayoría de las opciones de diseño responsive, honestamente nunca he encontrado la real utilidad de esta función que en teoría debería ser volver un sitio responsive a no responsive pero realmente el resultado no es el que esperamos.
  4. Bootstrap: nos permite deshabilitar las librerías de Bootstrap cuando no sea requerido para hacer más liviana la carga del sitio web.
  5. Content (contenido): en esta opción podemos quitar la marca Warp desde el footer del sitio web y esconder o hacer visible el botón de “ir arriba”
  6. Social Buttons: hacer visible u ocultar los botones de las redes sociales
  7. Modules: para predeterminar el estilo de los módulos de acuerdo a su posición en la plantilla.
  8. Additional Scripts: para agregar código Javascript adicional como Google Analytics, Jquery, Smooth Scroll, o cualquier otro que sea requerido para ser insertado antes del cierre de la etiqueta “Body”

Sección Layouts

Permite crear perfiles diferenciados para distintas páginas, por ejemplo, si necesitamos que la página de inicio no tenga com_content y/o esté compuesta sólo por módulos, creamos o seleccionamos la opción Frontpage y activamos la opción “Hide System Output”.

Entre otras funciones dentro de esta seccion se encuentran modificar el ancho de las columnas que se encuentran a los costados del com_content y la organización de los módulos que se encuentran dentro de una misma posición (Grid).

Sección Modules

Una gran singularidad de este framework es su administrador centralizado de módulos. Dentro de él puedes dar clases directamente a los módulos, estilos CSS, agregar un icono al título, agregar una insignia de distintos colores y determinar si el módulo será o no visible de acuerdo al dispositivo desde donde se esté viendo el sitio (celular, tablet o desktop).

Sección Menús

Así como existe una sección para administrar los módulos, también existe una sección para manejar los items de menu. Aquí se puede dar distintos atributos como número de columnas en que se despliega el submenú, el ancho de la caja, icono (o imagen) y subtítulo.

Estas 2 últimas secciones tienen la gran ventaja que se puede aprovechar las ventajas del framework, ya que se puede dar clases predeterminadas, por ejemplo uk-text-center para centrar los textos del módulo o agregar iconos desde font-awesome ya que vienen integrados dentro de UIKIT.

Información Adicional

Warp 7 es un Framework, sumamente sencillo de utilizar, solo hay que aventurarse a explorar y descubrir cada una de sus funciones, la práctica hace al maestro. Si quieres sacar el máximo rendimiento a Warp 7 te recomiendo que revises la documentación de UIKIT, que te permitirá además de usar las funciones de Warp 7, podrías generar layouts personalizados dentro de los artículos, crear botones, llamar iconos desde Font-Awesome, un sinfin de opciones que deberias explorar (Continúa en la próxima edición....)

Etiquetado como Desarrollador, Spanish
Leo Soto

Leo Soto

Desde Valparaíso apoyo a la comunidad Joomla desde sus inicios, ya sea con mi participacion en foros, traducción de componentes y artículos para la Joomla Community Magazine.

Me especializo en desarrollo de aplicaciones web, catálogos, sitios web corporativos y diseño adaptativo. Mi fuerte es ZOO CCK y Warp Framework.