10 melhores sistemas de grade CSS responsivos para seus projetos da web

10 melhores sistemas de grade CSS responsivos para seus projetos da web

1. Esqueleto

Skeleton é uma coleção de arquivos CSS para web designers que precisam produzir rapidamente layouts de grade responsivos. Mais do que apenas um sistema de grade, o Skeleton também oferece alguns recursos básicos para lidar com tarefas comuns de layout da Web, como uma redefinição de CSS para normalizar seu CSS.

2. Limpo

O objetivo principal da estrutura de grade Neat é promover uma marcação HTML semântica limpa usando mixins Sass para evitar o excesso de classes de apresentação e divelementos de encapsulamento. Comece com o Neat lendo seus documentos e estudando alguns exemplos .

3. Grade Simples

Se você é um minimalista, o Simple Grid é um sistema para verificar, pois visa fornecer o mínimo necessário para criar um layout de grade CSS responsivo. Além disso, 1140px é a largura base do Simple Grid, não o mais comum 1024px, porque o criador do Simple Grid acredita que superamos essa convenção.

4. csswizardry-grids

A abordagem desse sistema de grade responsivo é projetar layouts da Web para dispositivos móveis primeiro . Semelhante à filosofia Neat discutida anteriormente, se você está preocupado em preencher sua marcação com uma superabundância de classes CSS de apresentação, então você tem a opção de usar o @extendrecurso do Sass com csswizardry-grids.

5. Grade Profunda

Um dos recursos exclusivos do Profound Grid é que ele é preciso na renderização de seus layouts de grade fluida em todos os navegadores que ele suporta. Como esse sistema de grade CSS responsivo alcança tal feito? Usando margens negativas para calcular as dimensões da coluna.

6. Chapa

Griddle é para web designers e sites que colocam o foco em navegadores modernos . Este sistema de grade CSS é gerado usando funções e mixins Sass. Ele aproveita os poderes do CSS inline-blocke das box-sizingpropriedades, o que dá aos seus layouts algumas novas habilidades que os layouts tradicionais baseados em float não podem fornecer a você.

7. Grades responsivas de força extra

Se você acha que outros sistemas de grade CSS são muito restritivos, se sua prioridade é o controle máximo sobre como seu layout responsivo se adapta à tela de visualização do usuário, se você se preocupa com classes CSS bem nomeadas em sua marcação, você precisa olhar para Extra Grades responsivas de força.

8. Grades proporcionais

Esta solução de grade CSS resolve o problema que muitas vezes surge quando redimensionamos nossos layouts; tamanhos desproporcionais de calhas entre diferentes situações de visualização. Grades proporcionais permite que você use unidades de medida fixas para suas calhas, enquanto ainda pode ter colunas de fluido.

9. Grade Simples Morta

Esta grade CSS é leve com apenas 250 bytes. Se você quer apenas uma grade responsiva descomplicada e nada mais, e se você se preocupa muito com o desempenho da web de front-end, esse pequeno framework de grade, que possui apenas duas classes CSS, é o ingresso para suas necessidades.

10. Sistema de grade responsivo

O Responsive Grid System oferece um pouco mais de flexibilidade em comparação com outros sistemas de grade CSS, pois oferece a opção de usar qualquer número de colunas que você precisar. Diga adeus aos sistemas de grade de 12 ou 16 colunas restritivamente ditatoriais se você seguir esse caminho.

Artigos Modelo Bahia De Gestão

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *