O que é certo para mim? 22 frameworks CSS responsivos e Boilerplates explicados
As estruturas de CSS já existem há anos, mas a chegada de práticas de design responsivas tornou muitos de nossos favoritos antigos inúteis. Felizmente, muitos desenvolvedores realmente talentosos entraram em cena para preencher a lacuna com a próxima geração de estruturas CSS e clichês.
Já existe uma tonelada dessas coisas flutuando. Todo mundo tem uma lista, mas ninguém realmente mostra como cada estrutura e padrão diferem da seguinte para que você possa tomar uma decisão informada. Esse é o nosso objetivo hoje. Acompanhe enquanto analisamos o que torna cada uma dessas 22 estruturas CSS e modelos padronizados responsivos únicos.
Gumby
A estrutura Gumby pega a grade 960 na qual todos nós cortamos os dentes anos atrás e a traz para a era moderna do design da web com um toque responsivo. Ele também possui estilos predefinidos para formas como botões, botões, alternâncias, menus suspensos, guias e muito mais.
O sistema de grade semântica
Se você odeia sistemas de grade e sua marcação inchada e semântica, este é para você. O sistema de grade semântica aproveita o poder dos pré-processadores CSS (LESS, Sass e Stylus) para criar variáveis personalizáveis para itens como calha e largura da coluna. Tudo o que você precisa fazer é usar alguns mixins predefinidos no seu CSS, sem necessidade de marcação extra!
Sem grade
O Gridless é um poderoso clichê que usa o primeiro web design responsivo móvel para se adaptar à largura do dispositivo. Ele também possui ótimos recursos, como normalização de CSS, correções de erros do IE e estilos de tipografia.
Sem moldura
É difícil classificar o Frameless porque é tecnicamente mais uma maneira recomendada de abordar o design responsivo do que um conjunto real de arquivos que você pode baixar. Existem três etapas: primeiro, faça uma grade regular de largura fixa, depois repita infinitamente e termine centralizando-a na janela de exibição.
O site afirma especificamente que o Frameless não é uma estrutura e que não há arquivos para download, mas, apesar dessa alegação, existem alguns modelos básicos para ajudar você a começar.
Grades Proporcionais
As grades proporcionais abordam alguns grandes problemas que surgem ao tentar o layout CSS responsivo, como aninhar grades e lutar com valores baseados em porcentagem em diferentes visores diferentes.
As grades proporcionais usam o dimensionamento de caixa CSS para criar uma solução que permite calhas fixas (ems / rems) misturadas com colunas de fluido. A distância entre as colunas permanecerá igual em cada ponto de interrupção, em relação ao tamanho da fonte de base. As colunas são definidas por proporção, por exemplo, metade, um terço, dois terços e podem ser facilmente reutilizadas quantas vezes você quiser, mesmo quando aninhadas.
A abordagem Goldilocks
A abordagem Goldilocks visa reduzir a tendência de projetos responsivos a inclinar-se para o suporte de dispositivos específicos. Em vez disso, ele busca um design universal que não depende de nenhum dispositivo.
A abordagem Goldilocks usa uma combinação de ems, largura máxima, consultas de mídia e traduções de padrões para considerar três estados que permitem que seus projetos sejam independentes de resolução.
Twitter Bootstrap
O Twitter Bootstrap não precisa de introdução. É um dos maiores e mais ruins clichês CSS da Web e é o ponto de partida para inúmeros sites profissionais e pessoais de desenvolvedores em todo o mundo.
O Twitter Bootstrap inclui um sistema de grade responsivo, além de vários elementos estelares pré-estilizados, como formulários, botões, menus de navegação e muito mais. Confira nossa introdução completa aqui.
Fundação da ZURB
A Foundation é o concorrente mais significativo do Twitter Bootstrap, pois os dois projetos são muito semelhantes. Como o Bootstrap, o Foundation fornece uma grade responsiva, bem como vários elementos de interface do usuário com estilo.
O Foundation 3 acaba de ser lançado recentemente. Se você não vê o projeto há algum tempo, é hora de parar e conferir. É sem dúvida uma das estruturas mais úteis e completas que você encontrará em qualquer lugar.
Esqueleto
O Skeleton foi um dos primeiros boilerplates responsivos a aparecer, e ainda é um dos melhores. Em conceito, é um pouco como o Foundation, mas parece mais leve (tipo, botões e formulários são os únicos elementos da interface do usuário incluídos).
Confira nosso tutorial do Skeleton para ver como essa ferramenta é incrivelmente fácil para obter um design responsivo em funcionamento em minutos.
Amazium
O Amazium é muito parecido com Gumby acima, pois é uma grade responsiva construída sobre as 960 técnicas de grade da antiguidade. Recentemente, embora a estrutura tenha sido atualizada para estender até 1.200px, para que você possa tirar proveito de telas grandes. Inclusive inclui suporte para telas de retina!
Sistema Golden Grid
O Golden Grid System se autodenomina uma "grade dobrável", que é realmente uma maneira elegante de dizer que as consultas de mídia são usadas para recolher o layout original das dezesseis colunas em oito e quatro colunas à medida que a janela de visualização se estreita.
Como algumas das outras grades que vimos até agora, o Golden Grid System usa calhas baseadas em ems, para que as calhas sempre fiquem na proporção do conteúdo.
O sistema de grade CSS de 1140px
Este é um sistema de grade bastante padrão, sem nada sofisticado. Começa com uma grade de fluido de 12 colunas que usa calhas baseadas em porcentagem e funciona muito bem em monitores de 1.280 e 1.140px. À medida que a janela de exibição fica menor, algumas consultas simples de mídia são usadas para refluir o conteúdo.
StackLayout
O StackLayout é para os rebeldes, será muito diferente de outros frameworks que você tentou. De fato, surgiu da antipatia pelas estruturas de layout CSS típicas.
O princípio básico em ação aqui é que o StackLayout usa o bloco embutido como a pedra angular de um sistema de layout exclusivo. O sistema é um pouco peculiar, mas é bastante impressionante. Confira um passo a passo aqui.
SimpleGrid
O SimpleGrid é outro sistema de layout exclusivo que você apreciará se adora brincar com essas coisas tanto quanto eu. A grade aqui é baseada em quatro intervalos de tela diferentes: telas com largura abaixo de 720px, telas com largura superior a 720px, telas com largura superior a 985px e telas com largura superior a 1235px.
Para implementar o sistema, você utiliza classes de "slot" de um layout de quatro e seis colunas. Parece complicado, mas é realmente fiel ao seu nome e bastante simples de implementar.
Grade de Linha de Base Fluida
A Grade de Linha de Base Fluida é construída com uma forte ênfase em tipografia forte que adere a uma grade de linha de base. Ele também contém uma grade dobrável de três colunas que se destina a ser um ponto de partida útil, e não um padrão a ser seguido.
Colunar
Colunar é uma espécie de sistema de grade híbrida que empresta os melhores elementos de várias outras estruturas. Ele tem o DNA elástico do CSS Grid System de 1140px, com cerca de 960.gs também. É uma coisa bastante comum, mas se os outros não parecerem um bom ajuste, você pode experimentar.
Inuit.css
O Inuit.css é uma ótima estrutura que é realmente construída com a extensibilidade em mente. Use o construtor de grade personalizado para criar sua própria grade responsiva e faça o download de alguns iglus (plugins) para estender a estrutura de maneiras úteis.
320 e acima
O 320 e o Up são como uma coleção de palavras de efeito na web (em um bom sentido). Ele contém um sistema de layout responsivo que usa a mentalidade de "primeiro móvel", juntamente com os estilos visuais do Bootstrap, ícones Font Awesome, Modernizr, Selectivizr, LESS e Sass. É uma pequena caixa de ferramentas impressionante que eu acho que você vai gostar.
Susy: Redes responsivas para bússola
Este é para os super nerds como eu, que amam sistemas de layout, bem como Sass e Compass. Crie seus layouts em minutos com a magia de mixins e variáveis.
Dado que o Compass recentemente abandonou completamente o suporte nativo a grades, Susy deve ser útil para quem sente falta delas.
Initializr - Modelo HTML5 responsivo
Initializr é uma ferramenta que ajuda você a iniciar seus projetos HTML5 de maneira rápida e fácil usando o Boilerplate HTML5, o Bootstrap ou um novo boilerplate responsivo.
A seleção do modelo responsivo é apenas o começo. A partir daí, você cria seu download personalizado escolhendo entre todos os recursos que você normalmente deseja, como Modernizr e LESS.
Mais um clichê móvel
O YAMB é um excelente ponto de partida para seus projetos Web responsivos, baseados em alguns recursos-chave: uma grade fluida responsiva, menus de navegação suspensos que se transformam automaticamente em caixas de seleção em telas pequenas e imagens / apresentações de slides responsivas.
Eu acho que o site é muito feio, mas o conjunto de ferramentas em si é bastante útil!
Wirefy
O Wirefy é construído especificamente com a experimentação rápida de estrutura de arame responsiva em mente. Ele usa uma versão modificada da grade da dezesseis colunas 960, juntamente com alguns elementos da interface do usuário do tipo Bootstrap (menus, formulários, apresentações de slides, botões, imagens etc.).
Qual é seu favorito?
Inevitavelmente, esses tipos de postagens atrairão comentaristas que sentem a necessidade de tentar desacreditar toda a noção de uso de qualquer tipo de modelo ou sistema de grade para web design. Eles simplesmente não são para todos e eu respeito sua opinião se você não aguenta.
Se você gosta de sistemas de grade, adoraria ouvir seus comentários sobre as opções acima. Quais você já tentou e o que achou deles? Qual é seu favorito?
