Grids Semânticos com Jeet

03 Nov 2015

Olá amiguinhos!

Depois de um breve período de tempo, resolvi voltar a escrever e hoje vou escrever sobre um tipo de tecnologia muito produtiva e performática de se usar, o Jeet.

Grids semânticos

Sabe quando você usa o Bootstrap por exemplo e sai colocando aquela tsunami de classes em seus elementos HTML? Pois é esses presets são oriundos do próprio framework e funcionam mais ou menos assim:

>
1
2
3
4
5
6
7
8
9
10
11
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
>
1
2
3
4
5
6
7
8
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
col(1/4, offset: 1/4)

Cycle

Sabe quando temos vários elementos em linha e definimos um espaçamento padrão entre eles? O que acontece é que na maioria das vezes existe um certo gargalo na lógica desse espaçamento que geralmente é resolvido pela manipulação dos elementos filhos por css, tome o próprio blog como exemplo:

Sistema de grid blog

A formatação da página inicial é feita com três posts por linha, e naturalmente quando se usa o col ele faz o espaçamento devido para deslocar os elementos em linha, porém nesse caso haverá possivelmente mais de uma linha, o que significa que devemos remover o espaço do último item do bloco para que não haja quebra desse espaçamento (para mais detalhes veja esse vídeo), a referência usada para remover esse espaço é cycle. Veja um exemplo de sua utilização:

.post
   col(1/3, cycle:3)

Uncycle

Uncycle desfaz a formatação do cycle, é bem útil quando queremos adicionar algum comportamento responsivo ao nosso site.

.post
   col(1/3, cycle:3)
   +tablet()
      col(1/2, uncycle:3, cycle:2)

Bem auto-explicativo não? Quando a página for acessada pelo tablet (breakpoint definido pelo plugin rupture), ele irá trocar os elementos do grid para dois itens do bloco ao invés de três.

Span

O span possui basicamente o mesmo conceito do col, a única diferença é que no span não existe espaçamento.

span(3/12)

Existem outras features do Jeet, mas não vou me atentar a explicar todas aqui, pois o post ficou bem maior do que esperava, mas se você chegou até aqui é porque, assim como eu, achou interessante a sua utilização, aconselho ler a documentação em sua página inicial.

Conclusão

Quero deixar bem claro que usei o bootstrap como exemplo para explicar esse post devido a sua popularidade, mas isso se aplica a diversos outros como foundation, groundworkCSS e tantos outros que grids não semanticos. Mas não tenho nada contra a essas tecnologias. Esse post somente possui caráter explicativo, não estou aqui para falar mal de nenhuma tecnologia, somente para mostrar novas e melhores soluções para os problemas de sempre. Espero ter cumprido minha missão, qualquer dúvida / elogio / sugestão, deixe um comentário.