Agradable set de botones CSS3 sobre las principales redes sociales.

¿Lo mejor? Para mostrar los logos de cada sitio no se utiliza ninguna imagen: todas se encuentran contenidas en una fuente tipográfica, permitiendo también que los botones sean 100% escalables, sin perder calidad.

Y por si fuera poco, también estan disponibles como extensión para Compass.

Stitch es una extensión para Compass que otorga la posibilidad de utilizar un gran número de patrones y utilidades CSS para diferentes situaciones.

Algunos ejemplos:

@import 'stitch/patterns'

// Habilitar la aceleración por hardware para las animaciones
@include enable-hardware-acceleration

// Utilización del guión ortográfico: https://developer.mozilla.org/en/CSS/hyphens
@include hyphen(none);

// Crear columnas: https://developer.mozilla.org/en/CSS/columns
@include text-columns(2,20px);

Vieron que Twitter Bootstrap esta basado en Less. Bueno, si quieren utilizarlo con Sass/Compass, existe un plugin que permite hacerlo de forma sencilla, de forma tal que, una vez instalada la gema podemos utilizar el framework completo:

@import "compass_twitter_bootstrap";

o sólo algunas características:

@import "compass_twitter_bootstrap/variables";
@import "compass_twitter_bootstrap/mixins";
@import "compass_twitter_bootstrap/buttons";

Les comparto un Workshop sobre Sass y Compass que estuve dando en Enero pasado.

En más de 50 diapositivas explico cómo y porqué utilizar estas herramientas, instalación, requerimientos, conceptos básicos hasta temas más avanzados.

Como dice el título, Bourbon es una colección de mixins para utilizar en conjunto con Sass y agilizar la creación estilos.

Vendría a ser un proyecto alternativo a Compass, ya que, al igual que este último, también ofrece variadas funciones útiles relacionadas a estilos CSS3 (bordes redondeados, animaciones, transformaciones, sombras, gradientes…), grillas, colores o proporciones (como el calculo del Golden Ratio para un determinado valor).

Si utilizan regularmente Sass, les recomiendo mucho mirar el código fuente de Bourbon y su readme, en donde hay muchos mixins interesantes para aplicar rápidamente en nuestro proyecto sin necesidad de descargar toda la colección. Por ejemplo:

@include position(relative, 0px 0 0 100px);

Para poder obtener los estilos:

position: relative;
top: 0px;
left: 100px;

Y como siempre digo, si aún no utilizan Sass, pueden empezar por aquí.

Con Sass y Compass no solo podemos pasar las imágenes a su versión Data URI ó crear sprites sin abrir Photoshop, ahora también es posible crear imágenes “al vuelo” directamente desde los .scss través de Compass Magick.

¿Y qué posible uso le podemos dar? Por ejemplo, crear imágenes de degradados como fallback para navegadores que no soportan gradientes CSS3, de igual forma para bordes redondeados, interesante no? Demo.