Crea tu propio framework CSS con Stylus

Gracias a preprocesadores como Stylus podemos crear un CSS mucho más sencillo de mantener y editar. Aprovechando sus funciones podemos crear un pequeño framework a medida, nuestro propio Bootstrap, pero personalizado con las utilidades que necesitemos en nuestros proyectos.

Para poder crear nuestro framework necesitamos tener en cuenta algunos puntos claves que marcarán la diferencia entre tener un proyecto escalable y fácil de mantener, o tener un montón de archivos en una carpeta.

Estructura y organización

Gracias al @import de Stylus podemos dividir nuestro código en múltiples archivos modulares. Tendremos un archivo principal en el que se importarán todos los archivos, que estarán divididos en carpetas. Podemos tener una estructura como la siguiente:

Código :

index.styl

base/
        base.styl
        fonts.styl
        animations.styl
        utility.styl
        mixins.styl
        variables.styl
        mixins/
                grid.styl
                triangles.styl
                otros mixins...

components/
        buttons.styl
        grid.styl
        icons.styl
        otros componentes...

lib/
        normalize.styl
        otros archivos externos...

El archivo index.styl es el archivo principal, en el que importamos el resto de archivos. En él no va ningún estilo ni configuración, tan solo los imports de los archivos necesarios:

Código :

@import 'nib'

@import 'lib/normalize'
// @import 'base/reset'

@import 'base/variables'
@import 'base/mixins'

@import 'base/animations'
@import 'base/base'
@import 'base/fonts'
@import 'base/utility'

@import 'components/buttons'
@import 'components/grid'
@import 'components/icons'

En las librerías incluiríamos cualquier archivo externo como Normalize, o el CSS de otros módulos que podamos necesitar, como podría ser JqueryUI. Para ello simplemente descarga el archivo CSS y cámbiale su extensión a .styl. No es necesario convertirlo puesto que Stylus entiende la sintaxis de CSS.

Después incluiremos nuestros estilos base, como las variables de configuración, el reset, las fuentes que vayamos a usar, las animaciones, etc. Y por último, los componentes como el sistema de grillas o los botones.

El orden en el que hagamos los imports es importante, pues queremos que los estilos de los componentes sobreescriban a los estilos base, y estos a su vez sobreescriban los estilos de las librerías externas. Y en el caso de Normalize o reset, queremos que estos sean los primeros estilos en aplicarse.

Modifica la estructura en base a tus necesidades

Puede que tengas un proyecto gigante y necesites tener un archivo por cada página o sección, o por cada elemento del layout. O puede que solo necesites crear una landing page simple, en ese caso puede que te sobre con 2 o 3 archivos y no necesites crear una estructura como esta. Piensa en qué necesitas antes de ponerte a escribir código. Si todos tus proyectos tienen ciertas características en común, incluye esas características en tu framework y reutilízalo en los nuevos proyectos.

Usa solo clases, y sigue una nomenclatura

Tan solo usa clases para aplicar estilos, nunca id. Esto nos permite poder generar módulos y reutilizar los estilos en otra zona de nuestro documento. Los id son únicos y solo los podemos usar una vez.

También es bueno seguir una convención al nombrar las clases. A mí me gusta usar una sintaxis alternativa de BEM para que sea más sencillo editar las clases:

Código :

.Componente
.Componente-elementoHijo
.Componente--modificador

Los nombres de los componentes comienzan con mayúscula. De esa forma podemos identificar de un vistazo qué elementos son componentes. Si el componente tiene algún hijo, se separa con un guión, y si queremos aplicarle algún modificador, usamos 2 guiones.

Puedes usar la nomenclatura que prefieras siempre y cuando seas constante y uses la misma para todo.

Mixins

Es importante saber crear mixins. Los mixins nos ayudarán a no repetir código y a generar piezas complejas de forma sencilla. Si quieres saber más sobre cómo crear mixins, revisa la documentación de Stylus.

El uso más conocido de los mixins es el de generar los prefijos propietarios necesarios para algunas propiedades. Pero para hacer esto en Stylus usaremos Nib y nos ahorraremos mucho trabajo. Veamos otras utilidades. Supongamos que en nuestro CSS usamos mucho el centrado de capas horizontalmente. Podemos crear un mixin para ello:

Código :

centrar()
  margin-left: auto;
  margin-right: auto;

En los mixins es importante no usar shorthands para evitar pisar otras propiedades. Así podemos aplicar un margin-top a nuestra capa sin tener que preocuparnos de que nuestro mixin reinicie su valor:

Código :

.centradito
  margin-top 1em
  centrar()
  max-width 800px

Este ejemplo es muy simple, pero podemos crear mixins más complejos, como este de Leonidas Esteban para crear triángulos:

Código :

triangle(type = '', color = '', top = '', right = '', bottom = '', left = '')
    border-bottom bottom solid transparent
    border-left left solid transparent
    border-right right solid transparent
    border-top top solid transparent
    content ""
    display inline-block
    if type == 'top'
        border-top-color color
    if type == 'right'
        border-right-color color
    if type == 'bottom'
        border-bottom-color color
    if type == 'left'
        border-left-color color

En el mixin encapsulamos toda la lógica de la creación de triángulos, y gracias a ello nos permite no solo reducir el código que tenemos que escribir, también nos ayuda a generar los triangulitos de una forma mucho más cómoda, rápida y sencilla.

También podemos crear un mixin que genere automáticamente la grilla de cada proyecto:

Código :

grid(columns = 12, margin = 1em)
  &
    display block
    font-size 0

  &-cell
    display inline-block
    font-size 1rem
    margin margin
    width s('calc(%s - %s)', 100% / columns, margin * 2)

  for col in 1..columns
    &-cell--size{col}
      width s('calc(%s - %s)', 100% / columns * col, margin * 2)

.Grid
  grid(12, 0.5em)

Con este mixin podéis generar una grilla con un número variable de columnas. Si en un proyecto usáis una grilla de 12 columnas y en otro de 16, solo hay que cambiar un valor para generar la grilla necesaria.

De esta misma forma se pueden construir diversos mixins que simplifiquen otras muchas tareas. La idea de los mixins es reutilizar el código lo máximo posible. Aprovéchalos todo lo que puedas y te ahorrarán mucho trabajo.

Crea una librería de patrones

Según vayas construyendo tu framework ve creando un HTML en el que tengas un elemento de cada componente. Crea una grilla, crea un botón de cada tipo, crea todos los triángulos posibles. Te permitirá hacer test de tu framework y comprobar que todos los componentes funcionan correctamente. También te servirá como documentación de los elementos de tu interfaz.

Pero, ¿por qué crear mi propio framework?

Ok, Bootstrap, Foundation y otros frameworks están muy bien, pero no puedes utilizarlos para todos los proyectos. Y si lo haces, tienes que agregar tu capa de personalización para que tu sitio no se parezca a otros. Realmente el objetivo no es crear un framework que sustituya a los ya existentes, sino crear una herramienta que te funcione en tus proyectos o en los de tu empresa. Incluso puedes aprovechar componentes de Bootstrap y crear con Stylus tus componentes personalizados.

Si mantenéis actualizado vuestro propio framework con las funcionalidades que más uséis, será mucho más sencillo y rápido iniciar nuevos proyectos, o mantener los ya existentes, pues todos usan la misma base.

Para finalizar, podéis ver en GitHub este repositorio en el que he comenzado a crear mi propio framework. Sería genial que también compartieseis vuestros frameworks

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.