Tutorial e modelo de fotografia CSS 960.GS grátis
Ame ou odeie, o 960.gs cria protótipos incrivelmente rápidos. Utilizando classes predefinidas, você pode realizar layouts bastante complexos com pouco ou nenhum esforço.
Hoje, trazemos a você um modelo de página única gratuito, totalmente codificado usando o 960.gs. O modelo possui alguns efeitos interessantes de CSS3 e usa @ font-face para implementar uma bela tipografia personalizada. Abaixo, você encontrará o download e um tutorial passo a passo básico sobre como criar seu próprio.
Você pode fazer o download do modelo totalmente gratuito e usá-lo como desejar, com atribuição zero.
Faça o download do modelo
- Visualizar no navegador
- Baixar .ZIP
Aqui está uma rápida visualização da aparência do modelo:
Faça o download dos recursos do 960.GS
A primeira coisa que você deve fazer é acessar o site do 960 Grid System e clicar no botão de download no canto superior esquerdo da página.
O download contém muitas coisas, mas na verdade precisamos apenas de três arquivos CSS: reset.css, text.css e 960.css. Esses são os componentes padrão nos quais o sistema de grade é construído. As folhas de estilo de redefinição e texto são completamente opcionais, mas as usaremos para ajudar a garantir que tudo permaneça agradável e consistente em vários navegadores.
O tutorial abaixo pressupõe que você esteja familiarizado com CSS e 960.gs. Se você precisar de um curso intensivo em sistemas de grade, consulte o meu guia 960 em Seis revisões.
Etapa 1: inicie seus arquivos HTML e CSS
Além dos arquivos CSS que acompanham o 960.gs, precisaremos dos nossos. Crie um diretório em sua máquina, adicione os arquivos que você baixou e crie um arquivo index.html e um arquivo style.css.
Cole o seguinte código no seu HTML para começar:
Basicamente, acabamos de vincular nossos vários arquivos CSS (provavelmente demais para uma única página da Web, mas isso foi criado para expandir) e iniciamos o HTML do corpo.
O design apresenta finas barras cinza na parte superior e inferior da página. Queremos que eles se estendam por toda a página, para colocá-los fora da div 960.
Em seguida, entre o cabeçalho e o rodapé, há uma div com uma classe de "container_12". Como estamos usando a versão de 12 colunas do sistema 960, isso criará uma div que abrange a maior parte do caminho na página e é automaticamente centralizada horizontalmente.
Etapa 2: As fontes
Usaremos duas fontes personalizadas não web para este projeto: Lobster e Caviar Dreams. Ambos podem ser encontrados na Biblioteca FontSquirrel @ Font-Face Kit.
Faça o download dos kits para cada fonte e coloque os vários arquivos de fonte no arquivo do projeto. No CSS que acompanha cada kit, você deve encontrar o código @ font-face para incorporar essa fonte. Pegue o trecho para cada fonte e cole-o no seu arquivo stye.css.
Usando esse código, agora podemos incluir essas fontes em nossas pilhas de fontes simplesmente digitando 'Lobster13Regular' ou 'CaviarDreamsRegular'.
Etapa 3: cabeçalho
Como já adicionamos o cabeçalho ao HTML, tudo o que precisamos fazer é aparecer um estilo básico.
Basicamente, tudo o que fizemos aqui recebeu uma altura e uma cor de fundo no cabeçalho.
Etapa 4: HTML de navegação
A primeira coisa que aparece após o cabeçalho é a navegação. Isso é um pouco complicado, pois flutua no lado direito da página. Poderíamos definir uma classe 960 e depois usar o comando push, mas é muito mais fácil simplesmente não aplicar nenhuma classe à div e fazer a flutuação correta com CSS.
Para o HTML, precisamos apenas de uma lista não ordenada padrão com alguns links. Coloquei alguns links de espaço reservado aqui, mas você obviamente deseja personalizar isso para seu próprio site.
Etapa 5: CSS de navegação
Em seguida, precisamos definir vários estilos para a navegação. Links, listas não ordenadas, itens de lista e efeitos de foco precisam ser elaborados.
Observe que definimos a fonte como Caviar Dreams como aprendemos acima e garantimos que alguns backups sejam listados no caso de o navegador não carregar a fonte adequada.
O mais estranho aqui é que usamos um flutuador à esquerda e um flutuador à direita. Para fazer com que os itens da lista apareçam em uma linha em vez de empilhados, precisamos flutuar o "ul li" para a esquerda. Para fazer o conjunto como um todo aderir ao lado direito da nossa div de contêiner, flutuamos o #nav para a direita.
Todo o resto é apenas um monte de estilos básicos, como cor, tamanho da fonte etc. Para diferenciar o link ao passar o mouse, apliquei um sublinhado simples.
Nesse ponto, sua página deve começar a tomar forma. Verifique se ele parece próximo à visualização abaixo.
Etapa 6: título HTML
Após a navegação, adicione uma div com um ID de "headline" e uma classe de "grid_12". A classe grid_12 tornará a largura da div igual à de todo o contêiner. Dentro dessa div, coloque uma tag h2 e uma tag de parágrafo com algum conteúdo.
Observe que após as divs de navegação e manchete, há um div com uma classe de "clear". É assim que o 960 Grid System limpa os carros alegóricos implementados anteriormente. Certifique-se de colocar isso sempre que quiser iniciar uma nova linha de conteúdo.
Etapa 7: título CSS
Em seguida, adicione estilos para o título, a tag do título h2 e a tag do parágrafo do título. Defino o h2 para 50px Lobster e o parágrafo para 25px Caviar Dreams.
Com isso, sua página agora deve ter uma barra superior, uma área de navegação e um bom grande título.
Etapa 8: o Big Photo HTML
Para adicionar a foto, usaremos uma div vazia com a classe grid_12 e definiremos o plano de fundo usando CSS.
Etapa 9: o Big Photo CSS
Para o CSS, definimos uma imagem de plano de fundo para a div, fornecemos uma borda 3px e aplicamos uma sombra da caixa CSS3. A borda branca não aparecia em um fundo branco; portanto, a sombra dá profundidade à imagem.
Etapa 10: HTML do item de linha
O último pedaço de HTML que precisamos são as caixas e o texto na parte inferior da página. Nós os estilizaremos com uma classe para facilitar a adição de mais tarde.
Para construir esta seção, queremos duas colunas: uma para a imagem e outra para o texto ao lado. É aqui que o 960.gs facilita para nós. Como estamos usando a versão de 12 colunas, queremos que nosso número totalize doze, estendendo-se por todo o contêiner.
Aplicando a classe “grid_4” seguida pela classe “grid_8”, obtemos duas colunas, a primeira das quais tem metade da largura da segunda (8 + 4 = 12).
Observe que dobramos nosso código e inserimos imagens diferentes. Isso nos dá duas das áreas "lineItem". Basta adicionar outro pedaço duplicado para adicionar um terceiro ou quarto.
Etapa 11: CSS do item de linha
Em seguida, adicionamos vários estilos a essa área para torná-la agradável. Dê às imagens uma sombra e um contorno e aplique as fontes apropriadas.
Observe que usamos "contorno" em vez de "borda" aqui. Esse é um truque legal de CSS que basicamente permite que você tenha uma borda de imagem que não estraga o layout.
Quando terminar, seus itens de linha deverão ficar impressionantes e serão divididos em colunas claramente definidas.
Etapa 12: rodapé CSS
A etapa final é aplicar os mesmos estilos ao rodapé, como fizemos no cabeçalho. Isso dá ao site um bom contraste pesado na parte inferior e superior.
Resultado final
Isso deve lhe dar um produto final de trabalho! Observe que a maior parte do nosso trabalho foi realmente para estilizar os objetos que colocamos na página. Passamos quase nenhum tempo nos preocupando com o posicionamento. Este é o principal atrativo dos sistemas de grade como 960 e Blueprint.
Podemos discutir semântica o dia todo, mas no final, essas ferramentas ajudam você a se concentrar mais no design e menos nos problemas de layout. É provável que, quanto mais experiente você se tornar com CSS, menor será a necessidade de usar um sistema de grade para executar o layout, mas até então é bom ter seus problemas resolvidos antes mesmo de surgirem.
Conclusão
Como é inevitável nesses tipos de postagens, várias pessoas sem dúvida deixarão comentários frustrando os sistemas de grade. A verdade é que eu raramente os uso. No entanto, eu vejo o valor deles e gosto de brincar com eles para ver o que posso fazer. Resumindo, se você não gosta de 960.gs, não baixe o modelo!
No entanto, se você se sentir confortável com os sistemas de grade e gostar de coisas grátis, baixe o arquivo e ajuste-o! Se você usá-lo em um projeto, instale um link abaixo (opcional) para que eu possa verificar como você o implementou e estendeu o design. Se você precisar de uma sugestão, essa foto grande está gritando para ser transformada em um controle deslizante jQuery.
