www.pensabilidade.com.br Acesse e confira as novidades.

Compartilhar/Favoritos

O GRID 960 é uma ferramenta em CSS (framework) simples que ajuda na padronização de layouts para web e depois corta em diriamos que 70% do trabalho da criação do seu CSS na hora de transformar aquele layout de PSD, Fireworks ou Illustrator para web. O grid 960 é dividido em 3 partes, TEMPLATES: que nada mais é do que essas barras para serem usadas nos programas gráficos de desenvolvimento de web mais famosos (Photoshop, Illustrator, Fireworks, Indesign, etc…) ; CODE: o código CSS que vai ser implantado na sua página web para ajudar no posicionamento e tamanho do conteúdo e a terceira parte opcional das SKETCH SHEETS: que são páginas de esboço para serem impressas com linhas de divisões para dar aquela esboçada no layout antes de partir para a criação do layout no computador.

O download do GRID 960 você encontra aqui (site oficial) ou então AQUI (link direto no meu FTP).

Como funciona no layout? (PASTA TEMPLATES)

Em primeiro lugar você tem que se decidir entre uma das duas divisões que se encaixam melhor no seu website, a divisão por 12 ou 16 colunas, calma, calma, não é necessariamente para ter 12 ou 16 colunas no site, o esquema é encaixar ele nesse perfil, onde as áreas de conteúdo comecem nos lugares exatos e as divisórias sejam do tamanho das linhas triplas que compreendem essas colunas. Não sei se expliquei bem, mas abaixo tem uma imagem para ajudar a entender melhor:

Observe que as colunas em escuro determinam o começo de conteúdo, e as colunas em branco marcam a divisão de conteúdo, mas você pode ter 3 “grids” de tamanho no conteúdo, ou 4 “grids”, mas obrigatoriamente tem que terminar a largura de seu conteúdo no encostar da coluna em branco, assim ela vai servir como divisória para o próximo pedaço de conteúdo.

Como funciona no CSS ?

Quando se vai desenvolver um CSS você anota quadrilhões de números referentes a altura e largura das imagens, textos e botões, pois pode ir parando por aí se você começou a anotar isso do seu layout. Aqui o maior número que você vai usar é 16 (se você escolheu o código de 16 colunas) ou 12 (se você escolheu o código de 12 colunas).

Primeiro e muito importante: Se você usar o template de 12 colunas, certifique-se de estar usando o CSS de 12 colunas, senão seu site vai ficar todo contorcido.

Segundo e mais importante ainda: Colocar os CSS do grid 960 na pasta correta e fazer referência no HTML para ir puxar o CSS como página de estilos padrão do arquivo.

É a partir desse encaixar de conteúdo que você fez na etapa anterior que você vai defnir a localização do conteúdo, o tamanho dele e a distância de um conteúdo para o outro. Como esse meu texto já está ficando bem grande e mesmo sem autorização concedida, estou postando um vídeo da ESTÚDIO SITE que ajuda na criação de Templates Joomla, mas que nessa video aula aborda exatamente como funciona o grid 960, assistam e aprendam mais sobre seu funcionamento.

Mas se você não é fã de vídeo-aula ou não gostou da aula do André da Estúdio Site, acesse aqui http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/

Mas para esse tem que entender um pouquinho de inglês, mas realmente é um ótimo tutorial, completo para aprender tudo sobre essa ferramenta.

Compartilhar/Favoritos

Partindo da escolha deste nome, me responsabilizei pela criação da Identidade Visual e papelaria completa da agência. A aprovada escolhida e já em utilização é essa logo abaixo:

Identidade Visual finalizada.

Bem jovem, inovadora, viva e simples.

Compartilhar/Favoritos