En el capítulo anterior hablamos del nuevo y remodelado framework para plantillas llamado Warp 7 (Yootheme), ahora conoceremos el verdadero motor y el 90% de lo que le da la ventaja competitiva a Warp 7 que es su poderoso framework UIKIT y su interfaz gráfica Customizer.
Instalación
Para empezar a practicar podemos realizar una instalación local del paquete de demostración del Master Theme (gratuito) que podemos descargar desde aqui. https://yootheme.com/themes/downloads
Less
Customizer tiene la gran ventaja que todos los cambios realizados son mediante el uso del Pre-Procesador Less, y se escriben directamente sobre un archivo de salida llamado custom.less y sin la necesidad de saber código. De todas formas es necesario tener conocimientos de HTML y básicos de CSS para poder identificar donde se deben aplicar los cambios que queremos hacer, por ejemplo, el line-height y el font-size de un heading (h1, h2, h3, etc).
Cada vez que ustedes guarden un cambio en Customizer, podrán notar que se realiza un proceso automático llamado compilación de LESS, este consiste básicamente en traducir lo que hemos escrito en LESS a CSS para que este puede ser interpretado por los navegadores.
Customizer a primera vista
Como se puede apreciar en la fotografía la pantalla del customizer se divide en 2 una parte de parámetros y la otra para la vista en vivo. A medida que vamos editando nuestros parámetros podemos ver en la sección derecha como van quedando, si es el ancho que queremos, la tipografía correcta, el color, etc.
Estilos
Para partir podremos crear nuestro propio estilo, también nos servirá si cometemos algún error poder volver atrás en el diseño. Para copiar un estilo simplemente se debe presionar el botón Copy y asignarle un nombre a nuestro nuevo estilo. Se puede crear los estilos que queramos pero no es recomendable tener muchos porque luego de guardar los cambios se realiza automáticamente la compilación de LESS y al tener muchos estilos esta compilación se vuelve lenta e incluso podría generar un error si el max_execution_time de nuestro servidor es bajo.
Parámetros
A medida que pasas el mouse por sobre una etiqueta de opción, te darás cuenta que se ve un mensaje que comienza con una arroba (@) esto es porque como comentamos anteriormente Customizer escribe en LESS y este mensaje es su variable equivalente.
Modo Básico y Modo Avanzado
Si queremos editar los parámetros básicos como el color de fondo, la tipografía utilizada, etc, podemos hacerlo simplemente con seleccionar las distintas opciones presentadas por defecto, si tienes un nivel de conocimiento mayor o necesitas una modificación específica que no aparece listada en la barra de opciones puedes habilitar configuración avanzada y se desplegaran más opciones.
Lista de Parámetros
- General: color de fondo bordes y ancho del área de trabajo
- Typography: Aquí puedes seleccionar las fuentes o tipografías a utilizar en tu sitio web. Tienes la facilidad de seleccionar cualquier fuente directamente desde Google Fonts.
- Buttons, Navs & Badges: en esta opción se define la paleta de colores del sitio. Puedes definir los colores y mandarlos a llamar luego mediante clases css, ejemplo, uk-button-primary uk-button-warning, etc.
- Spacings: aquí podemos definir el espacio de la clase uk-margin
- Controls: Aqui podemos definir la altura mínima de ciertos elementos
- Breakpoints: aquí se define cuales son los anchos en los cuales el sitio se adaptará en modo responsive.
- Alert: existen 3 tipos de alertas, la caja de mensajes, la de advertencias y la de error
- Article: override a los articulos de Joomla
- Badge: Es una pequeña insignia que llevan los módulos en la parte superior derecha.
- Base: se refiere a los elementos básicos de HTML. Las etiquetas h1,h2,h3, hr, y cualquier otra etiqueta común para todo sitio web
- Breadcrumb: se refiere a la ruta de navegación (migas de pan, traducido literalmente)
- Button: Se refiere a los parámetros básicos de un botón standard
- Close: Puedes ajustar los parámetros para la cruz que indica que puedes cerrar algo ejemplo, una advertencia, un modal (ventana emergente), etc
- Comment: Aqui se modifican las características de la clase tipo comentarios
- Description: Las listas de descripción son para representar listado de palabras con su definición al lado, que mejor ejemplo que esta lista de definiciones que se esta usando para explicar cada una de las clases de UIKIT
- Dropdown: estilos para los combos de selección
- Form: Formularios ycampos que lo componen
- Grid : griilla, estructura en las que se divide un área de contenido, en uikit se divide en 12 columnas, las cuales se pueden subdividir
- Icon: modificadores para la clase uk-icon. Puedes modificar su tamaño base, parámetross para cuando esten dentro de un botón, etc.
- List: se refiere a las listas que por lo general llevan las etiquetas UL, OL y LI
- Modal : se refiere a las ventanas emergentes
- Nav: aplica para los menús secundarios
- Navbar: se refiere a las características del menú principal
- Offcanvas: pequeña área de contenido que se despliega a la izquierda cuando se pasa a modo móvil. Esta área casi siempre lleva el menú principal adaptado a móvil, y alguno que otro módulo como el de búsqueda o redes sociales
- Overlay: efecto “on hover” que se gatilla al pasar por sobre una imagen, esta puede llevar algun icono, texto e incluso código html
- Pagination: Son los números que dividen en distintas vistas los artículos en una vista de categoría cuando estos llegan a su máximo
- Panel: es una caja que por lo general tiene bordes y fondo con estilo
- Progress: son animaciones que sirven para graficar cuando un proceso esta siendo ejecutado
- Search: Estilos para el modulo de busqueda
- Subnav: son los sub elementos de un menú
- Tab: permite modificar los estilos de las pestañas
- Table: estilos de tablas y campos que la componen
- Text: Aquí podemos ajustar los parámetros para cuando se usa la clase uk-text
- Thumbnail : miniaturas de imágenes que pueden predeterminarse en su tamaño, forma, color, etc. con el objetivo de tener una uniformidad gráfica.
- Tooltip: instrucciones que se muestran cuando pasamos el mouse por algunas palabras, sean links o no.
- Utility : parámetros que no lograron caber en ninguna de las clasificaciones anteriores :)