() translation by (you can also view the original English article)
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:
- utility classes como .
u-full-width,.u-max-full-widthque é perfeito para contêineres com 100% de largura - tipografia
- botões
- formulários
- listas
- tabelas
Começando
Durante este tutorial iremos codificar o design acima, criado por Samir Timezguida. Pelo caminho iremos:
- Baixar Skeleton e criar nosso próprio markup em HTML
- Puxar as imagens do PSD e escrever o CSS
- 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:
1 |
<section class="hero"> |
2 |
<div class="container"> |
3 |
|
4 |
<!-- html for this section goes here -->
|
5 |
|
6 |
</div>
|
7 |
</section>
|
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.
1 |
<nav class="navigation"> |
2 |
<a href="#" class="menu-icon"> |
3 |
<i class="fa fa-bars"></i> |
4 |
</a>
|
5 |
<ul class="main-navigation" role="navigation"> |
6 |
<li><a href="#hero">Home</a></li> |
7 |
<li><a href="#introduction">Introduction</a></li> |
8 |
<li><a href="#creativity">Creativity</a></li> |
9 |
<li><a href="#work">Work</a></li> |
10 |
<li><a href="#help">Help</a></li> |
11 |
<li><a href="#clients">Clients</a></li> |
12 |
<li><a href="#about">About</a></li> |
13 |
<li><a href="#video">Video</a></li> |
14 |
<li><a href="#why-us">Why us?</a></li> |
15 |
<li><a href="#quote">Quote</a></li> |
16 |
<li><a href="#contact">Contact</a></li> |
17 |
</ul>
|
18 |
</nav>
|
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.
1 |
<section id="hero" class="hero u-full-width"> |
2 |
<div class="hero-image"></div> |
3 |
<div class="container centered"> |
4 |
<div class="twelve columns"> |
5 |
<h1 class="separator">We’ve got talent</h1> |
6 |
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
7 |
Aenean commodo ligula eget dolor. Aenean massa.</h2>
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
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.
1 |
<section id="introduction" class="introduction u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h3 class="separator">Introduction</h3> |
6 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</h4> |
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
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.
1 |
<section id="creativity" class="creativity u-full-width featured-bg-image"> |
2 |
<h4 class="centered"> |
3 |
<button class="button inverted">Pure creativity</button> |
4 |
</h4>
|
5 |
</section>
|
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.
1 |
<section id="work" class="work u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h3 class="separator">Some of our work</h3> |
6 |
</div>
|
7 |
</div>
|
8 |
<div class="row"> |
9 |
<!-- work filters -->
|
10 |
</div>
|
11 |
<div class="row"> |
12 |
<!-- work items -->
|
13 |
</div>
|
14 |
</div>
|
15 |
</section>
|
O filtro contém uma lista não ordenada com links internos, que filtrará os itens de trabalho.
1 |
<ul class="work-filters u-full-width"> |
2 |
<li class="active"> |
3 |
<a href="#">All</a> |
4 |
</li>
|
5 |
<li>
|
6 |
<a href="#">Branding</a> |
7 |
</li>
|
8 |
<li>
|
9 |
<a href="#">Web design</a> |
10 |
</li>
|
11 |
<li>
|
12 |
<a href="#">Mobile</a> |
13 |
</li>
|
14 |
<li>
|
15 |
<a href="#">UI</a> |
16 |
</li>
|
17 |
<li>
|
18 |
<a href="#">Illustrations</a> |
19 |
</li>
|
20 |
</ul>
|
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.
1 |
<ul class="work-items u-cf"> |
2 |
<li class="four columns"> |
3 |
<img src="http://placehold.it/400"> |
4 |
<div class="work-detail"> |
5 |
<div class="vertical-centered"> |
6 |
<h3>Branding</h3> |
7 |
<p class="separator orange">MTV AMA logo</p> |
8 |
</div>
|
9 |
</div>
|
10 |
</li>
|
11 |
<li class="four columns"> |
12 |
<img src="http://placehold.it/400"> |
13 |
<div class="work-detail"> |
14 |
<div class="vertical-centered"> |
15 |
<h3>Web Design</h3> |
16 |
<p class="separator orange">Dribbble redesign</p> |
17 |
</div>
|
18 |
</div>
|
19 |
</li>
|
20 |
<li class="four columns"> |
21 |
<img src="http://placehold.it/400"> |
22 |
<div class="work-detail"> |
23 |
<div class="vertical-centered"> |
24 |
<h3>Mobile UI</h3> |
25 |
<p class="separator orange">Google Mail</p> |
26 |
</div>
|
27 |
</div>
|
28 |
</li>
|
29 |
<li class="four columns"> |
30 |
<img src="http://placehold.it/400"> |
31 |
<div class="work-detail"> |
32 |
<div class="vertical-centered"> |
33 |
<h3>Illustrations</h3> |
34 |
<p class="separator orange">Flat icons</p> |
35 |
</div>
|
36 |
</div>
|
37 |
</li>
|
38 |
<li class="four columns"> |
39 |
<img src="http://placehold.it/400"> |
40 |
<div class="work-detail"> |
41 |
<div class="vertical-centered"> |
42 |
<h3>Web design</h3> |
43 |
<p class="separator orange">Inbox by google</p> |
44 |
</div>
|
45 |
</div>
|
46 |
</li>
|
47 |
<li class="four columns"> |
48 |
<img src="http://placehold.it/400"> |
49 |
<div class="work-detail"> |
50 |
<div class="vertical-centered"> |
51 |
<h3>UI</h3> |
52 |
<p class="separator orange">Skeleton skin got a new UI</p> |
53 |
</div>
|
54 |
</div>
|
55 |
</li>
|
56 |
</ul>
|
Ajuda
A secção de ajuda tem a mesma estrutura que a secção criatividade, mas os diferenciaremos adicionando nomes de classes diferentes.
1 |
<section id="help" class="help u-full-width featured-bg-image"> |
2 |
<h4 class="centered"> |
3 |
<button class="button inverted">We’re here to help!</button> |
4 |
</h4>
|
5 |
</section>
|
Clientes
Esta secção contém uma lista não ordenada com imagens dos clientes. Estou usando placehold.it para reservar o espaço.
1 |
<section id="clients" class="clients u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<h3 class="separator">Our clients</h3> |
5 |
</div>
|
6 |
<ul class="clients u-full-width u-cf"> |
7 |
<li>
|
8 |
<img src="http://placehold.it/200x50" alt="Google Client"> |
9 |
</li>
|
10 |
<li>
|
11 |
<img src="http://placehold.it/200x50" alt="Samsung Client"> |
12 |
</li>
|
13 |
<li>
|
14 |
<img src="http://placehold.it/200x50" alt="Flickr Client"> |
15 |
</li>
|
16 |
<li>
|
17 |
<img src="http://placehold.it/200x50" alt="Foursquare Client"> |
18 |
</li>
|
19 |
<li>
|
20 |
<img src="http://placehold.it/200x50" alt="Pinterest Client"> |
21 |
</li>
|
22 |
</ul>
|
23 |
</div>
|
24 |
</div>
|
25 |
</section>
|
Sobre
Aqui temos duas linhas diferentes, uma para o texto de introdução, e outra para as pessoas.
1 |
<section id="about" class="about u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<!-- introduction -->
|
5 |
</div>
|
6 |
<div class="row"> |
7 |
<!-- people list -->
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
A linha da introdução contém um título e um subtítulo, como vimos na secção de introdução.
1 |
<div class="twelve columns"> |
2 |
<h3 class="separator">About us</h3> |
3 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</h4> |
4 |
</div>
|
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.
1 |
<ul class="people-list"> |
2 |
<li class="three columns people-list-item"> |
3 |
<img src="http://placehold.it/300"> |
4 |
<div class="people-hover"> |
5 |
<a href="#"><i class="fa fa-external-link"></i></a> |
6 |
<div class="people-detail"> |
7 |
<h3>JOHN</h3> |
8 |
<p>CEO/Founder</p> |
9 |
</div>
|
10 |
</div>
|
11 |
</li>
|
12 |
<li class="three columns people-list-item"> |
13 |
<img src="http://placehold.it/300"> |
14 |
<div class="people-hover"> |
15 |
<a href="#"><i class="fa fa-external-link"></i></a> |
16 |
<div class="people-detail"> |
17 |
<h3>Wiliam</h3> |
18 |
<p>CTO/Founder</p> |
19 |
</div>
|
20 |
</div>
|
21 |
</li>
|
22 |
<li class="three columns people-list-item"> |
23 |
<img src="http://placehold.it/300"> |
24 |
<div class="people-hover"> |
25 |
<a href="#"><i class="fa fa-external-link"></i></a> |
26 |
<div class="people-detail"> |
27 |
<h3>Clare</h3> |
28 |
<p>Designer</p> |
29 |
</div>
|
30 |
</div>
|
31 |
</li>
|
32 |
<li class="three columns people-list-item blank-feature"> |
33 |
<div class="vertical-centered"> |
34 |
<h3 class="separator">WE ARE HIRING</h3> |
35 |
<button class="button">Apply</button> |
36 |
</div>
|
37 |
</li>
|
38 |
</ul>
|
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.
1 |
<section id="video" class="video u-full-width featured-bg-image"> |
2 |
<h4 class="centered"> |
3 |
<a href="http://www.youtube.com/embed/EVpyXNiHVbE?autoplay=1" class="button inverted circle"> |
4 |
<i class="fa fa-play"></i> |
5 |
</a>
|
6 |
</h4>
|
7 |
</section>
|
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.
1 |
<section id="why-us" class="why u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<!-- introduction section -->
|
5 |
</div>
|
6 |
<div class="row"> |
7 |
<!-- services section -->
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
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.
1 |
<div class="twelve columns"> |
2 |
<h3 class="separator">Why choose us</h3> |
3 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</h4> |
4 |
</div>
|
Na secção de serviços, cada item da lista contém uma imagem e uma descrição.
1 |
<ul class="services"> |
2 |
<li class="four columns"> |
3 |
<div class="service-image"> |
4 |
<img src="http://placehold.it/300x150"> |
5 |
</div>
|
6 |
<h5>App Design</h5> |
7 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
8 |
ilabore et dolore.</p>
|
9 |
</li>
|
10 |
<li class="four columns"> |
11 |
<div class="service-image"> |
12 |
<img src="http://placehold.it/300x150"> |
13 |
</div>
|
14 |
<h5>Responsive Layout</h5> |
15 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
16 |
ilabore et dolore.</p>
|
17 |
</li>
|
18 |
<li class="four columns"> |
19 |
<div class="service-image"> |
20 |
<img src="http://placehold.it/300x150"> |
21 |
</div>
|
22 |
<h5>Pixel Perfect design</h5> |
23 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
|
24 |
ilabore et dolore.</p>
|
25 |
</li>
|
26 |
</ul>
|
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.
1 |
<section id="quote" class="quote featured-bg-image u-full-width"> |
2 |
<h4 class="centered"> |
3 |
<button class="button inverted">Get a quote now.</button> |
4 |
</h4>
|
5 |
</section>
|
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.
1 |
<section id="contact" class="contact u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h3 class="separator">Get in touch</h3> |
6 |
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt illum sed veritatis at, ipsam quo vitae minima. Animi unde doloremque iste, incidunt nihil, est vero aliquam, nemo id ab totam.</h4> |
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
10 |
</section>
|
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.
1 |
<section class="container contact-us u-full-width u-max-full-width"> |
2 |
<div class="row"> |
3 |
<div class="four columns contact-us-details"> |
4 |
<h3>Our Location</h3> |
5 |
<h5>
|
6 |
174 Mimosa ST. NW <br /> |
7 |
Casablanca, MA 20370 <br /> |
8 |
(212) 123 456 7 <br /> |
9 |
Samir Timezguida</h5>
|
10 |
<ul class="social-links"> |
11 |
<li>
|
12 |
<a href="http://twitter.com/wdtuts" target="_blank"> |
13 |
<i class="fa fa-twitter"></i> |
14 |
</a>
|
15 |
</li>
|
16 |
<li>
|
17 |
<a href="https://www.facebook.com/webdesigntutsplus" target="_blank"> |
18 |
<i class="fa fa-facebook"></i> |
19 |
</a>
|
20 |
</li>
|
21 |
<li>
|
22 |
<a href="https://plus.google.com/117485987435498566293" target="_blank"> |
23 |
<i class="fa fa-google-plus"></i> |
24 |
</a>
|
25 |
</li>
|
26 |
</ul>
|
27 |
</div>
|
28 |
<div class="eight columns contact-us-form"> |
29 |
<form>
|
30 |
<div class="row"> |
31 |
<div class="six columns"> |
32 |
<input class="u-full-width" type="text" placeholder="Name" id="nameInput"> |
33 |
</div>
|
34 |
<div class="six columns"> |
35 |
<input class="u-full-width" type="email" placeholder="Email" id="emailInput"> |
36 |
</div>
|
37 |
</div>
|
38 |
<textarea class="u-full-width" placeholder="Message" id="messageInput"></textarea> |
39 |
<input class="button u-pull-right" type="submit" value="Send"> |
40 |
</form>
|
41 |
</div>
|
42 |
</div>
|
43 |
</section>
|
Roda-pé
Nosso roda-pé contém algum texto dentro de um container de doze colunas.
1 |
<section class="footer u-full-width"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="twelve columns"> |
5 |
<h5>© 2015 WebDesign Tuts+.</h5> |
6 |
</div>
|
7 |
</div>
|
8 |
</div>
|
9 |
</section>
|
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!
