Melhore seu Layout com Grid 960

Quer aprender mais sobre Grid 960 e dar mais qualidade visual ao seu projeto Web? Faça um CURSO GRÁTIS DE GRID  960 com a gente!

Ao começarem a trabalhar em algum projeto web, os designers se preocupam em como dispor os elementos visuais dentro de uma página. O alinhamento destes objetos é muito importante para tornar o projeto atraente, e demanda muito tempo para que fiquem impecáveis.

Existe um sistema chamado Grid 960, que ajuda na elaboração do Layout, dividindo uma tela de 960 pixels em colunas, para que sirvam de guia para a disposição do conteúdo do website, e também gerar o código CSS destes blocos para que seu projeto não tenha problemas em ser exibido em browsers diferentes.

Este framework, é muito útil, porém, ainda é motivo de discussão entre os designers. Alguns acham perfeito, pois a largura, bordas e espaçamento entre as colunas são baseados em cálculos matemáticos indiscutíveis, por outro lado, alguns acham que as Grids limitam a criatividade do artistas, fazendo com que eles tenham uma área pré-definida para poder trabalhar.

Enfim, leia o texto abaixo, entenda um pouco mais sobre Grid 960, tente aplicar em algum projeto web próprio e tire suas próprias conclusões.

Texto original: (http://www.webdesignerdepot.com/2011/03/web-culture-grid-based-layout-designs/)

Cultura Web : Design do Layout baseado em Grid

A semântica web tem interposto uma nova geração de tecnologia de Internet. Como designers e desenvolvedores trabalham juntos para redefinir as regras da web, o número de projetos open-source e APIs de terceiros continuam a crescer.

As opiniões dos estudiosos da web divergem sobre o uso de sistemas de Grid . Muitos argumentam que o estabelecimento de pontos de Grid limita a criatividade dos designers. Outros afirmam que uma Grid fornece uma base científica para o design ser aperfeiçoado.

Ambos os lados oferecem argumentos interessantes. Essas ideias tornaram-se parte de uma cultura web única caracterizada por regras de design influentes e projetos open-source.

A Grid não é uma chave mestra para um design perfeito. No entanto, a matemática tem provado que as especificações de design corretas, oferecem uma melhor relação entre elementos de página e layouts. Se você já ouviu falar algo sobre isso antes, você pode estar familiarizado com as muitas opções de layouts baseadas em Grids que os designers oferecem.

Uma comparação com a Web Clássica

Gerações mais velhas usaram o design como um mecanismo de controle. Seus designs apresentavam informação precisa e de uma forma que fosse fácil de gerenciar. Isto ainda é verdade hoje, mas esses princípios obsoletos de design estão sendo arrancados.

Em seu rastro, uma nova cultura web está se mexendo. Uma cultura de padrões e protocolos abertos, o código fonte livremente compartilhado e poderosas plataformas sendo executadas por programadores em todo o mundo.

Uma das razões para este desenvolvimento é o aumento significativo no número de pessoas que trabalham na  semântica web. A causa subjacente deriva do impulso humano para contribuir para algo mais do que para nós mesmos.

Trabalhar para um dia de pagamento é satisfatório, mas não algo apaixonante. Desenvolvedores que realmente se preocupam com novos padrões, querem deixar sua marca.

Onde as Grids evoluíram

Não tem havido um grande estudo comparando os prés e pós padrões de técnicas de web design. Somos capazes de rastrear, no entanto, como as Grids se tornaram mais populares ao longo do tempo.

O sistema de Grid é baseado nas tendências tecnológicas e nos avanços atuais. Isto inclui estatísticas sobre o número de pessoas que acessam a Internet em um determinado momento, os dispositivos que usam para acessar a Internet e as resoluções de tela e sistemas operacionais de seus dispositivos.

Sistemas de Grid proporcionam um equilíbrio estrutural para layouts de website. Eles fornecem medições consistentes e permitem flexibilidade entre frameworks.

No final de 1990, poucas máquinas domésticas utilizavam uma resolução superior a 800 × 600, e muito menos passavam de 1024 × 768. Nos últimos 20 anos, complicados e complexos OSes têm sido desenvolvidos para exibir resoluções muito mais elevadas. 1024 × 768 é uma configuração comum nestes dias.

As resoluções de monitor estão crescendo exponencialmente, e essa tendência não parece estar diminuindo. Confira a tabela de dados de Estatísticas e Tendências Web, estes detalhes de resolução de tela são medidas via W3Schools.

Desenho do visual de uma Grid

Todas as páginas web são baseadas em Grids, o designer pode estar consciente disso ou não. O trabalho digital é composto de pixels e, como tal, em conformidade com um conjunto de largura e altura, além de produzir efeitos artísticos visuais com espaçamento e distância entre pontos.

Em vez de pintar no escuro, por assim dizer, você é capaz de usar Grids para dar uma luz sobre o projeto. As Grids se tornaram populares com o surgimento do Adobe Photoshop como ferramenta para web designers.

Tutoriais em torno da web apresentam maneiras de visualizar e implementar linhas de Grid ao criar modelos, logotipos, imagens, ícones e outras artes digitais.

Ao longo do tempo, os desenvolvedores focaram nisto e começaram a implementar sistemas em seu próprio trabalho. Criar um layout baseado em Grid no Photoshop é muito diferente do que criar o mesmo layout em HTML e CSS.

O trabalho exigido para cada caminho é muito diferente, mas o sistema de Grid em si é universal. Como padrões abertos mudam, a cultura de design atual está se movendo em direção a estruturas baseadas em Grids.

Regras Básicas de HTML e CSS

Grids usam algumas das propriedades mais comuns de páginas web em HTML. Layouts de Grid para HTML geram o mesmo modelo universal de cada vez.

A estrutura começa contendo uma região larga o suficiente para conter todas as colunas. Dentro da divisão desta região deve haver um conjunto de subdivisões. O número de subdivisões deve ser o mesmo que o número de colunas que você precisa.

Para um layout de duas colunas, você pode ter duas divisões, classificada como .esquerdo e .direito . Todas as suas colunas internas devem ter a sua propriedade CSS float definida para a esquerda ou direita, enquanto a região deve conter uma classe clearfix.

Para ter uma ideia de código HTML, você pode experimentar um gerador de layout de Grid dinâmico. A popular solução a partir da coluna da Página oferece uma grande estrutura e suporta layouts para multi-colunas. Todo HTML e CSS são gerados instantaneamente e passam por testes de conformidade com padrões.

Acabando com o Padding

Colunas e margens, são partes integrantes de qualquer sistema de Grid. Peças de conteúdo que são formatadas ao lado de outra precisam de espaço entre elas, o que poderia causar uma expansão artificial do layout, resultando em páginas quebradas.

Criar por criar uma definição de espaçamento em áreas, gera um layout cheio de conteúdo fictício. Coloque suas colunas em uma página e de a elas um pixel de contorno com o uso de cores diversas. Isto proporciona uma representação exata do que seu projeto será semelhante, descrevendo parte de cada área de conteúdo.

Essa técnica funciona tanto com layouts fixos e dinâmicos, fazendo a integração com frameworks de Grids atuais ser muito mais fácil.

As margens também não precisam seguir uma estrutura definida. Você pode estar disposto a sacrificar a área de conteúdo para aumentar o espaço entre uma divisão de duas colunas. Frameworks open-source são maleáveis e permitem você editar os estilos diretamente ou até mesmo implementar o seu próprio para substituir as regras e definir propriedades.

Propriedades CSS para Layout de Grid

As propriedades de layout-grid é uma antiga especificação CSS adotada pela Microsoft. Está escrito em taquigrafia para definir uma infinidade de propriedades da Grid. Elas são citadas especificamente: layout-grid-mode, layout-grid-type, layout-grid-line, layout-grid-char e layout-grid-char-spacing.

Cada uma destas pode ser definida como sua própria propriedade e pode ser escrita sem o abrangente layout-grid. Aqui está uma pequena lista explicando cada uma:

• Layout-grid-mode
  Controla qual o tipo ou modo de layout da Grid é utilizado. Os valores possíveis incluem none para nenhuma Grid, inline para elementos da Grid em linha, char para caracteres e bloquear elementos da linha, e both para todo suporte em volta.
• Layout-grid-type
  Controla quais Grids são usadas para processar a tipografia da página e elementos internos de texto. Pares de valores são : loose que é usada para o texto chinês e coreano, strict  que é usada para caracteres japoneses e fixed que é usada para aplicar espaçamento único, distância igual entre os caracteres, independentemente da linguagem.
• Layout-grid-line
  Controla o comprimento da Grid quando o layout-grid-mode está definido como line ou both. Esta propriedade se comporta semelhante ao line-height e pode receber valores numéricos em conjunto cm, px, pt, em ou porcentagens.
• Layout-grid-char
  Controla o tamanho dos caracteres da Grid para elementos de texto como conteúdo quando layout-grid-mode está definido como line ou both . Os valores aceitos desta propriedade são os mesmos acima e afetam diretamente a altura da linha da página. A diferença é que layout-grid-line afeta a Grid da página, enquanto layout-grid-char afeta o texto e espaçamento entre caracteres da Grid.
• Layout-grid-char-spacing
  Controla o espaçamento entre caracteres quando layout-grid-mode está definido como char ou both e a propriedade layout-grid-type é definida como loose . Esta propriedade se comporta como line-height e deve ser usada para áreas de nível de bloco de texto.

O propósito de criar estas propriedades é adaptar layouts das Grids para páginas codificadas em Asiático. Os caracteres em idiomas asiáticos frequentemente exigem layouts de página personalizados.

Quando visto em outros países, esses caracteres poderiam se comportar estranhamente e quebrar os cálculos da sua Grid. Estas propriedades únicas permitem uma melhor formatação visual, utilizando uma ou duas dimensões no sistema de Grid.

Harmonia em Página vertical

Muitos artistas gráficos irão debater a importância do espaçamento vertical no design da Grid. Linhas de Grid suportam design de layouts horizontais e alinham verticalmente elementos e a tipografia da página. Quatro propriedades importantes manipulam o espaçamento vertical: font-size, line-height, top-margin, bottom-margin e padding.

A altura da linha é o maior fator de espaçamento vertical. O texto da página é escalado pela forma como letras grandes aparecem individualmente e pela quantidade de espaço exigido entre linhas. Geralmente, a altura da linha é definida em pixels ou ems, dependendo do quanto o layout é flexível. Ems mantém a consistência tipográfica em todas as resoluções e browsers. A melhor abordagem é a aplicação de estilos de fonte para todos os principais elementos HTML, incluindo headings, blockquotes e paragraphs.

A harmonia vertical pode ser retocada uma vez que o lugar da Grid for definida, fazendo escala para diferentes ambientes simples. Usuários de desktops terão uma experiência muito diferente do que usuários de laptops e celulares, que estão lidando com resoluções muito menor.

Você não pode planejar o alinhamento vertical com precisão exata, mas na maioria dos casos um palpite irá produzir resultados de qualidade.

A Regra dos Terços

Divida um desenho em três espaços horizontais e verticais. Isto irá criar uma Grid de nove retângulos aninhados nos blocos recém-criados. É muito mais fácil trabalhar com projetos que são divididos em áreas com pontos de bloqueio finitos.

A ciência por trás dessa tendência vem da “proporção divina”, também conhecida como a “razão divina”. A proporção de 1,618, que é a proporção divina, é uma constante matemática. Quando dividimos qualquer layout de tamanho fixo para este valor, podemos calcular a divisão mais precisa para uma estrutura de duas colunas.

Tome como exemplo um layout de 960 pixels. Se dividirmos 960 por 1,618, obtemos aproximadamente 593. De acordo com a proporção divina, então, devemos definir a nossa coluna de comprimento primário para 593 pixels. Este método retorna a artistas de séculos atrás. Felizmente, com a disseminação de frameworks open-source, a maior parte dos cálculos matemáticos já foram feitos.

Construção de um Retângulo Áureo

Esta teoria para a criação de belos layouts retangulares baseados em Grid é baseado na Regra dos Terços. Retângulos divididos são geometricamente comparados com a razão áurea. Valores numéricos para a largura e altura do retângulo são proporcionais à razão áurea.

Estes tipos de retângulos são conhecidos como “retângulos áureos”. O lado mais curto e mais longo deve manter os valores das variáveis a e b, respectivamente.

Estes retângulos são úteis para criar layouts de página: eles medem o quão grande devem ser os blocos de elementos. Eles são extremamente fáceis de calcular, e as ferramentas mais populares para muitos frameworks de Grid são construídas dentro deles.

Estes elementos são muito benéficos para web designers que usam Grids matemáticas. Imagine múltiplos cenários em que um retângulo áureo cuidadosamente estruturado iria melhorar a estética de uma página. Isto poderia incluir widgets de página, imagens de produtos para e-commerce e até mesmo de tabelas com conteúdo farto.

Iniciando com 960gs

Com todas essas informações disponíveis ao público, os web designers começaram a definir seus próprios padrões.

De todos os frameworks, o 960 Grid System(960gs) é provavelmente o mais conhecido. Isto não quer dizer que ele seja o melhor sistema de Grid (nenhum sistema de Grid se encaixa perfeitamente à todos os critérios) mas é fácil trabalhar com ele. 960gs é adaptável e funciona bem com qualquer website. E se dispõe bem na maioria dos navegadores e dispositivos.

A matemática inclui 12 colunas de 60 pixels cada, juntamente com uma margem de 10 pixels de cada lado, produzindo uma margem de 20 pixel. A maioria dos frameworks de Grid são baseados entre 12 a 24 colunas. Claro, você não espera incorporar 12 colunas em seu layout.

Eventualmente, você irá combinar as colunas e margens em uma unidade de Grid única. A publicação de conteúdo é muito mais fácil quando você pode elaborar detalhes específicos para imagens, widgets, vídeos e outros elementos da página.

Grid 960 tem atraído tanta publicidade porque ela se adapta bem à web. Muitas resoluções de tela podem exibir um site de 960 pixels sem uma barra de rolagem horizontal. Cada vez mais, layouts estão se adaptando a essa proporção, indicando que este é o futuro da web. Uma largura extra não tira o design e expandir ou contrair um modelo é inteiramente possível.

Compreendendo um Layout 960

Só assim muitas colunas podem proporcionalmente se encaixar em um design. A Grid não é para trancá-lo em uma mentalidade limitada. As Grids são guias a seguir: elas aumentam a interatividade do usuário e localização de elementos de página.

A Grid mais larga que você poderia criar numa área de conteúdo é 940 pixels com 20-pixel de margem. O uso da Grid é tolo, mas é bom para entender as possibilidades. Layouts de duas colunas são bem simples e oferecem muito espaço para o conteúdo. Exemplos comuns incluem:

• 780 x 140,
• 700 x 220,
• 620 x 300.

Note que todos estes somam 920. A perda de 40 pixel pode ser atribuída a margens em cada “bloco” do layout. Estes espaços mantém os usuários focados e permitem que o conteúdo seja distribuído sem problemas. Com elementos de conteúdo divididos, temos margens dos lados e entre os blocos, cada um responsável por 10 dos 40 pixels.

Estes espaços aumentam à medida que você adicionar novos blocos para o layout. Um projeto de três colunas tem ligeiramente menos espaço para conteúdo do que um projeto de duas colunas.

Se este conceito ainda é confuso, veja a imagem acima. A maneira mais simples de trabalhar com Grids é a concepção de uma folha de referência semelhante ao gráfico acima, com todas as possíveis quebras de blocos de conteúdo. Com esta informação, misture e combine estilos para determinar o tipo de design que melhor se adequa ao seu projeto.

Por exemplo, dizer que nós queremos criar um modelo com três colunas e com área de conteúdo o mais larga possível. Com a imagem acima, podemos dividir a nossa área de conteúdo em duas partes: uma cheia de conteúdo, mas dividida ao meio para conter duas colunas. Isso exigiria um bloco de conteúdo de 450 pixels e duas colunas de 210 pixel.

Novamente, essas Grids não são destinadas a limitar a criatividade. Elas permitem a flexibilidade, mas mantém a sua estrutura de back-end segura. A maioria dos designers não irá discutir sobre a ciência de tudo isso. A quantidade de tempo que esses sistemas open-source otimizam em um projeto é extraordinário, a facilidade vale a pena, através da documentação e implementação de seu próprio layout.

Layouts de Grid dinâmico

Não é comum ver Grids presas a layouts dinâmicos. Pixels são a unidade de medida mais precisa de um site. Para converter em uma medição tal como porcentagens ou ems exigiria uma análise cuidadosa. Tal layouts são possíveis com algumas mudanças e seletores de CSS adicionais.

Fluid 960 Grid System é bem conhecido, embora a maioria do código não é acessível para versões mais antigas do Internet Explorer. Através da prototipagem interativa e trabalhando com inúmeras resoluções de tela, você pode escalar um projeto de 960 pixels em muitas resoluções de tela.

Este framework aberto não é uma cópia exata do 960gs, e ele vem com uma nova documentação. Se você estiver interessado, confira o repositório GitHub para discussões do fórum ativo e sessões Q&A arquivadas.

Como o resto da comunidade de web design, provavelmente você está desejando algo mais estável. Alguns frameworks geram layouts surpreendentes.

YAML Grid Layouts

Yet Another Multicolumn Layout (YAML) é um dos frameworks para CSS mais populares. Ele contém uma extensa base de código para manipulação flexível de XHTML e layouts CSS. É constantemente atualizado pelos desenvolvedores ativos da comunidade.

O framework é extremamente versátil, oferecendo inúmeros exemplos práticos com o código. A menor largura fixa do layout corresponde a 740 pixels, apropriado para resoluções de tela de 800 × 600. A largura máxima de resoluções é definida a 80 em, oferecendo escalabilidade entre navegação móvel e desktop.

Conforme as fontes padrões da web, cerca de 75% dos layouts estarão de acordo com um máximo de 960 pixels, embora isso possa ser substituído.

Muitos dos bugs encontrados em navegadores mais antigos foram corrigidos. YAML suporta Google Chrome, Mozilla Firefox, Safari e todas as versões do Internet Explorer 5 +. Veja a visão geral de recursos do framework  para informações mais detalhadas.

Biblioteca de Interface de Usuário Yahoo!

YUI é um conjunto de bibliotecas JavaScript e CSS disponibilizado pelo Yahoo. A maior parte do código do projeto e correções de bugs foram escritos por desenvolvedores profissionais da comunidade YUI. A revisão mais atual é YUI2, embora YUI3 API docs tenha sido  liberada para v3.1.1.

A home page YUI2 tem links que levam a projetos mais populares. Em relação ao back-end, são quatro frameworks influentes listados em “Ferramentas YUI2 CSS”: Reset CSS, Base, Fontes e Grids. Este artigo está preocupado com CSS Grids, embora muitos destes outros frameworks têm sido referidos.

O arquivo de download é de apenas 4 KB e oferece mais de 1000 layouts exclusivos de páginas web . Configurações embutidas permitem ambos os tamanhos de largura do layout, dinâmicos e fixos. As colunas são auto-editáveis, por isso se você estiver utilizando duas ou quatro formas de divisão, o conteúdo do rodapé permanecerá sempre sob o conteúdo principal.

Propriedades tipográficas são atreladas juntas para flexibilidade do usuário e ajustes específicos. Muitos recursos básicos são tomados de cuidados, o que torna o trabalho em YUI2 tão bom.

O framework para Grids CSS oferece um pequeno número de layouts baseados em mobiles. Estes executam corretamente somente em navegadores com uma versão relativamente nova do mecanismo Webkit. Isto inclui smartphones com dispositivos Android, o iPhone, BlackBerry e muitos dispositivos Windows Mobile.

A integração é boa, mas essa nova mídia não foi testada exaustivamente e ainda pode ser visualizada indevidamente em alguns dispositivos móveis. Mas no final do dia, vale a pena o aborrecimento, pois a maioria dos visitantes móveis que estão dispostos a ler o conteúdo do seu site possui provavelmente smartphone.

A evolução da Cultura Web

Os Web designers tornaram-se bastante enfáticos sobre sistemas abertos e regras. A web no início não era tanto uma comunidade como um todo. Havia padrões HTML e CSS, mas a mentalidade por trás da maioria dos layouts era “o que funcionar.” Depois de desenvolvimentos significativos em tecnologia web, a Internet tornou-se o melhor meio de publicação mundial.

Web designers e desenvolvedores pretendiam simplificar o processo de criação de websites, sem tirar a qualidade ou a experiência de um website. A Grid é um instrumento harmonioso em que ela dá aos designs uma ordem e estrutura. Caos e criação aleatória não costumam produzir resultados.

É por isso que projetos de Grids são tão acessíveis. A web foi reformulada em um sistema de desenvolvimento ágil. Layouts baseados em Grid produzem websites estáveis: não é nenhuma surpresa que a comunidade tenha adotado frameworks como prática comum.

Em vez de depender de métodos mais antigos e não confiáveis, o web designer hoje, pode se concentrar na criação de websites que são agradáveis aos usuários, ao invés de coordenar a criação de pixel perfeito.

Hoje, os designers são muito mais jovens e mantém maior paixão pelo design do que nunca. Isso, juntamente com o movimento de web aberta, significa que um novo fluxo de códigos web está constantemente  sendo divulgado ao público. Repositórios GitHub oferecem oportunidades de networking com outros desenvolvedores CSS.

Desenvolvimento de um framework personalizado para Grid

Designers têm criticado muitos frameworks abertos como sendo demasiadamente complexos. Muitos são rotulados como confusos, com muitas classes e regras para se trabalhar. Isso pode ser verdade para alguns, e eu certamente não desacredito destas observações.

Em última análise, o projeto mais flexível, o melhor. Artistas procuraram  ferramentas que tornassem seu trabalho mais fácil. Frameworks não são adequados para todos os projetos. Desenvolver  frameworks para projetos web menores poupará tempo a longo prazo. No entanto, considere os sistemas CSS mais como uma ferramenta de aprendizagem do que um ambiente de produção.

Grids podem ser confusas no início, não há dúvida sobre isso. Tendo um framework de referência e documentação acessível para checar todo o processo vai ajudar iniciantes a se integrar rapidamente e com menos stress.

Com bastante prática, o desenvolvimento de um framework CSS personalizado será simples. Os benefícios deste superam as vantagens de trabalhar com framework alheio. Você pode estruturar todos os formatos de layout em um local e definir propriedades como tamanho de fonte, altura da linha e elementos de bloco. Ninguém jamais escreve um código CSS perfeito, então fique com o que funciona melhor para você.

Frameworks comuns para CSS da Grid

Abaixo estão alguns dos frameworks de CSS mais populares. Embora nem todos esses frameworks se concentrem exclusivamente no design da Grid, eles oferecem bibliotecas úteis para estudar e implementar projetos na web. O código fonte do projeto é livre em cada caso e, geralmente, vem com documentação.

1KB Grid

1KB Grid é um grande framework CSS que enfatiza a velocidade. Os arquivos para download são menores de 1 KB no total e detêm a maior parte dos seletores CSS que você precisa para criar um bonito layout de site. O código CSS é personalizável antes de baixar, que é um benefício enorme para todos os web designers. Você pode escolher entre quantas colunas  incluir e o quão largas as colunas e margens devem aparecer. Esta Grid é extremamente amigável para os iniciantes e uma ótima maneira de se inteirar mais.

Baseline CSS

Baseline é outro modelo padrão de CSS disponível gratuitamente para download. Este pacote inclui não só código para Grids, mas também a estrutura de tipografia da página e elementos de bloco. Todos os elementos do código são compatíveis com CSS3 e HTML5, dando aos desenvolvedores controle sobre a estrutura de fluxo da página. Baseline CSS oferece soluções para a manipulação de espaço vertical, integrando a tipografia da página dentro de uma Grid flexível.

1140px CSS Grid System

CSSGrid.net(http://cssgrid.net/) é a casa dos mais novos fluxos de frameworks para websites baseados em Grid. Com 1140 pixels e uma divisão de 12 colunas, as escalas de estrutura se adequam em todos os dispositivos, a partir das maiores resoluções de monitor para handhelds. O framework usa consultas de mídia para verificar quando exibir um layout corretamente e como espalhar o conteúdo da página. O autor Andy Taylor(https://twitter.com/andytlr) frequentemente atualiza o projeto.

YAML

YAML fornece o framework mais flexível para desenvolver layouts. A documentação oferece uma solução completa para todos os layouts fixos, elásticos e dinâmicos. Os arquivos principais tem sido testados extensivamente em pequenos e grandes sites. Se você está procurando um framework CSS estável, YAML é uma ótima solução.

Blueprint CSS

Blueprint contém muitos dos benefícios do Baseline. A vantagem deste framework é a sua marca bem reconhecida. Muitos desenvolvedores ativos tem atualizado seus projetos com novas classes. As Grids compõem uma grande parte do framework, mas muitos modelos são usados para formar  tipografia, telas de impressão e muito mais!

Boilerplate CSS

O projeto CSS Boilerplate foi iniciado por um dos desenvolvedores da Blueprint. O código é pouco mais refinado, uma versão reduzida do framework Blueprint, otimizado para velocidade e fácil legibilidade. Embora o projeto não tenha sido atualizado recentemente, oferece uma oportunidade para iniciantes descartarem suas próprias definições de projeto CSS.

YUI 2: Grids CSS

Grids YUI2 é um framework muito popular lançado pela Yahoo em sua linha YUI2. O código é perfeito para layouts fixos e dinâmicos, as suas regras são definidas no CSS2 e CSS3. O framework está bem documentado sob a Biblioteca de Interface do Usuário Yahoo e é considerada uma das melhores estruturas para iniciantes.

Este post foi escrito exclusivamente para Web designer Depot por Jake Rocheleau , um web designer apaixonado e entusiasta de mídias sociais. Jake gosta de ler e escrever sobre as últimas tendências digitais da Internet e sobre networking dentro da comunidade de design. Siga-o no Twitter @ jakerocheleau(https://twitter.com/jakerocheleau) para saber mais sobre seu trabalho.

Você usa um framework baseado em Grid 960 para seus projetos? Compartilhe sua opinião com a gente!