21 principais sistemas e estruturas de grade HTML5 / CSS3

Os métodos de design tradicionais apenas alguns anos atrás significavam que você tinha que projetar uma página inicial sozinha, costurando wireframes e caixas de conteúdo e então esperar o melhor, mas gradualmente essa técnica desapareceu e novos e mais modernos métodos de desenvolvimento rápido de sites tem emergido. Mais notavelmente, o CSS3 introduziu o Flex-box - uma função de grade fácil de usar que você pode usar para criar layouts de conteúdo, mas ainda assim - alguns são resistentes, enquanto outros tomam abordagens ainda mais complicadas para precisão absoluta de design.

Quando você abre um novo site, normalmente o que você verá é a parte do cabeçalho do site, a área de conteúdo e uma barra lateral - essas áreas principais também incluem seus próprios layouts de design e especificações, e a toca do coelho continua a ficar mais profunda. É crucial encontrar uma maneira de criar um layout de página inicial (ou qualquer outra página) que tenha uma boa aparência em todas as mídias, dispositivos e softwares. Então, pensamos que poderia ser útil para nossos colegas desenvolvedores que juntássemos uma coleção de estruturas e sistemas CSS e HTML para desenvolver layouts de grade.

Quer mais estruturas? Experimente nossos outros resumos:

• Frameworks JavaScript
• Frameworks HTML5
• Frameworks CSS3
• Frameworks Node.js

Desnecessário dizer que esses designs são adaptáveis ​​a qualquer situação, então você pode evitar a dor de cabeça de ter que resolver torções e peculiaridades do layout do design em si e, em vez disso, se concentrar em preencher essas caixas de grade com o conteúdo que deseja para colocar lá. Há uma grande variedade e estilos diferentes que você encontrará ao longo desses sistemas de grade, reserve algum tempo para visitar as páginas de demonstração e talvez até mesmo escreva o que você está procurando para ter um tempo mais fácil para encontrar a estrutura correspondente para suas necessidades.

Dead Simple Grid

As grades nunca devem ser complicadas, em sua verdadeira essência são apenas elementos HTML montando um design geral, e Vladimir Agafonkin é um dos desenvolvedores que abraça esse conceito. Sua estrutura de grade Dead Simple Grid vem com apenas duzentos bytes de código CSS; essa é uma quantidade mínima de código que suas páginas nem perceberão que está lá. Você pode separar a grade para apresentar uma área de conteúdo principal e uma barra lateral flexível, se desejar. Esse tipo de grade seria adequado para blogs e layouts de página inicial gerais, onde o design mínimo é preferido. O design responsivo é integrado graças às consultas de mídia, de modo que a grade ficará perfeita em qualquer dispositivo em que esteja sendo usada.

Bourbon Neat

Bourbon é uma biblioteca de mixins de muito sucesso para o pré-processador SASS. Isso, é claro, tornou o Neat uma escolha atraente para aqueles que já usam o Bourbon e o SASS. O Neat dá aos desenvolvedores acesso a um sistema de grade fluida que é rápido e fácil de configurar em minutos, mas flexível a ponto de mudanças e ajustes ilimitados não se tornarem um problema.

Grd

Grd é um sistema de grade CSS que usa Flexbox como ferramenta de back-end para criar layouts responsivos flexíveis e modernos. Usando a demonstração ao vivo, você pode brincar com as configurações e personalizações de design diferentes para ver se Grd poderia resolver seu problema de obter um elemento de design específico integrado em seu fluxo de trabalho existente. Achamos fácil criar cabeçalhos, rodapés e áreas de conteúdo geral usando nada além de uma lista suspensa de configurações.

ESTRUTURA

A estrutura, que também é baseada no Flexbox, usa padrões de sintaxe declarativos (semelhantes aos de Angular.js) para definir seções e parâmetros de layout. Alguns desenvolvedores reclamaram que a marcação final da página não pode ser validada, mas a ideia é que usando Estrutura você pode criar uma grade declarativa que não mexa com atributos CSS tradicionais, como classes e nomes de identificação.

960 Grid System

Centenas de milhares de sites usaram o 960 Grid System de Nathan Smith para potencializar seu layout de design. É uma ferramenta eficiente para agilizar o fluxo de trabalho de desenvolvedores da web que trabalham duro. Por meio da escolha de dois layouts de coluna diferentes (12 e 16 respectivamente), os desenvolvedores podem inicializar rapidamente uma página inicial que oferecerá suporte a qualquer tipo de entrada dinâmica e estática. É possível adicionar mais colunas, mas você precisará trabalhar com a documentação para entender o uso de forma mais clara.

Pouco semântico

Unsemantic é a versão posterior da grade 960 que fornece recursos de design responsivos completos. Por meio de classes pull exclusivas, os desenvolvedores podem reorganizar o layout da página que estão produzindo, o que pode ajudar a promover e exibir o conteúdo mais importante a qualquer momento, uma estratégia conhecida para ajudar os mecanismos de pesquisa a entender melhor o propósito de cada elemento de conteúdo. Unsemantic também é um usuário orgulhoso de Media Queries, portanto, desenvolvedores de front-end estabelecidos não terão dificuldade em personalizar esta estrutura de grade para suas próprias necessidades.

Grade Simples

Daí o nome, Simple Grid é para todos que buscam simplicidade e facilidade de uso. O layout é responsivo, compatível com smartphones, tablets e computadores desktop. Em outras palavras, o desempenho do seu projeto será excelente, sem sombra de dúvida. Ele está totalmente sintonizado com telas grandes e resoluções mais altas também. Além disso, o Simple Grid é apenas uma grade, sem nenhum ativo adicional, o que o torna muito leve. Com a conveniente estrutura de doze colunas, você tem a liberdade de criar o layout exatamente de sua preferência. Você pode dividi-lo em duas, três, quatro ou seis colunas perfeitamente.

csswizardry-grids

Com uma grade HTML, como grids csswizardry, você pode economizar tempo e energia. É uma ferramenta robusta que você pode utilizar para o conteúdo do seu coração com precisão. É muito amigável e facilmente estruturado, garantindo que os desenvolvedores da web de todos os níveis tirem o máximo proveito dele. Na captura de tela acima, você pode dar uma olhada em todas as diferentes variações que o csswizardry-grids suporta. Você pode reordenar as coisas livremente, para que corresponda aos seus desejos. Faça sua atividade evitando fazer coisas do zero com grades csswizardry agora e comece com o pé direito.

Grade Profunda

A liberdade que Profound Grid oferece vai além. Você pode empregar este sistema de grade flexível e extensível para layouts fixos e fluidos. O resultado funcionará em todos os dispositivos modernos sem problemas. Você pode criar a estrutura exata que deseja alterando, removendo ou adicionando colunas de acordo com sua preferência. Você pode verificar alguns dos exemplos primeiro para ver o que é possível com Profound Grid. Além disso, com as margens negativas ao calcular colunas, o Profound Grid garante que os layouts fluidos tenham a mesma aparência, independentemente do tamanho da tela e do navegador da web.

Grelha

Os benefícios de usar um sistema de grade são enormes, pois você não apenas economiza tempo, mas também não precisa se preocupar com detalhes técnicos. Por exemplo, o Griddle garante compatibilidade total com dispositivos populares e navegadores da web. Ou seja, o desempenho de seu aplicativo será de primeira classe em todos os momentos. Com o Griddle, você pode concretizar qualquer coisa, desde grades proporcionais e aninhadas até unidades centralizadas e híbridas. Quanto ao último, com alguma personalização, você pode combinar unidades fixas e fluidas em uma construção impressionante. Você tem controle sobre a centralização horizontal das unidades e pode até alterar o alinhamento vertical.

CSS Smart Grid

O CSS Smart Grid segue as últimas tendências e regulamentações para garantir a compatibilidade com diferentes dispositivos. Resumindo, a ferramenta é leve, ágil e móvel para você construir coisas épicas com ela. Seja usando um smartphone ou uma grande tela de desktop, o CSS Smart Grid garante que o layout funcione em ambos sem problemas. Para sua informação, mesmo que alguém use um feature phone para navegar na Internet, seu projeto baseado em CSS Smart Grid funcionará tão bem - com uma visualização de coluna única. No site oficial, você também tem um guia rápido, para que não tenha problemas ao usar a ferramenta.

Gridlex

Gridlex se destaca por seu design estelar e facilidade de uso. A simplicidade desta estrutura de grade baseada em Flexbox é surpreendente, a visão é simples - envolva suas colunas em sua grade e, se necessário, faça quaisquer ajustes adicionais para tornar seu design final irresistível. Só de olhar para as demonstrações de sites que usam Gridlex é evidente que este é um sistema de grade topo de linha e você não ficará desapontado com o que ele pode fazer por seus próprios projetos e fluxo de trabalho.

Sistema de grade responsivo

O Responsive Grid System tem muito a seu favor, o nome de domínio perfeito, uma visão clara e as ferramentas necessárias para tornar o design de grade responsivo uma brisa! O Grid Generator fornece uma entrada de formulário simples onde você pode especificar o número de colunas que gostaria de usar e a margem que gostaria de ver entre elas .. clique em enviar e você terá uma saída de código pronta para usar do seu próximo layout de grade responsivo. O autor, Graham, tem o prazer de fazer todo o trabalho duro para você, se assim o desejar, você pode entrar em contato com ele no rodapé da página.

Gridly

Os desenvolvedores construíram o Gridly como um sistema de layout de grade mínimo para suportar os navegadores mais modernos da atualidade. Sua estrutura leve ajuda os desenvolvedores a ter um tempo fácil para colocar um layout de grade / coluna em funcionamento e sem muito trabalho. No geral, o tamanho absurdamente mínimo desta biblioteca vai deixar você com vontade de ter mais projetos por vir.

Formstone

O Formstone não é um único sistema de grade gerenciado por si só; na verdade, é uma biblioteca para desenvolvedores front-end que precisam de componentes altamente personalizáveis ​​e elementos da web que constituem uma página da web tradicional que você encontra diariamente. Por ser uma biblioteca modular, ágil e automatizada - o Formstone pode ser usado não apenas com a finalidade de dimensionar um grande projeto de site da Web, mas também para o uso do próprio layout de grade.

Bootstrap

Onde estaria o Bootstrap hoje se não fosse por seu sistema de grade sobre o qual todo o resto foi construído? Ainda estamos esperando ansiosamente pela chegada do Bootstrap 4, mas enquanto isso ... você não pode resistir a dizer sim a um framework que conseguiu se estabelecer como um dos frameworks front-end mais proeminentes deste século. Milhões de sites são movidos pelos recursos do Bootstrap, mas nada disso seria possível se não fosse pela estrutura de grade que vem integrada ao núcleo do Bootstrap.

Fundação

Foundation é outra biblioteca de front-end de sucesso que oferece suporte a design responsivo, a versão mais recente (Foundation 6) traz para a mesa recursos e elementos ainda mais modernos que podem ajudar os desenvolvedores a fornecer a seus clientes designs incrivelmente versáteis. Os modelos fáceis de usar fornecidos pelo Foundation dão a você a chance de descansar um pouco de todo esse desenvolvimento de grade e, em vez disso, focar no que é importante - o que você vai colocar dentro da própria grade.

Esqueleto

Skeleton tem um design lindo e natural que vai te deixar com vontade de querer mais. Os criadores tiveram a ideia de Skeleton ser a melhor escolha para pequenos projetos. Além disso, você pode usá-lo em projetos nos quais não ache que usar uma estrutura completa seria apropriado. O Skeleton fornece o essencial de que você precisa para colocar um protótipo de site em funcionamento; um layout de grade, opções de tipografia para títulos e seções, elementos de botão para todas as suas necessidades de formulário e, na verdade, formulários personalizados para que você possa economizar tempo por ter que codificar seu próprio, uma boa adição de listas, tabelas e sintaxe de código e uma mídia questiona o framework para que seus designs se tornem totalmente responsivos!

Sistema de grade responsivo 2

O Responsive Grid System (versão 2) é um sistema de grade móvel com tamanho super pequeno, mas com estilo altamente eficaz. Você pode selecionar a partir de uma variedade de layouts de coluna (24, 16, 12). Você também pode personalizar as margens e preenchimentos entre as colunas e usar polyfills para criar um layout de design estelar.

Sistema de grade responsivo para seu próximo projeto

O sistema de grade responsivo para o seu próximo projeto usa as mesmas classes do sistema de grade 960. Ele foi desenvolvido para atender primeiro aos visitantes móveis e fornece um padrão para o gerenciamento de cabeçalhos. Os desenvolvedores testaram todos os navegadores modernos para que você esteja em boas mãos. Você pode usar isso como um sistema de grade base que o ajudará a construir um design web responsivo. Isso manterá sua proficiência existente sobre o sistema de grade popular.

HTML5 Boilerplate

HTML5 Boilerplate é uma robusta estrutura padrão (template) para desenvolvedores front-end. É para desenvolvedores que desejam dar o pontapé inicial em seus projetos sem o incômodo envolvido com estruturas maiores como Bootstrap ou Foundation.