Cyber Monday Sale Save up to 40% off unlimited courses, tutorials and creative assets. Cyber Monday Sale! Save Now
Advertisement
  1. Web Design
  2. Skeleton

Criando uma estrutura em HTML com Skeleton

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called From PSD to HTML With the Skeleton Boilerplate.
Adding Styles to Our Skeleton Page Build

Portuguese (Português) translation by Andre Rocha (you can also view the original English article)

Final product image
What You'll Be Creating

Neste tutorial estaremos focando na codificação de um layout em PSD, usando o boilerplate responsivo Skeleton. Existem vários tutoriais sobre como codificar um design usando HTML e CSS, muitas vezes com um pouco de JavaScript, mais o principal objetivo deste tutorial é fazer acontecer usando a última versão do framework Skeleton (2.0.4). Ele teve grandes melhorias desde a ultima vez que falamos sobre ele.

Primeiramente, permita-me introduzir Skeleton, e em seguida começaremos a codificar.

O que é o Skeleton Boilerplate?

Skeleton é filho da imaginação do Dave Gamache. É um grid fluido, de doze colunas, com uma largura máxima padrão de 960px, tipografia básica e estilos mínimos para elementos comuns de HTML, como botões, links, inputs e áreas de texto.

Sua força reside no fato de que é um framework de CSS leve. Tendo pouco menos que 400 linhas de código, Skeleton foi criado para ser um ponto de partida, e não um framework cheio de design para UI como o Bootstrap, Foundation ou SemanticUI.

Porque usar o Skeleton?

Porque é simples de usar, e é um ótimo jeito de começar a construir seu próprio framework responsivo.

O que há de novo?

Dave Gamache introduziu e atualizou várias funções no Skeleton v2.0:

Começando

Durante este tutorial iremos codificar o design acima, criado por Samir Timezguida. Pelo caminho iremos:

  1. Baixar Skeleton e criar nosso próprio markup em HTML
  2. Puxar as imagens do PSD e escrever o CSS
  3. Adicionar JavaScript para dar mais interatividade

Vamos começar por baixar o Skeleton de www.getskeleton.com e pegar os arquivos PSD do código fonte.

Desenhando e Planejando

Você pode preferir uma abordagem diferente, mas eu gosto de começar desenhando o layout para visualizar cada secção.  Existem várias secções no layout:

  • Herói
  • Introdução
  • Criatividade
  • Trabalho
  • Ajuda
  • Clientes
  • Sobre
  • Vídeo
  • Porque Nós
  • Citação
  • Entre em contato
  • Contato
  • Roda-pé

Este é o desenho da estrutura de HTML desejada: 

Secções

Para cada secção criaremos um contêiner que preencherá a largura total da janela, com o nome da secção igual ao nome da classe. Dentro dele tomaremos vantagem do Skeleton, construindo o grid para fazer um container e uma quebra de linha. O HTML para cada secção será uma váriação do seguinte:

Agora está a hora de pegar cada secção e adicionar o markup. Não se preocupe com o estilo, fonte, e etc., por agora estamos concentrando apenas na estrutura em HTML

Menu

Para o menu, precisamos adicionar o ícone "hamburger" e uma lista não ordenada, completa com links internos. Cada link apontará para uma determinada secção.

Obs: os mais observadores podem reconhecer as classes fa fa-bars no elemento <i> para o ícone de navegação. Estes são típicos dos ícones Font Awesome, que implementaremos mais tarde durante o processo.

Heroi (Hero)

A secção herói, como vista no PSD, é composta por uma imagem esticada, um título e um subtítulo. Para a imagem do plano de fundo, iremos adicionar um contêiner diferente, para o título usaremos h1 e para o subtítulo, h2. Aqui, como pode ver, estou usando u-full-width, a nova classe do Skeleton.

Introdução

A introdução contém dois elementos; um título e um subtítulo. Preparamos o html para suportar a borda do título, adicionando uma classe separator, que adicionará  border-bottom e espaçamento.

Criatividade

Criatividade tem um plano de fundo de largura cheia e um botão. Você também pode ver a classe centered no h4; uma classe que criaremos no próximo tutorial para nos ajudar a centralizar elementos tanto na vertical quanto na horizontal.

Trabalho

Esta é a maior secção no site, e contém uma ou duas linhas adicionais; uma para links de filtros, e outro para itens do trabalho.

O filtro contém uma lista não ordenada com links internos, que filtrará os itens de trabalho.

Os itens de trabalho em si ter'ao quatro colunas de largura, contendo a imagem do trabalho, o nome do trabalho e ua descrição.

Você pode ver também que estou usando outra classe, vertical-centered, que centralizará o item no eixo vertical. A descrição para cada item também tem uma borda em baixo. Para conseguir isso, reutilizaremos a classe separator que vimos anteriormente, enquanto adicionamos uma classe extra para adicionarmos os outros estilos.

Ajuda

A secção de ajuda tem a mesma estrutura que a secção criatividade, mas os diferenciaremos adicionando nomes de classes diferentes.

Clientes

Esta secção contém uma lista não ordenada com imagens dos clientes. Estou usando placehold.it para reservar o espaço.

Sobre

Aqui temos duas linhas diferentes, uma para o texto de introdução, e outra para as pessoas.

A linha da introdução contém um título e um subtítulo, como vimos na secção de introdução.

A lista de pessoas é uma lista não ordenada contendo quatro itens, a última sendo para contratação. Cada item na lista tem três colunas de largura e contém uma imagem, um link, e o nome e a posição do individuo.

Video

A secção de vídeo contém apenas um botão e a imagem de fundo. Nos tutoriais que vem, faremos isso uma janela modal apontando à um vídeo do Youtube.

Porque nós

Continuando, a secção "Porque nós" é composta por duas secções individuais; uma para uma breve introdução e outra para serviços atuais.

A secção de introdução tem doze colunas de largura e contém um título dentro de um elemento <h3> e uma breve descrição cercado pelo elemento <h4> Como você verá abaixo, o titulo também tem a classe separator para criar o efeito da borda mencionado anteriormente.

Na secção de serviços, cada item da lista contém uma imagem e uma descrição.

Citação

Esta secção recebe a mesma estrutura de html que a secção criatividade, mas com um texto diferente para o botão centralizado.

Entre em contato

Só faltam mais dois! Esta secção oferece uma pequena linha do tempo para o formulário. É construído com uma estrutura em html com qual você já deve estar familiarizado, com um título e uma descrição, com um separador entre eles.

Contato

O formulário de contato tem duas colunas, uma para a localização e links de perfis sociais, e outro contendo o formulário que permite o usuário entrar em contato com a firma.

Novamente, estou usando markup para suportar Font Awesome, que veremos como integrar no proximo tutorial.

A primeira coluna tem quatro colunas de largura e a segunda tem oito. Aqui você realmente vê o poder do Skeleton, porque estamos usando linhas e colunas uma dentro da outra. O formulário tem tamanhos diferentes dentro dele; os primeiros dois inputs tem seis colunas de largura, e estão dentro de um container de oito colunas de largura.

Roda-pé

Nosso roda-pé contém algum texto dentro de um container de doze colunas.

Isso é tudo por enquanto!

Esse tutorial demonstrou exatamente para que serve o Skeleton: usamos seu markup para criar a estrutura de uma página na web. No próximo tutorial pegaremos esta estrutura e adicionaremos estilo para deixá-lo com um visual único. Até a próxima

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.