18.05.09
epsilonCSS: Una CSS Framework
por: Luis Flores
Nueva version de εCSS puedes encontrarla aquí.
He estado tres semanas trabajando en una framework de css y considero que ya es utilizable, existe un gran discusión sobre el uso de frameworks de css y hay miles de artículos discutiendo sus ventajas y desventajas. En lo personal estoy a favor de su uso ya que considero que muchas de las desventajas no son verdaderamente críticas y si en verdad molestan son fáciles de solucionar.
Después de probar varias frameworks (YUI! y The Golden Grid son mis favoritas) me di cuenta que la mejor forma de ahorrarse problemas es creando una framework propia; crearla dependiendo de las necesidades puede llevar desde horas a unos cuantos días y créeme que es tiempo invertido ya que no solo ahorras tiempo en los proyectos que la utilices sino que además es una excelente manera de aprender mas sobre css. Lo mismo puedo decir de aprender a utilizar una framework de terceros, lo único es buscar una que tenga similitudes con tu estilo de trabajo y estar dispuesto/a a adaptarse o a adaptarlas.
Bueno, como dije al principio comencé a trabajar en mi propia framework mas por curiosidad que por necesidad ya que estaba bastante contento con YUI! y The Golden Grid, luego viendo lo pequeña que es esta última me anime a crear una propia.
εCSS
εCSS consiste de los siguientes archivos:
Lrj-reset.css
Lrj-grid-6.css
Lrj-grid-12.css
Lrj-grid-24.css
Lrj-base.css
Lrj-control.css
Por el momento se pueden realizar sitios fijos de 980px de ancho pero ya empecé a trabajar en una versión semifluida.
Lrj-reset es básicamente YUI! Reset con modificaciones por lo que es un reset que afecta a gran cantidad de elementos. Si necesitas uno menos invasivo puedes buscar en este listado. Eso si, si piensas utilizar lrj-base.css si es necesario utilizar este reset.
La serie Lrj-grid es para construir la retícula, son tres hojas de 6, 12 y 24 columnas. Simplemente decides con cual quieres trabajar. El espaciado entre celdas es de 20px tanto horizontal como vertical.
Lrj-base es una hoja opcional aplica nuevos estilos a los elementos afectados por lrj-reset y además normaliza y controla la tipografía. Al texto base le he asignado un tamaño de 14px y la altura de línea es de 20px; notar que he utilizado pixeles para asignar los tamaños y que por este motivo no es posible agrandar el texto en IE6. Opté por pixeles por que cambiar las medidas es mucho mas fácil y rápido. Un aviso, hay dos estilos para las etiquetas input que utilizan selectores por atributo los cuales IE6 no soporta; estoy considerando convertirlos a clases pero lo que me detiene es que yo siempre utilizo el conocido ie7.js el cual permite que IE6 entienda estos selectores. Así que quedas con dos opciones, sustituir esos selectores por clases o colocar el ie7.js dentro de head.
Lrj-control es opcional y es un experimento que estoy seguro que a todo el que ama el código limpio y práctico no va a gustar; control consiste en un conjunto de clases que controlan (valga la redundancia) ciertos aspectos de la presentación de los elementos, a mi me ha resultado bastante útil pero he terminado con divs que tienen hasta 5 clases motivo por el que puede no gustar a muchos. Aparte de que uso nombres muy largos para las clases pero que espero optimizar para la próxima revisión.
La documentación:
Uso de lrj-grid
Muestras lrj-grid-6.css, lrj-grid-12.css, lrj-grid-24.css
Muestra de lrj-base
Ejemplos:
Armatoste.net: Esta versión de armatoste ha sido construida con εCSS.
Más ejemplos en camino.
Descarga:
Si te animas a utilizar εCSS, si tienes sugerencias o si necesitas ayuda, por favor no dudes en contactarme. Recuerda también que es una primera versión por lo que el css puede ser optimizado todavía más y que continuaré trabajando en su desarrollo.