Spanish (Español) translation by CYC (you can also view the original English article)
Bourbon es una excelente librería de Mixin Sass para diseñadores. Tiene un enfoque minimalista y es serio en la creación de código de calidad que se preocupa por la semántica. La librería Bourbon también fomenta las mejores prácticas para desarrollar códigos escalables.
Una breve introducción
De hecho, lejos de ser sólo una librería mixin, Bourbon se ha convertido en una pequeña suite de proyectos que son mantenidos por los diseñadores de thoughtbot. En los próximos tutoriales, voy a cubrir todo lo siguiente con más detalle:
Por ahora, aquí está la esencia:
Bourbon ofrece principalmente un pequeño pero jugoso conjunto de mixins y funciones que han sido extraídas del código Sass de varios diseñadores. La idea era centralizar mixins útiles y evitar reinventar la rueda todo el tiempo.
Neat es un framework ligero para Sass. Está construido sobre Bourbon y fue motivado por la necesidad de un acercamiento semántico a los sitios de la disposición.
Refills es una colección de patrones de diseño, bien diseñada o sin estilos. También están diseñados con Bourbon y Neat. Super útiles ejemplos de código están a tu disposición.
Bitters son algunos estilos de 'scaffold' andamio, variables y un poco de estructura para los nuevos proyectos de Bourbon. Te ponen en marcha en muy poco tiempo.
Bourbon: Una librería Mixin de Sass
El Bourbon original fue lanzado a principios de 2011 por Philip LaPier, en ese momento era diseñador de productos digitales en thoughtbot. El proyecto comenzó centralizando varios mixins de diferentes diseñadores de la empresa.
Hoy en día, Bourbon es una excelente librería Sass para diseñadores. Tiene un enfoque minimalista y es serio en la creación de código de calidad que se preocupa por la semántica. Me gusta especialmente porque alienta las mejores prácticas para el desarrollo de código a gran escala.
Esta gema ayuda a los diseñadores a escribir su código más rápido y gestiona muchos de los detalles básicos (como los molestos prefijos de los proveedores). Sus mixins actúan a menudo como envoltorios para producir CSS de calidad, pero permanecen como 'vanilla' para que sea posible mantenerse fiel a la sintaxis CSS original.
Vale la pena señalar
- Bourbon es puro Sass, plataforma agnóstica y funciona con cualquier proyecto Sass.
- Está muy cerca de la sintaxis 'vanilla' de CSS.
- No está vinculado a Ruby (a diferencia de Compass).
- Bourbon incluye funciones impresionantes.
- Subcontrata prefijos de proveedores.
- Es súper ligero.
- Es semántico.
Configuración
Justo entonces, ¡vamos a conseguir esto en movimiento! Abre tu terminal, cambia al directorio de tu proyecto e instala Bourbon a través de RubyGems:
1 |
$ gem install bourbon |
Nota: Si no estás completamente cómodo usando la línea de comandos, echa un vistazo a nuestra serie de principiantes La línea de comandos para diseño web.
Cambia al directorio de hojas de estilo de tu proyecto y genera tu carpeta bourbon.
1 |
$ bourbon install |
Este comando genera una carpeta bourbon que contiene las funciones, mixins, helpers y configuraciones que necesitas. Te recomiendo que no toques esta carpeta; esto te dará una experiencia mucho más tranquila al actualizar Bourbon en el futuro.
Termina la configuración importando los archivos Sass generados en tus hojas de estilo. Importa Bourbon en la parte superior de tu archivo application.sass y asegúrate de importar otros archivos Sass debajo de lo siguiente:
En application.sass:
1 |
@import 'bourbon/bourbon' |
2 |
@import 'other-sass-partials-below' |
Descripción de Bourbon Mixins
Bourbon tiene una amplia gama de mixins super útiles para acelerar tu trabajo. En términos de diseño, es seguro decir que sus creadores quieren apoyar tus propias decisiones de diseño sin forzar un estilo particular en ti. Se te anima a que mezcles tu propia salsa impresionante, utilizando estos mixins como una base estable y relativamente neutral.
Aquí hay un par de mixins que te recomiendo para que le eches un primer vistazo:
background-imagelinear-gradientborder-radiusretina-imageinline-blocktransitionsbox-sizinganimationsfont-facetriangleclearfixpositionbuttonsize
Aprenderemos más sobre mixins Bourbon individuales en futuros tutoriales.
Descripción de las funciones de Bourbon
Sass ya tiene un montón de funciones integradas. Que van desde la manipulación de cadenas, a probar con la opacidad y los colores. Bourbon añade un par de mejoras seleccionadas y proporciona funciones Sass muy prácticas para una variedad de casos de uso. Comienza con esta selección:
linear-gradient()modular-scale()golden-ratio()shade()tint()em()
Nuevamente, estaremos analizando detalladamente las funciones de Bourbon más adelante en la serie.
Complementos de Bourbon
Bourbon define algunos conjuntos pequeños pero útiles de variables predeterminadas, por ejemplo:
Variables del montón de fuentes
$lucida-grande$monospace$helvetica$verdana$georgia
En lugar de la forma tradicional de definir montones de fuentes:
1 |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif |
Con Bourbon se utiliza una de las variables font-family:
1 |
font-family: $helvetica |
Variables de tiempo
Bourbon proporciona una tonelada de variables de tiempo, directamente de la caja. Un mixin como transition tiene la siguiente sintaxis:
1 |
.some-element
|
2 |
+transition(all 5s $ease-in-circ) |
3 |
|
4 |
// SCSS syntax |
5 |
// .some-element { |
6 |
@include transition(all 5s $ease-in-circ); |
7 |
// } |
El último parámetro define su temporización a través de una variable. Puedes ajustar el comportamiento de transición proporcionando una de las 24 variables para controlar la temporización. El siguiente GIF ilustra las opciones:
Conclusión
Haz tu futuro y a tus colegas un favor y dale una oportunidad a Bourbon. Esta gema pone un alto valor en el marcado semántico, mientras que es ligero y simple. Esto será útil en tu diseño y arquitectura CSS, además ayuda a cultivar mejores prácticas para crear código excelente.
Únete a mí en la siguiente parte de esta serie, cuando eche un vistazo más profundo a los mixins de Bourbon.
