Un sprite css es una colección de imágenes, iconos en este caso, unidos en una única imagen para luego crear clases CSS que muestren únicamente el estilo que necesitamos. El objetivo de los sprites css consiste en reducir la cantidad de imágenes a cargar, porque al reducir peticiones al servidor se acelera la velocidad de carga.

Es mejor una imagen de 100kb que 10 imágenes de 10kb.

Crear la imagen

El primer paso es crear una imagen con los iconos a utilizar, en este caso la imagen es de 300x120px y cada icono ocupa 60x60px, es decir que tendremos 10 iconos en la imagen. Utilizaré los iconos de IconSweet2 y marcaré los espacios de cada icono en Photoshop usando la extensión GuideGuide (recomendada).

Definir el namespace y mixins para los iconos en less

Lo que sigue a continuación es definir los estilos base para los iconos, por ejemplo la imagen que usará, las medidas de los iconos con variables y para facilitar el uso de los iconos más adelante agregaré un mixin (elegir) que permitirá elegir que icono usar unicamente por la posición que ocupa.

Se agregan dos clases más para posicionar los iconos

y por último el mixin que se encargará de “elegir” el icono dentro de la imagen. A este mixin de le enviará como parametro qué icono se usará, por ejemplo elegir(2, 0) usará el icono 2 de la fila 0.

Utilizar el sprite

Con los estilos anteriores hemos definido un namespace para cargar los iconos de la imagen, ahora para usarlo simplemente agregaremos las clases en el HTML y luego en la hoja de estilos base (style.less).

HTML

El HTML básicamente es un conjunto de parrafos <p> con clase tiempo1, tiempo2, etc. con un elemento span dentro de clase icono, este elemento será el encargado de contener la imagen.

style.less

En los estilos definimos que cada icono dentro clase tiempo1, tiempo2, etc. cargué un icono diferente. Además le indicamos la alineación que debe tener usando las clases que ya definimos

Y listo, al tener estos estilos definidos podremos usar los iconos dentro de nuestra página web. Para el ejemplo monté los estilos sobre una plantilla de Foundation y se ve así:

Puedes descargar ver los archivos del ejemplo en Github: uptoeleven-lesscss.

Actualización: También puedes ver un ejemplo de sprites CSS en Less usando un mixin para los iconos: icons.less (Gist).

—
Aunque no parezca sencillo realmente lo es, y de hecho es un gran avance dentro del manejo de estilos.

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Las librerías de estilo no son exclusivas de Less, de hecho hasta un Reset CSS como el de Eric Meyer podría incluirse, sin embargo, con el poder que dan los mixins en Less la forma de trabajar es mucho mejor.

A continuación los dejo con una lista de librerias de estilo en less que podrían servirles

Less Elements

Es una librería de estilos que incluye mixins para agregar sombras, transiciones, gradientes, bordes redondeados, etc.

Esta fue una de las primeras librerías que conocí implementada en Less, me pareció inútil al inicio pero con el tiempo descubrí que ahorraba mucho tiempo y aumentaba la compatibilidad de mis estilos.Tanto así que decidí aportar con el proyecto en Github que a la fecha parece abandonado, aunque personalmente hice un clon (fork) de la librería y la he ido ajustando según mis necesidades, por ejemplo le agregué namespaces para poder recordar mejor los estilos.

Enlace: Less Elements |  http://lesselements.com/
Enlace: Mi versión de Less Elements | https://github.com/ivanmendoza/elements

Bootstrap

Bootstrap en realidad no es una librería de estilos, es un framework de diseño web completo, pero parte de la flexibilidad en la web es que puedes descargarlo y utilizar parte de sus estilos como libreria de estilos. Por ejemplo los botones.

Enlace: Bootstrap | http://twitter.github.com/bootstrap

Foundation

Con Foundation, de Zurb, sucede lo mismo que con Bootstrap, es un framework completo pero de igual forma podemos utilizar sus hojas de estilo como librerias de estilo.

A diferencia de Bootstrap Foundation no fue desarrollo para Less sino hasta hace unos días que incluyeron una rama de desarrollo en dónde utilizan less, por lo que debes buscar esa rama de desarrollo en su repositorio.

Enlace: Foundation con Less | https://github.com/zurb/foundation/tree/less

—
Puedes dejar un comentarios si conoces otra libreria de estilos que quieras recomendar.

Un comentario

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Los namespaces son una forma de agrupar estilos, especificamente clases y mixins. Más que una caracteristica de Less CSS son una forma de enfocar y ordenar tus estilos, ya que básicamente son mixins que agrupan diferentes estilos y se utilizan igual.

Si trabajas en un sitio web pequeño, con apenas algunas decenas de líneas de estilos, seguramente no necesites usar namespaces, sin embargo, cuando trabajas en un proyecto gigante con más de tres hojas de estilo, con miles de lineas y cientos de clases entonces podrás tomar una gran ventaja de ellos.

La forma en que un namespace funciona es la siguiente:

#boton{
  .aceptar{  /* ... */  }
  .cancelar{ /* ... */ }
  .error{    /* ... */ }
}

#alerta{
  .aceptar{  /* ... */  }
  .cancelar{ /* ... */ }
  .error{    /* ... */ }
}

En el ejemplo anterior podemos ver dos namespaces, #boton y #alerta, cada uno define estilos diferentes para elementos diferentes, pero al utilizar namespace no hay conflicto con los nombres y el uso de namespaces le añade cierta semántica al código CSS.

Utilizando el ejemplo anterior, la forma de llamar a cada uno de los estilos dentro de los namespaces sería la siguiente:

.alerta_error{
   #alerta .error;
   .boton{
     #boton .error;
   }
}

En este último ejemplo asumimos que dentro del sitio web hay un elemento de clase alerta_error(un DIV si quieres) con un botón adentro de clase boton. Se necesita que el elmento tenga el estilo de alerta y el botón también así que cada uno de ellos llama a la clase .error pero de su respectivo namespace sin que esto genere ningún problema entre ellos.

El uso de namespaces en Less CSS no es necesario, sin embargo si es una practica recomendada y que por experiencia personal te puedo mencionar que es muy útil para reutilizar estilos en diferentes proyectos.

Más información

Un excelente ejemplo del uso namespace nos los da Twitter con su framework Bootstrap que define varios namespaces para diferentes estilos de elemento, por ejemplo #gradients. Bootstrap mixins | http://twitter.github.com/bootstrap/less.html#mixins

Enlace: Documentación oficial sobre Namespaces | http://lesscss.org/#-namespaces

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

LESS CSS como muchos lenguajes de programación requiere de un interprete o aplicación que lo compile para que pueda ser utilizado, por si solo no funciona.

Simpleless

Es una aplicación multiplataforma (Windows, Mac y Linux) que permite monitorear una hoja de estilos less y cada vez que realizamos un cambio en la hoja de estilos, o en alguna de las hojas externas que utilice, compilará una nueva versión CSS de la misma. Es un proceso bastante sencillo y muy rápido.

Además Simpleless incluye compresión de estilos para ahorrar espacio y respeta la sintaxis para conservar comentarios importantes (los que tienen un signo de admiración después de /*! ejemplo */).

Por defecto compilará los estilos CSS en la misma carpeta que los estilos less, pero en el caso de que la carpeta de estilos less tenga una “hermana” llamada “css” los estilos serán almacenados allí. Es bastante básico pero algunos podrían pasarlo por alto y tampoco está documentado.

Actualmente es el cliente que estoy utilizando y lo recomiendo bastante.

Enlace: Simpless | http://wearekiss.com/simpless

Crunch!

Crunch! no solo compila estilos LESS sino además permite editarlos y por ser una aplicación desarrollada con Adobe Air es multiplataforma.

Enlace: Crunch | http://crunchapp.net/

Less.app / Winless

Aún no he probado Less.app pero entiendo que funciona de forma muy similar a Simpleless con algunas opciones más. Winless por otra parte es el equivalente de Less.app para Windows.

Enlace: Less.app | http://incident57.com/less/

Enlace: Winless | http://winless.org/

LessPHP

LessPHP no es una aplicación gráfica, es un script (clase mejor dicho) programada con PHP que permite compilar estilos LESS y escribirlos en un directorio especifico, de esta forma se pueden realizar aplicaciones web que compilen estilos LESS, generarlos en tiempo real o almacenandolos en cache.

Compilar estilos LESS CSS con PHP no es mejor que las aplicaciones anteriores, simplemente es diferente, permite automatizar varias tareas a la manera que elijamos y al estar unido a un lenguaje programación como PHP da paso a ponerse creativo y encontrar otras formas de explotar LESS.

Enlace: LessPHP | http://leafo.net/lessphp/

Compilar desde línea de comandos

Además de las opciones anteriores LESS se puede compilar desde línea de comandos, usando Winless o una de las aplicaciones listadas en el wiki: Command Line use of LESS.

Más aplicaciones

Pueden ver una lista de aplicaciones actualizada en el wiki de LessCss e incluso colaborar agregando algun otra que conozcan: GUI compilers that use LESS.js.

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Este artículo es continuación de la serie uptoeleven: less css, de febrero. Puedes ver el primer artículo de la serie en: Qué es Less CSS y cómo funciona.

LESS CSS no es un lenguaje complicado, sin embargo, tiene una curva de aprendizaje mediana, conseguir que los estilos funcionen es bastante rápido pero llegar a aprovecharlo al 100% toma un poco más de tiempo.

Entonces la pregunta es ¿Por qué usar Less CSS si ya existe CSS?

Mejoras rápidas con poco trabajo

Less CSS está desarrollado a partir de CSS por lo que la sintaxis es bastante similar, tanto que puedes mezclar archivos CSS con archivos de LESS sin problema. Puedes combinar la mitad de un estilo con la mitad de otro.

Esto permite migrar estilos CSS rápidamente y luego irlos mejorando eventualmente con las ventajas de Less. Además el enfoque del lenguaje es ahorrar trabajo por lo que existen muchos atajos y en resumen el tiempo de desarrollo se reduce, y los resultados se amplifican.

Mejor organización en desarrollo

Dentro de las caracteristicas de Less encontramos uso de variables, namespaces, mixins e importación de hojas de estilo externas (igual que CSS). Esto reunido en un solo lenguaje permiten que desde el punto de vista de desarrollo podamos reutilizar estilos, definir reglas, paletas de colores e incluso mantener nuestra propia politica para crear estilos. Literalmente podemos trabajar con “librerías de estilos” por separado y al final ofrecerle al visitante un único archivo CSS compilado, comprimido y funcional.

Bootstrap de Twitter trabaja con decenas de archivos less que se reducen a tres para el visitante

Optimización de estilos CSS

Al compilar LESS CSS con una aplicación como Simpless o Less.app podemos definir la opción de que comprima el archivo, de forma que la hoja de estilos final ocupe el menor espacio posible.

Reutilización de estilos

Los mixins de Less permiten reutilizar estilos, de forma que podemos definir un clase con estilos redondeados y luego invocarlas en diferentes clases para duplicar el estilo.

.control{
  border-radius: 4px;
  border:solid 1px #aaa;
  background:#eee;
}

.boton{
  .control;
  font-size:1em;
}
.panel{
  .control;
  padding:.5em;
}

El estilo anterior da como resultado que la clase botón y panel obtengan bordes redondeados, bordes y fondo gris de la clase control sin necesidad de escribirlo dos veces.

Funciones aritmeticas

Esta caracteristica es simplemente genial, podemos definir propiedades utilizando operaciones aritmeticas para ahorrarnos tiempo con la calculadora (o los dedos :p )

p{
 font-size: 18/16em; // da como resultado font-size:1.125em
}

 Variables

El uso de variables nos ahorra estar memorizando o copiando valores, como por ejemplo colores, nombres de fuentes, etc. En CSS cada vez que necesitamos un color debemos recordar el código exacto mientras que con LESS solo debemos recordar el nombre de la variable. En el siguiente ejemplo defino el color de un botón usando variables, y usando una función de color le indico que al posicionar el puntero encima cambie el color rojo por uno más claro (función lighten al 20%).

@rojo: #f00;
@verde: #0f0;
@blanco: #fff;

.boton{
  background:@rojo;
  color:@blanco;
  &:hover{
    background: lighten(@rojo, 20%);
  }
}

Más información

Enlace: Documentación de LESS (inglés) | http://lesscss.org/#-variables

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Bienvenido a la primera edición de uptoeleven — un reto personal de publicar once entradas sobre un mismo tema cada cada hora el onceavo día del mes.

LESS CSS es una ampliación a las famosas hojas de estilo CSS, pero a diferencia de estás funciona como un lenguaje de programación, permitiendo el uso de variables, funciones, operaciones aritmeticas, entre otras, para acelerar y enriquecer los estilos en un sitio web.

LESS CSS no reemplaza a CSS, de hecho el resultado final es una hoja de estilos css completamente funcional y compatible, simplemente ofrece mejoras en el área de desarrollo, por lo que usarlo se vuelve recomendable si quieres ahorrar tiempo de desarrollo, utilizar caracteristicas avanzadas de estilos y para ahorrarte trabajo —de allí su nombre: less css (menos css).

Caracteristicas de LESS CSS

Las caracteristicas de LESS CSS son demasiadas, e incluso combinandolas pueden conseguir más, sin embargo, intentaré mencionar las más notables:

Variables

Las variables en less funcionan de forma similar a las constantes en los lenguajes de programación, permitiendo definir valores que podrán ser reutilizados en cualquier parte de la hoja de estilo, e incluso entre otras hojas de estilo. Su sintaxis es la siguiente:

@variable: valor;

Mixins

Los mixins son, como a mi me gusta llamarlos, clases dinámicas, porque funcionan de forma similar a las clases CSS pero con caracteristicas de funciones de programación. Es decir que pueden ser llamadas desde otras clases para obtener su valor y además permiten parametros, aunque no es necesario utilizarlos. Está caracteristica  hace posible definir una clase dando flexibilidad para variar algunos estilos como el color o tamaño del elemento. Su sintaxis, en el caso de que usemos parametros,  es la siguiente:

.mi_mixin(color: valordefecto){
  font-size:2em;
  color:@color;
  margin:0.2em;
}

Funciones de color

Las funciones de color son funciones pre-definidas de Less CSS que permiten alterar un color, para hacerlo más claro, oscuro, saturado, desaturado, cambiarle la tonalidad, etc. Son una gran herramienta para definir una paleta de colores sin estar buscando códigos de color. Las funciones de color son:

• lighten para aclarar un color.
• darken para oscurecerlo.
• saturate para saturarlo, o “aumentar el color”.
• desaturate para desaturarlo, o “reducir el color”.
• fadein para resaltarlo quitandole transparencia.
• fadeout para disimularlo usando transparencia.
• fade para cambiar la transparencia a 50%.
• spin para cambiar el tono de color.
• mix para mezclar dos colores.

su sintaxis es similar a está:

lighten(@color, 30%);
darken(@color, 30%);

Mantene sintonía con el blog para más información acerca de cada una de estas caracteristicas y cómo aprovecharlas mejor.

Cómo se usa

Hay varias formas de utilizar LESS CSS, una de ellas es a través de javascript del lado de servidor usando node.js, otra es utilizando javascript del lado del cliente con less.js y por último usando una aplicación que compile los estilos .less a .css.

Al iniciar a trabajar con LESS CSS es un error querer utilizar la versión de javascript del lado del cliente. Es un error porque esta versión se considero para uso en ambientes de desarrollo —al ser más rápido de corregir en caso de error—, además es lenta y aumenta el riesgo de fallar al depender completamente de javascript. Para hacer hacer experimentos locales o iniciar está muy bien pero para producción no se recomienda.

Más adelante escribiré sobre aplicaciones recomendadas para compilar .less a .css y las ventajas de cada una, pero por ahora, para comenzar, les digo que le den un vistazo a simpleless (multiplataforma), less.app (mac), o si buscan una solución a la medida pueden recurrir a LessPHP, una librería que permite compilar less css utilizando PHP permitiendo generar estilos dinámicamente, en tiempo real o creando cache.

¡Ya, comenza a usar LESS CSS! http://lesscss.org/

Indíce

1. Qué es LESS CSS y cómo funciona
2. LESS CSS vs CSS
3. Cómo compilar estilos LESS CSS
4. Mixins ¿Y eso con qué se come?
5. Cómo usar #namespaces en Less CSS
6. Cómo organizar estilos usando Less CSS
7. Librerias de estilos Less CSS
8. Acelerar la creación de sprites con Less CSS
9. Cómo compilar LESS CSS usando PHP
10. Snippets para trabajar con Less CSS
11. Manipular colores usando LESS

2 comentarios

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

En la imagen se ve un área de contacto en donde  se busca salir del esquema usual de formularios, rompiendo el orden y la importancia del mismo, ya que es gigante (ocupa toda el área del navegador).

Un detalle interesante es que existen dos páginas web, este diseño inusual (funciona como una presentación) y otra con un diseño tradicional, la idea es alternar entre una y otra para aprovechar la que genera mejor rendimiento.

Comenta

ivanmendoza 2011 - Bajo licencia Creative Commons By-NC-SA.

“IE can’t fade transparent .png’s properly, so that could be causing your problem”
— jQuery IE Fadein and Fadeout Opacity

Visto un Domingo a las 7:32 am.

FML.

Comenta

ivanmendoza 2011 - Bajo licencia Creative Commons By-NC-SA.

Cross browsing, en resumen, consiste en realizar un sitio o aplicación web compatible entre más de un navegador, usualmente se utiliza cuando tu sitio web es compatible con navegadores que utilizan estándares y además Internet Explorer (que suele interpretar código a su modo), aunque el termino es valido para cualquier navegador.

Aplica propiedades CSS3 por separado

El problema aparece cuando Internet Explorer (IE) comienza renderizar mal las propiedades de CSS3, un error poco común pero que si esta presente arruina los estilos del sitio web.

La solución fue eliminar las propiedades CSS3 para IE, algo que me quito tiempo porque las propiedades estaban repartidas entre muchas clases en diferentes lugares y la mayoría eran básicamente iguales. Por ejemplo, si quisiéramos un botón con gradiente azul, sombra y esquinas redondeadas usualmente lo haríamos de esta forma

(por demo sólo estoy aplicando estilos CSS en Firefox, por eso coloco “–moz” frente a la propiedad).

La solución y buen practica es usar un selector por cada propiedad CSS3 que desees usar, de esta forma:

¿Por qué?
Porque de esta forma la clase principal permanece valida para todos los navegadores y sí las propiedades CSS3 nos dieran problema las podríamos eliminar (reiniciar) simplemente haciendo esto (en una hoja de estilo adicional específicamente para IE, o el navegador que este dando el problema):

o sí utilizan Turbine (ver más abajo en recursos) podrían excluir esas propiedades de Internet Explorer, de la siguiente forma

Resalte en magenta la propiedad browser. Está funciona gracias a Turbine y la extensión Sniffer. Básicamente dice: “aplica esta clase en todos los navegadores excepto Internet Explorer”. Se puede elegir versión u otros navegadores, pero para ejemplo así esta bien.

En el caso de Internet Explorer y las esquinas redondeadas puedes usar el script DD_roundies sobre la clase conBordesRedondos4px para obtener los mismos resultados.

Recursos para usar CSS3

CSS3 aún no es terreno solido por lo que hay que tener cuidado al usarlo para mantener la compatibilidad, y para eso existen algunos recursos que te facilitan la tarea

• Turbine. Un framework en PHP para desarrollar CSS, acelera el desarrollo y optimiza el resultado final.
• Plugin CSS3: habilita las opciones CSS3 para utilizarlas según el estándar actual mientras que Turbine CSS se encarga de ajustar la sintaxis a cada navegador.  De esta forma sólo escribes una vez la propiedad.

  

• Plugin Sniffer: permite mostrar u ocultar estilos CSS según el navegador que visita la página, mejora su visualización y facilitando el cross-browsing. Recomiendo leer la documentación al respeto.
• Internet Explorer 9 (aún en beta) ya soporta parte del estándar CSS3.
• Pueden encontrar más información en el sitio web de desarrolladores de IE9.
• CSS3.info “todo lo que necesitas saber sobre CSS3”.
• Técnicas para conseguir propiedades CSS3 con jQuery por aNieto2K.
• Consejos para mejorar nuestro cross browsing por aNieto2k.
• Además de un lista sin fin de generadores de estilos CSS3
• CSS3 Generator. Genera código de varias propiedades CSS3 para Firefox, Webkit (Chrome, Safari, etc.) y estándar.
• CSS3 Please. En resumen es una especie de plantilla con estilos CSS3 predefinidos pero que podemos modificar escribiendo nuestros propios valores, por desgracia la apariencia no es muy agradable aunque eso no le quita lo útil.
• CSS3 Gradient Generator. Generador de gradientes utilizando CSS3, la interfaz es gráfica y muy fácil de usar.

Hasta la próxima.

Comenta

ivanmendoza 2010 - Bajo licencia Creative Commons By-NC-SA.

Espero las aprovechen tanto como puedan que lo valen.

“Designing with psychology in mind”

por Joshua Porter. 5 principios de la psicología que pueden ser usados al crear diseño web.

”Metrics-Driven Design”

por Joshua Porter. Una vista profunda al diseño orientado por métricas. ¿sirve? ¿no sirve? Vean la presentación.

A propósito de la presentación, pueden encontrar más información en Metrics-Driven Marketing Strategy, también presentación.

“Bootstrapping – use visualizations to create visualizations”

por Moritz Stefaner. Información en cantidades masivas ¿cómo organizarla? En la siguiente presentación obtendrán un vistazo a las decenas de formas de mostrar información incluyendo algunos tips para hacerlo.

Como debieron notar, dos de las presentaciones son de Joshua Porter, experto en experiencia de usuario (UX), mejor conocido por su blog (y actual nickname) Bokardo que es uno de los blogs recomendados, aunque últimamente actualice poco.

Hasta la próxima.

Comenta

ivanmendoza 2010 - Bajo licencia Creative Commons By-NC-SA.