Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

CSStyle para crear hojas de estilo estupendas

CSStyle para crear hojas de estilo estupendas 06.NOV.14

Alvaro José Rios Ch
Fundador WebBizarro

Sass es uno de los preprocesadores de CSS más usados en el desarrollo de sitios web y esto trae como consecuencia la aparición de muchas herramientas pensadas para ahorrarnos trabajo no solo en el desarrollo de las aplicaciones sino también en el mantenimiento de las mismas.

CSStylees una herramienta desarrollada para los usuarios de SASS que permite crear hojas de estilo más simples y limpias. El desarrollo de las hojas de estilo esta orientado a componentes por lo que es completamente reutilizable. Consta de 5 partes fundamentalmente

 

Componentes

Esta sección te permite crear componentes básicos como botones, aquí se definen las características básicas de los elementos de nuestro sitio.

 

Opciones

Aquí se crean las opciones para nuestros componentes, por ejemplo podemos tener botones con alguna característica especial como un color mas resaltaste, no tendremos que reescribir el componente completo sino colocar una opción que permita modificar solo el color.

 

Partes

Los componentes pueden tener diferentes partes, por ejemplo el icono del botón, estas partes son elementos hijos de los componentes y también puedes tener sus propias opciones.

 

Tweaks

Estas son características especiales que pueden ser usadas por todos los elementos del sitio, como bordes redondeados o algún efecto.

 

Localización

Esta ultima parte te permite diferenciar los componentes dependiendo de la localización en el sitio, de esta forma es mucho más fácil hacer mantenimiento a los componentes.

Cuando creamos nuestro HTML usamos clases especiales para referirnos al componente botón con la opción registro simplemente colocamos lo siguiente.

<a class="boton --registro">
    Registro
</a>

Una muy buena opción para crear componentes reutilizables para nuestros proyectos web.