Logo do Rucksack

Apresento o Rucksack

Nesse artigo vou mostrar para vocês o Rucksack, um pacote de features desenvolvido em PostCSS que pode ser de grande ajuda no seu workflow.

Introdução

Tenho certeza absoluta que o PostCSS vai estar cada vez mais presente no nosso dia a dia, já que é absolutamente fantástico e pode ser usado de várias formas, inclusive junto com o pré-processador da sua preferencia, ou seja, a escalabilidade é total.

Muitas ferramentas já estão utilizando o PostCSS, um exemplo é o grid-system Lost, desenvolvido pelo mesmo criador do super conhecido Jeet.

Porém o foco desse artigo é o Rucksack.

O que é?

Quem me mostrou essa ferramenta foi o Milson Junior e desde então fiquei fascinado com algumas coisas que ela oferece.

Rucksack é um pacote de funcionalidades que pode ser usado em qualquer pré-processador, com o PostCSS ou até mesmo ser injetado diretamente no Stylus.

Um detalhe importante, é que seu CSS gerado não terá nenhum código extra.

Instalação

Vou mostrar uma configuração utilizando o Grunt + Stylus, mas é possível ver todas as configurações aqui.

Baixe o PostStylus e o Rucksack.

$ npm install --save poststylus rucksack-css

Em seguida crie uma função para utilizar o PostCSS na sua configuração do Stylus no Grunt:

var rucksack = require('rucksack-css');

var postcss = function(){
  return require('poststylus')(['rucksack-css']);
}

Caso queira utilizar outra ferramenta em PostCSS, como o Lost, também deve chamar dessa forma, por exemplo:

var postcss = function(){
  return require('poststylus')(['rucksack-css', 'lost']);
}

Depois é só chamar no use do Stylus dentro do seu Gruntfile:

stylus: {
  dev: {
    options: {
      use: [postcss],
    }
  }
}

Opções

É possível habilitar ou desabilitar algumas opções do Rucksack. Por padrão apenas as opções de autoprefixer e fallbacks ficam desabilitadas.

Fallbacks

Adiciona compatibilidade de algumas propriedades para navegadores antigos.

Por exemplo:

.foo
  opacity 0.8

Vai gerar:

foo {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  opacity: 0.8;
}

Autoprefixer

Faz a mágica de adicionar prefixos automaticamente para você, e sempre se baseando na tabela mais atualizada do CanIUSe.

Por exemplo:

.foo
  display flex

Vai gerar:

.foo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

Como acho essas funções importantes, deixei ambas habilitadas.

var postcss = function() {
  return require('poststylus')([rucksack({
    autoprefixer: true,
    fallbacks: true
  })]);
}

Features

Agora vou fazer um breve resumo das funcionalidades que achei mais relevantes.

Responsive Typography

De longe é o que mais me impressionou. É simplesmente incrível!

Suas fontes ficarão responsivas automaticamente, não é magia nem JavaScript, é apenas CSS.

Pode ler toda a documentação aqui, mas estou usando da seguinte forma:

Como utilizo REM, defino no HTML um range entre 7px e 10px.

html
  font-size responsive 7px 10px

E pronto!

O motivo de ser entre 7px e 10px, é que assim posso usar o REM como se fosse pixel, ou seja, 1.6rem = 16px. Então consigo ter mais controle na fidelidade das fontes.

Travando o minimo em 7px, garanto que as tipografias vão diminuir no máximo 3px, então elas vão ficar em um tamanho adequado para dispositivos menores.

Shorthand Positioning

Outra mão na roda, sabe quando a gente precisa deixar um elemento absoluto ou fixo e quer que ele ocupe todo o espaço?

Basta fazer isso:

.foo
  position absolute 0

E você terá isso:

.foo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Property Aliases

Tem preguiça de escrever o nome completo de alguma propriedade?

Crie um alias!

@alias
  fs font-size

.foo
  fs 16px

Para ter isso:

.foo {
  font-size: 16px;
}

Font Src Expansion

Sabe aquelas funções que criamos no pré-processador para gerar nosso font-face mais facilmente? É coisa do passado, agora podemos usar "nativamente".

@font-face
  font-family 'My Font'
  font-path '/my/font/file'
  font-weight normal
  font-style normal

E vai gerar o código completo:

@font-face {
  font-family: 'My Font';
  src: url("/my/font/file.eot");
  src: url("/my/font/file.eot?#iefix") format('embedded-opentype'),
       url("/my/font/file.woff") format('woff'),
       url("/my/font/file.ttf") format('truetype'),
       url("/my/font/file.svg") format('svg');
  font-weight: normal;
  font-style: normal;
}

All The Easings

Um pacote completo com transições incríveis.

Escreva:

.foo
  transition all 250ms ease-in-cubic

E terá:

.foo {
  transition: all 250ms cubic-bezier(0.55, 0.055, 0.675, 0.19);}

Chega de perder tempo entrando em sites para gerar o código pra você :)

Pode ver todas as transições aqui.

Conclusão

O Rucksack oferece features interessantes que podem agilizar muito nosso dia a dia.

Funcionalidades como a de Responsive Typography ou All The Easings são motivos mais do que suficientes para começar a usar o quanto antes.

E ai gostaram do artigo? Alguma consideração? Mandem ver nos comentários!