Apresentando o Bourbon: Mixins Leves em Sass e Mais

() translation by (you can also view the original English article)

Bourbon é uma biblioteca top de mixins em Sass para designers. Ela tem uma abordagem mínima e série em relação a código de qualidade, importando-se com semântica. A biblioteca Bourbon também encoraja as melhores práticas para código escalável.

Uma Rápida Apresentação

Na verdade, além de ser apenas uma biblioteca, Bourbon é hoje uma pequeno conjunto de projetos que são montidos pelos designers da thoughbot. Nos próximos tutoriais, cobriremos os tópicos a seguir em detalhes:

Por hora, eis a essência:

Bourbon provê, principalmente, uma pequeno porém belo conjunto de mixins e funções extraídos de códigos Sass de vários designers. A ideia foi centralizar mixins úteis e evitar reinventar a roda o tempo todo.

Neat é um framework leve de grade para Sass. Tem o Bourbon como base e nasceu pela necessidade de uma abordagem semântica para layouts de sites.

Refills é uma coleção de padrões de design, bem estilizados ou não. Também são projetados com Bourbon e Neat. Códigos exemplos úteis estão ao nosso dispor.

Bitters são estilos base, variáveis e um pouco de estrutura para novos projetos em Bourbon. Para agilizar o máximo.

Bourbon: Biblioteca de Mixins para Sass

O Bourbon original foi lançado em 2011 por Philip LaPier, na época designer de producto digital na thoughbot. O projeto começou centralizando vários mixins de vários designers da empresa.

Hoje, Bourbon é uma biblioteca top de Sass para designers. Com abordagem minimalista e séria sobre código de qualidade que se importa com semântica. Gostamos, especialmente, por encorajar as melhores práticas para desenvolver ótimo código que escala.

Essa gem ajuda designers a escrever código mais rápido e lida com os por menores (como prefixos). As mixins geralmente agem como envólucros retornando CSS de qualidade, mas mantem-se o mais cru possível, usando o máximo da sintaxe CSS original.

Destaques

Bourbon é Sass puro e agnóstico de plataforma, e funciona com qualquer projeto Sass.
É bem próximo da sintaxe CSS padrão.
Não é atrelado à Ruby (diferente da Compass).
Bourbon inclui funções excelentes
Terceiriza prefixos de fabricantes.
É super leve.
É semântica.

Configuração

Ótimo, vamos começar! No terminal, acessemos o diretório do projeto e instalemos Bourbon via RubyGems:

1	$ gem install bourbon

Nota: Se não se sentir confortável com a linha de comando, recomendamos a série A Linha de Comando para Web Design.

Acesse a pasta das folhas de estilo do projeto e gere o diretório do bourbon.

1	$ bourbon install

Esse comando gera esse diretório contendo as unções, mixins, helpers e configurações que precisamos. Recomendamos não mexer nele. Será muito mais suave atualizar Bourbon dessa forma no futuro.

Finalizemos importando os arquivos Sass gerados nas folhas de estilo. Importemos Bourbon no topo do arquivo application.sass e garantamos que as outras importações venham depois:

Em application.sass:

1	@import 'bourbon/bourbon'
2	@import 'other-sass-partials-below'

Visão Geral das Mixins do Bourbon

Bourbon tem várias mixins úteis para acelerar o trabalho. Em relação a design, é seguro dizer que os criadores querem dar suporte às nossas próprias decisões sem forças estilos próprios sobre nós. Somos encorajados a criar nossas próprias coisas, usando essas mixins como uma base relativamente neutra.

Eis alguns que recomendamos a visualiação:

background-image
linear-gradient
border-radius
retina-image
inline-block
transitions
box-sizing
animations
font-face
triangle
clearfix
position
button
size

Aprenderemos mais sobre mixins em particul em tutoriais futuros.

Visão Geral das Funções de Bourbon

Sass já tem inúmers funções embutidas. Desde a manipulação de cadeia de caracteres à lidar com opacidade e cores. Bourbon traz alguns aprimoramentos selecionados e provê funções Sass muito úteis para vários casos de uso. Comecemos vendo essa seleção:

linear-gradient()
modular-scale()
golden-ratio()
shade()
tint()
em()

De novo, veremos mais detalhes das funções do Bourbon mais na frente na série.

Adicionais do Bourbon

Bourbon define algumas poucas mas úteis variáveis padrões, por exemplo:

Variáveis de Pilhas de Fontes

$lucida-grande
$monospace
$helvetica
$verdana
$georgia

Ao invés do modo tradicionais de definir pilhas de fontes:

1	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif

com Bourbon podemos usar uma das variáveis:

1	font-family: $helvetica

Variáveis Temporais

Bourbon provê varias variáveis de tempos, nativamente. Uma mixin como transition tem a sintaxe a seguir:

.some-element
  +transition(all 5s $ease-in-circ)

//  SCSS syntax
//  .some-element {
      @include transition(all 5s $ease-in-circ);
//  }

O último parâmetro define seu tempo por uma variável. Podemos melhorar o comportamento transicional, porvendo uma das 24 variáveis de controle temporal. O GIF abaixo ilustra as opções:

Conclusão

Faça um favor ao seu eu do futuro e de seus colegar e dê uma chance a Bourbon. Essa gem valoriza muito código semântico ao mesmo tempo que é leve e simples. Ela servirá bem nosso design e arquitetura CSs, além de ajudar a cultivar boas práticas de criação de código excelente.

Junte-se a nós na próxima parte da série, onde iremos mais a fundo nas mixins da Bourbon.