Micaela 16 de noviembre de 2009 a las 09.02
   Imprimir artículo
elWebmaster.com

Rosemary: Un filtro que modifica y expande tu CSS


rosemaryTodo el mundo tiene una queja sobre el CSS y sobre la compatibilidad de los navegadores. Esto es algo que Rosemary busca solucionar.

Rosemary es un sistema de modificación basado en un filtro open-source modular para archivos CSS, o comúnmente reconocido como OSMCFBMS4CSS, una sigla nada sintética.

Tus archivos CSS se ejecutan a través de una serie de filtros que modifican uno tras otro. Estos filtros se pueden ser activados o desactivados, reorganizados, o todos ellos deshabilitados completamente para darle salida en bruto. Proporciona un contenedor CSS escalable que puedes seguir utilizando sin importar qué versión de CSS sea soportada (o no soportada).

Cualquier persona con algunos conocimientos de PHP tiene la capacidad de crear un filtro para su uso con Rosemary. La combinación de filtros en diferentes arreglos brindará resultados diversos. Tanto desarrolladores como diseñadores se beneficiarán de la facilidad de personalización que Rosemary proporciona. Los filtros pueden permitir configuraciones muy técnicas para los desarrolladores o ser tan simples como 1-2-3.

Un filtro es un paquete independiente de código que modifica el CSS o te da nuevas habilidades al escribir CSS. Un ejemplo de esto es el filtro del navegador. El filtro del navegador te da nuevas capacidades en CSS por escrito para definir ciertos bloques o propiedades como específicas del navegador. El filtro eliminará todos los bloques o las propiedades etiquetadas como”IE” si el usuario está ejecutando Firefox. Hay también otros filtros, como el filtro del compresor, que no te dan ninguna nueva capacidad, sino que simplemente realizan una acción. En este caso, el filtro del compresor elimina todos los espacios en blanco y saltos de línea en tiempo real, así puedes editar el código limpio y enviar un archivo comprimido pequeño para el usuario.

Algunas de las razones de la genialidad de Rosemary:

  • Versiones: Los filtros son aislados en diferentes carpetas y actúan de forma independiente. Si un nuevo navegador sale a la luz o el CSS cambia, puedes descargar una versión nueva de un filtro, lo mismo sucede si se arregla algún bug o algún requisito de una propiedad.
  • Open Source: Están diseñados para ser un proyecto de comunidad. Cualquiera que tenga algo de experiencia en codificación puede crear filtros que satisfagan sus necesidades.
  • Simple y ligero: El sitema no podría ser más simple. Un archivo.htaccess para empujar tu CSS a través del filtro, un archivo para definir qué filtros deseas usar y el paquete Rosemary dónde decides qué filtros deseas.
  • Nunca está desactualizado: Esto tiene relación con la posibilidad de darle versiones a tus filtros. Cuando algo en la web cambia de repente, esto se puede adaptar como cualquier otro plugin.

Han creado un pequeño paquete de filtros sólo para comenzar. Hay algunas tareas pendientes y correcciones de errores posibles en espera en algunos de estos filtros así que siéntanse libres para enviar sus comentarios y editar algunos archivos. Los filtros existentes son: Browser, Compressor, Inheritance, Reset, StripComments, Variables. Hay más documentación, ejemplos, y un área de prueba en el archivo zip adjunto para que jueguen con ellos.

Si están buscando algunas ideas, aquí hay algunas:

  • Agrupamiento: Permitir la anidación orientada a objetos de selectores a través de múltiples niveles.
  • Grupos Selector: Esto funciona muy similar a lo de anidación, pero es un enfoque un poco diferente. Esto le daría la capacidad de hacer:  html body .myDiv [h1,h2,h3,h4,h5] en lugar de:  html body .myDiv h1, html body .myDiv h2, html body .myDiv h3, html body .myDiv h4, html body .myDiv h5
  • Filtro de paquetes: Algunas personas quieren aprovechar todas las funcionalidades y otras sólo quieren instalar y listo. Paquetes distintos de filtros como “Object Oriented Dev Pack” o “7 Filter Designer Pack“, harán de Rosemary una poderosa herramienta para cualquier tipo de usuario, de aficionados a expertos.
  • Anchura / altura completa: Mucha gente no entiende el modelo de caja. Si digo que es 500px de ancho con 20px de relleno y 5px de margen, ¿Por qué es más de 500px de ancho? Un buen filtro para los diseñadores sería de dos nuevas propiedades llamadas “de ancho completo” y “de altura completa.” Se podría escribir la propiedad a ser ‘height’ = ‘full-width’ – ‘padding’-‘border’. Lo mismo para la altura.

Denle la vuelta y vean a qué llegan. ¡Esperamos sus comentarios!

Descarga Rosemary.zip

Este Nuevo filtro simula “Mixins,” un tipo diferente de herencia. Utiliza clases, IDs y selectores como variables en cualquier parte de tu hoja de estilos.
Download Mixins Filter

Este filtro te permite incluir archivos CSS pre-procesados en uno.
Descarga Include Filter

Snippet de ejemplo usando el filtro de Variables:

  1. define red: #ff0000;
  2.                 define full wide: "600px";
  3.  
  4.                 #myDiv {
  5.                     /* Color will be red */
  6.                     color: @red;
  7.                     /* Width will be `"600px"` */
  8.                     width: @full wide;
  9.                 }
  10.  
  11.                 define red: #0000ff;
  12.  
  13.                 #myDiv2{
  14.                     /* Color will be blue */
  15.                     color: @red;
  16.                 }

Snippet de ejemplo usando el filtro de Navegador:

  1. ~!ie #myDiv{
  2.                     /** This block only appears for NON-IE browsers **/
  3.                 }
  4.  
  5.                 ~gecko #myDiv{
  6.                     /** This block only appears for Gecko-type browsers **/
  7.                 }
  8.  
  9.                 ~firefox3 #myDiv{
  10.                     /** This block only appears for Firefox3.0 browsers **/
  11.                 }
  12.  
  13.                 #myDiv{
  14.                     /** Can be applied to properties inside blocks **/
  15.                     ~ie height: 100%;
  16.                     ~!ie height: 500px;
  17.                 }

Fuente: Big Spaceship


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder