Nós todos começamos em algum lugar. Como um novo designer, eu não poderia me importar menos com estrutura em meus projetos. Eu abria o Photoshop e empurrava os pixels até que eu fiz algo que eu achava legal. Quando aprendi a codificar, meu processo foi similarmente aleatório.
Eu não olho para os velhos tempos com muito carinho. Meu trabalho foi desleixado e fora de foco. Eu não tinha objetivos claros. Como um começo, eu suponho que não é tão ruim, considerando que a maior parte da minha educação em design veio de sites de tutoriais do Photoshop, meu trabalho não foi terrível.
Mas então aprendi sobre sistemas de grade. Eu esqueci exatamente quando e como eles se tornaram popularmente usados em web design, mas de repente, todo site relacionado ao design da web que eu fui estava repleto de artigos sobre 960.gs, ou algum outro sistema de grade. A importância de fornecer uma estrutura visual consistente em nossos layouts foi enfatizada por todos os grandes nomes e se transformou em uma tendência.
Tão rapidamente a tendência se tornou um padrão da indústria, e agora a maioria de nós não pensa duas vezes se vamos ou não implementar um sistema de grade. A única questão é qual deles? Iremos com um dos grandes nomes ou uma variante menos conhecida, ou até mesmo fazer o nosso próprio?
Neste artigo, gostaria de dar uma olhada na segunda opção: sistemas de grade novos e menos conhecidos. Há sempre alguém com novas maneiras de resolver os vários problemas de layout, e eu acho que é importante estar familiarizado com o maior número possível de abordagens, então vamos ver alguns frameworks básicos de grid.
34Grid é tudo sobre distribuição de coluna igual. Ele também pode acomodar distribuições desiguais, mas esse não é o objetivo principal desse sistema de grade. Para aqueles de vocês que querem dividir a maioria ou todas as suas páginas em porções horizontalmente iguais, esta é a sua estrutura.
Como funciona
O framework é projetado para ser adaptável às suas necessidades, então você não apenas faz o download e vai. Você precisa configurar sua grade na primeira página do projeto. Um formulário rápido permite determinar quantas colunas caberão em uma linha, qual será o tamanho de suas margens e se aplicará ou não as transições CSS3 às suas colunas quando a viewport mudar de tamanho.
O código em si é dividido em dois arquivos CSS: um com o código base e outro com todas as consultas de mídia. As classes CSS são simples. Aplicar '.col_1' a uma coluna preencherá a linha para 100%. '.col_2' criará uma coluna com largura de 50% e assim por diante.
Além disso img elementos, objetos e alguns outros são automaticamente redimensionados. Existe uma classe extra para ajudar os objetos de vídeo a se comportarem. O site do projeto fornece conselhos sobre como fazer com que o Facebook e o Twitter funcionem de maneira agradável.
Desvantagens
Não parece haver nenhuma maneira de aninhar colunas ou criar arranjos de coluna mais complexos em uma única linha. Por outro lado, se você não precisar de complexidade e quiser apenas um framework simples que possa ser ajustado sempre que precisar, o 34Grid fará o trabalho.
Grade Simples é uma opção responsiva que maximiza a largura de 1140 pixels. Em outras palavras, embora seja projetado para funcionar bem com tablets e telefones, o Simple Grid garante que as telas maiores não sejam deixadas de fora.
Como funciona
Como o nome sugere, este sistema de grade é bastante leve. A coisa toda vem em um arquivo CSS descompactado de quatro kilobytes.
Os nomes de classe são projetados para serem facilmente compreendidos: '.col-2-6' dividirá a linha em seis colunas e definirá a largura da coluna para duas colunas de largura. Cada linha pode ser dividida em uma coluna, '.col-1-1', ou dois, três, quatro, etc. até doze.
Desvantagens
Como 34Grid, parece não haver nenhuma provisão feita para colunas de aninhamento. Além disso, a forma como as margens são tratadas para a primeira e a última colunas pode causar dificuldades ao criar, por exemplo, uma galeria de fotos.
Este é para qualquer pessoa que prefira uma grade simples com nomes de classe em inglês simples. É responsivo, de fácil compreensão e implementado rapidamente.
Como funciona
Depois que os seus elementos usuais '.container' e '.grid' são colocados em prática, as colunas são implementadas da maneira antiga. Uma classe ('.unit') é usada para definir os atributos gerais de uma coluna, e outra classe é usada para definir a largura. As linhas podem ser divididas em 2-5 colunas, e os nomes das classes são parecidos com os seguintes: '.um-of-three, .odwo-of-three'.
Também estão incluídos alguns estilos tipográficos básicos.
Desvantagens
Mais uma vez, este é um framework de grade destinado a layouts descomplicados, portanto, não há provisão para colunas aninhadas. Além disso, há apenas um ponto de interrupção, definido em uma largura de visualização de 650 pixels, de modo que algumas de suas colunas podem acabar prematuramente bastante amplas.
Matt (AKA Boon ) é um pouco como eu. Ele adora design, mas não gosta muito de matemática. Como resultado, Grades Proporcionais parecem acabar com cálculos intermináveis, tanto quanto possível, dependendo da box-sizing propriedade. O resultado é um sistema de grade completo, mas ainda bastante leve, que cobre suas bases para o layout responsivo.
Como funciona
Quando digo que este sistema depende box-sizing , Quero dizer que as colunas recebem porcentagens de largura sem contabilizar as calhas. As calhas de largura fixa são definidas por padding ; e box-sizing garante que as colunas funcionem bem juntas.
As larguras da calha e a maioria das outras medições são definidas com “ems”. Fiel ao nome dessa grade, as classes de coluna são proporcionais (ou seja, .col-one-third , .col-two-thirds ), e colunas são mais ou menos infinitamente aninhadas, o que é algo que eu gosto muito.
As classes são incluídas para alterar as dimensões da coluna em três pontos de quebra diferentes. As próprias consultas de mídia são estruturadas de acordo com a forma “mobile-first”, de acordo com as práticas padrão.
Há uma folha de estilo separada para o Internet Explorer 8 e mais antiga. Visto que o IE8 não suporta consultas de mídia, e versões mais antigas que não suportam box-sizing , eles são fornecidos com um layout de largura fixa.
Também estão incluídos arquivos SASS (ambos .sass e .scss) para personalização rápida e fácil do sistema de grade.
Desvantagens
Eu não me importaria de ter mais larguras de colunas para trabalhar (quintos, sextos, oitavos). Caso contrário, este é um sistema de grade amplamente livre de erros e bem arredondado.
Dos sistemas de grade avançados nesta lista, 1% é o mais simples, mas não é de modo algum incompleto. Ele foi projetado para acomodar telas um pouco maiores e grandes elementos da interface do usuário, caso sua página inicial seja uma indicação.
O nome vem do fato de que a largura da grade e da coluna é calculada de modo que sempre seja igual a 99%, em vez de 100%. Isso elimina a necessidade de alguns decimais de repetição mais complexos e arredondamento de numeração que os navegadores normalmente são forçados a fazer.
Como funciona
A grade em si é dividida nas doze colunas clássicas. As aulas são simples ( .onerow , .col1 , .col6 ), e eu gosto que você, principalmente, use apenas uma classe por coluna.
Dois pontos de interrupção são incluídos por padrão: 768 pixels e 1024 pixels. Se eu for sincero, o primeiro parece um pouco… grande… mas você pode sempre adicionar outro ponto de quebra se precisar de um. Dois exemplos de largura do layout da área de trabalho também são fornecidos: 1000 pixels e 1200 pixels.
Na home page de projetos, você pode baixar arquivos de ação do Photoshop e PSDs adequados para criar seus layouts com este sistema de grade.
Desvantagens
Meus dois grandes problemas aqui são os mais comuns. Primeiro: sem colunas aninhadas. Colunas de aninhamento são boas pessoas! Segundo: A última coluna em cada linha precisa ter o .last classe aplicada a ele.
Uma estrutura de grade CSS entre navegadores que não oculta pixels nas margens! Esse é o slogan para Flurido e uma rápida olhada na documentação lhe dirá o porquê: O criador do Flurid realmente não quer que seu layout seja quebrado. Sempre.
Aqui está a coisa, por causa do modo como o sub-pixel rounding funciona, um navegador ocasionalmente dirá “estrague” e coloque a última coluna na linha em algum lugar que não deveria ir. Flurid é construído para estabilidade, para que seu layout sempre funcione, mesmo em versões mais antigas do IE. (Compatibilidade está listada como IE5 +.)
Como funciona
Flurid tem todos os recursos que você precisa: colunas regulares, colunas mistas, colunas aninhadas e colunas deslocadas. A lista de larguras e classes de colunas possíveis é extensa e baseada em rácio, pelo que terá de se dar tempo para se familiarizar com elas.
Alguma documentação razoavelmente completa é fornecida via GitHub, assim como um plugin jQuery que adiciona recursos extras - sim, vem com seu próprio plugin jQuery, que fornece colunas de altura iguais, e pode colocar classes alternadas em suas colunas, para seu prazer de estilo.
Desvantagens
É tão chato .last classe novamente. Ainda assim, de acordo com a documentação, há uma boa razão para isso desta vez.