UI Grid - Sistemas E Bibliotecas | Hemerson Vianna | Nerd Calistênico
ui grid sistemas e bibliotecas
UI Grid - Sistemas e bibliotecas
Publicado em 22 . julho . 2019
Nos últimos 8 anos, os sistemas de grid CSS vem ganhando destaque pela atenção que o layout responsivo tem recebido. E estou estimando esse tempo, com base na data de lançamento do twitter boostrap (19 de agosto de 2011). Essa seria a minha referência, em relação ao início forte de discussões sobre boas práticas para layout responsivo, frameworks e bibliotecas para esse fim.
O sistema de grid é uma estrutura que permite o alinhamento de elementos da página com base em colunas e linhas sequenciadas.
O formato com 12 colunas tem sido o mais utilizado, por causa da flexibilidade proporcionada e por ser capaz de dividir o layout uniformemente. Na divisão por 2, 3 e 4, temos uma serie de modulações disponíveis (2x6 , 3x4) e várias outras combinações.
O número de colunas pode variar dependendo do projeto. Quanto maior o número de colunas, (por exemplo, 16 ou 24) maior a quantidade de possibilidades para divisão.
960 Grid System, considerado o rei do grid por muitos anos, tem a seguinte estrutura:
Largura total de 960px.
Largura de 60px em cada coluna.
Cada coluna tem 10px de margem esquerda e direita. Sendo 20px de espaço entre as colunas.
A área total do conteúdo é de 940px.
largura de 40px em cada coluna.
largura de 30px em cada coluna.
Cada coluna tem 5px de margem esquerda e direita. Sendo 10px de espaço entre as colunas.
A área total do conteúdo é de 950px.
Uma das principais razões para a popularidade do 960 Grid com os designers é a sua flexibilidade. Os designers podem usar uma ampla gama de colunas, com o número máximo de 24.
Funcionou muito bem no começo e ainda funciona até hoje, porque a maioria dos projetos tem o tamanho de fonte definido em 12px. De uns anos para cá, que a maioria dos layouts estão sendo definidos com tamanho de fonte de 13px ou superior.
Como o tamanho da fonte aumentou, é necessário aumentar a área de conteúdo e ajustar o espaço entre as colunas. Com a evolução das boas práticas na experiência do usuário e uma variedade de novos dispositivos, o sistema de grid foi ganhando uma infinidade de variações. Ex: O Bootstrap, acima de 960px, usa a largura de 1140px para área de conteúdo no tamanho wide.
Sendo encontrado com facilidade na internet, os sistemas mais comuns. Lembrando que o projeto terá uma necessidade e o sistema poderá ser livremente customizado.
Levando o layout CSS ao próximo nível
Quem já trabalha com layout CSS, há muitos anos, já deve ter visto muito float: *, display: table, display: inline-block, para montar uma grade na estrutura ou em um simples menu. Desde 2015, o suporte dos navegadores mais relevantes para o Flexbox, tem sido excelente. O CSS Grid, tem sido bem recebido pelo navegadores, desde 2017. É claro que não considero o IE, para falar de suporte as novas tecnologias, mas o suporte a esse layout que tem feito muitos desenvolvedores felizes, já passa de 90%. Agora, vamos falar mais sobre essa flexibilidade que temos no CSS.
O Flexbox, foi projetado como um modelo de layout unidimensional e método que pode oferecer distribuição de espaço entre itens numa interface e capacidade de alinhamento. Ele também pode ser usado para trabalhar elementos de forma bidimensional, mas o flexbox opera melhor quando trabalhado com os itens em apenas uma dimensão, ou seja, em coluna ou linha.
Já o CSS Grid, tem o modelo bidimensional, que controla ao mesmo tempo as colunas e linhas. Você pode indicar o ponto em que um elemento começa e acaba dentro da sua grid, o que proporciona muita flexibilidade.
CSS Grid é principalmente definido no elemento pai. No flexbox, fora o básico, a maior parte do layout é aplicado nos elementos filhos.
O intuito do artigo, não é me aprofundar muito em cada assunto sobre como montar a sua grade, e sim, apenas apresentar os sistemas e ferramentas para o mesmo. O mais importante é deixar claro que um não substitui o outro. Podem ser usado tranquilamente juntos e em próximo artigos, darei mais exemplos dessa combinação.
Abaixo podemos brincar, conhecer e praticar com Flexbox e CSS Grid.
Fiz um compilado das ferramentas que podem nos ajudar e inspirar no desenvolvimento e montagem da grade para os nossos projetos.
Pré-processadores e CSS
Flexbox Grid - http://flexboxgrid.com/
Bootstrap Grid - https://getbootstrap.com/docs/4.0/layout/grid/
Waffle Grid - https://lucasgruwez.github.io/waffle-grid
Basscss - https://basscss.com/
Pure - https://purecss.io/grids/
Milligram - https://milligram.io/grids.html
GRD - https://github.com/1000ch/grd
Gridlex - https://github.com/devlint/gridlex
Gridly - https://github.com/IonicaBizau/gridly
Blueprint CSS - https://blueprintcss.dev/
Structure - https://github.com/kenwheeler/structure
Picnic CSS - https://github.com/franciscop/picnic
CSS grid 12 column layout - https://github.com/erikmonjas/css-grid-12-column-layout
Griddy.css - https://github.com/balapa/griddy.css
Semantic UI - https://semantic-ui.com/collections/grid.html
csswizardry-grids - https://github.com/csswizardry/csswizardry-grids
Jeet Grid - https://github.com/mojotech/jeet
Lost Grid - https://github.com/peterramsing/lost
Toast - https://github.com/daneden/Toast
Neat - https://github.com/thoughtbot/neat
Msdotcom/WinJS Grid Framework - https://github.com/winjs/grid/
Skeleton - https://github.com/dhg/Skeleton
Crow - https://github.com/kkortes/crow
Simple Grid - https://github.com/zachacole/Simple-Grid
Pills - http://arkpod.in/pills/
Spacegrid - https://github.com/JonathanSpeek/spacegrid
Angular UI Grid - http://ui-grid.info/
React Material-UI Grid - https://material-ui.com/components/grid/
React Grid Layout - https://github.com/STRML/react-grid-layout
Rebass Grid - https://rebassjs.org/grid/
Muuri - https://github.com/haltu/muuri
Masonry - https://github.com/desandro/masonry
KK UI Store's - Grid System Library - https://grid.kkuistore.com/
Como bônus, deixo uma biblioteca que posibilita a utilização de 3 sistemas de grid (flexbox, CSS Grid e Flexbox Masonry Grid. Escrito em SCSS e disponível em SCSS e CSS.
CSS Grid Library
Montar uma grade no projeto sempre gerou dúvidas entre leigos, designers e desenvolvedores front-end. Citei o 960 GS, por ser um exemplo de que esse assunto precisou de um norte para quem não tinha muita experiência ou estipular um padrão.
A única coisa certa, é que temos uma evolução e maior suporte em relação ao assunto de layout CSS na última década. Vale o estudo na parte de elaboração do projeto, quanto ao melhor sistema que deixará o desenvolvimento do mesmo mais flexivel e de acordo com a área de interface e desenvolvimento.
Na minha opinião, antes de qualquer coisa relacionada ao desenvolvimento web, é necessário definir quais são os navegadores que o seu projeto dará suporte. Assim, diminuindo as preocupações na fase de desenvolvimento e é claro, quando o produto estiver em produção.