Construa sites Superfast com Foundation 5 [A Guide]
O uso de uma estrutura frontend pode melhorar o fluxo de trabalho de design da Web de várias maneiras. Pode ajudá-lo a seguir os princípios do design moderno como abordagem mobile-first, marcação semântica e design responsivo. Você pode aproveite vários elementos CSS e JavaScript prontos para uso e significativamente acelere seu processo de desenvolvimento, liberando mais tempo para se concentrar no design visual e de experiência do usuário.
O Zurb Foundation 5 é um dos frameworks frontend mais poderosos do mercado. É logicamente construído, fácil de usar e totalmente gratuito. Ele permite que você faça uso de grade CSS flexível naquela facilita na criação de um layout limpo e amigável. O framework Foundation também é altamente testado, por isso cuida da compatibilidade entre navegadores e entre dispositivos.
Neste tutorial eu vou te mostrar como você pode criar um site super rápido com a Zurb Foundation 5. Você pode dar uma olhada no resultado final na página de demonstração.
Vou criar o layout do site, a tarefa de adicionar elementos de design sutis está esperando por você. O site que criaremos juntos neste tutorial realizará o sonho do moderno designer de UX: será responsivo, mobile-first, user-friendly e semântico.
Devido à duração deste guia, aqui estão os atalhos para acessar rapidamente a seção desejada:
- Download da Fundação 5
- Entendendo a grade
- Quando usar as classes Large-N, Medium-N e Small-N
- Adicionando a barra de menu superior
- Preenchendo a parte principal
- Adicionando um painel para postagens populares
- Adicionando 3 Mais Posts ao Painel Popular
- Prettying o CSS
- Adicionando mais conteúdo
- Adicionando paginação
- Preenchendo a barra lateral
- O boletim informativo
- Flex Video
- O menu da barra lateral
- Conclusão
1. Download da Fundação 5
Você pode baixar o Foundation 5 em 4 formas diferentes:
- o código completo
- uma versão mais leve com apenas o código essencial
- uma versão personalizada onde você pode personalizar o que você precisa e o que não
- uma versão Sass se você quiser definir suas variáveis e mixins no SCSS.
Neste tutorial eu escolherei o código Completo com CSS vanilla, mas é claro que você pode escolher qualquer outra versão se você quiser simplificar seu site e usar somente o que você realmente precisa.
Depois de ter baixado e descompactado o arquivo zip, abra o arquivo index.html no seu navegador e você verá algo assim:
Sim, os desenvolvedores incluíam links úteis no arquivo de índice. Você pode deixar assim e criar um novo arquivo para o seu protótipo com o nome home.html ou algo semelhante, mas você não precisa mantê-lo, pois você pode acessar facilmente a Documentação da Fundação sempre que quiser..
Abra o arquivo index.html no seu editor de código favorito e apagar tudo dentro do seção, mas antes do fechamento As regras de estilo que adicionamos ao app.css arquivo para bonito até o nosso protótipo são estes: Como a Fundação 5 usa unidades relativas, precisamos usar “em”-s ou “rem”-s em vez de pixels para acompanhar as regras. (Você pode ler sobre unidades CSS: Pixels vs vs vs% aqui.) Eu usei a extensão Firebug do Firefox para determinar onde eu tenho que substituir as regras CSS do Foundation 5, você pode usar qualquer outra extensão de navegador de desenvolvimento web se você quiser. Aqui neste curto trecho de CSS, nós só tivemos que substituir o CSS padrão da Foundation apenas uma vez, na última regra (.row .row.popular-main). Aqui está como o site de demonstração se parece agora: Usando as mesmas regras de antes, adicionaremos mais conteúdo à seção principal da página. O conteúdo que vamos adicionar agora será o últimas postagens com miniaturas pequenas. A Foundation 5 tem estilos de miniaturas pré-preparadas muito legais que usaremos nesta etapa. Miniaturas da Fundação usam um classe CSS pré-construída chamada “º” que precisamos adicionar às imagens que queremos exibir como miniaturas na maneira como você pode vê-las no snippet de código abaixo. Para cada Post mais recente, adicionamos uma nova linha abaixo do Painel Popular com nosso classe CSS personalizada chamada “último post”. No tablet e no tamanho da área de trabalho, mostraremos uma pequena miniatura usando a classe de miniaturas da Fundação à esquerda e o título e uma breve descrição à direita. No celular, o título e a descrição ficarão abaixo da miniatura. Agora eu usei o “meio-3 colunas” e “média-9 colunas” classes para fazê-los dividir a tela em 1: 3, 25% para a imagem e 75% para o texto acima do tamanho médio. Insira o trecho de código a seguir abaixo do painel Popular três vezes (para as três últimas postagens). Aqui eu apenas incluo o código de uma última linha de postagem, já que todas usam a mesma marcação HTML, apenas o conteúdo é diferente. Conteúdo do Último Post… Nosso arquivo CSS personalizado criado na etapa 4.3, app.css também recebe algumas novas regras de estilo para manter a aparência do demo arrumado. Nota: Se você quiser adicionar seu próprio CSS personalizado ao Foundation, nunca esqueça de verificar, com uma ferramenta web dev, onde você deve substituir as regras padrão. No trecho de CSS abaixo, precisamos sobrescrevê-los na primeira regra (.row .row.latest-post). Na segunda regra, basta usar nosso próprio seletor personalizado (.latest-post h4). Nosso protótipo agora se parece com isso: Nesta etapa, adicionaremos uma paginação legal abaixo dos Posts mais recentes. O Foundation 5 nos ajuda com suas convenientes aulas de paginação prontas para uso. Usamos o mesmo código nesta etapa que você pode encontrar no “Avançado” seção dentro dos documentos de paginação. Aqui estão as últimas mensagens com a seção de paginação recém-adicionada: Agora que estamos prontos com o conteúdo principal do nosso site de demonstração, é hora de preencher a barra lateral direita. A barra lateral direita ficará abaixo do conteúdo principal nos tamanhos para celular e tablet. Você precisa inserir todos os trechos de código nesta seção dentro do A barra lateral esquerda conterá um Formulário de Inscrição no Boletim informativo (1), um Vídeo Mais Recente (2) e um Menu da Barra Lateral ao estilo do acordeão sob o apelido “Nosso livro de receitas” (3). No final deste passo, estaremos prontos com a nossa demonstração que será assim: Para construir um formulário no Foundation 5, você não precisa fazer mais nada, apenas coloque a grade dentro de um Tag HTML. Se você der uma olhada no snippet de código abaixo, verá que colocamos o formulário em uma linha na qual definimos diferentes seletores CSS para todas as três grades: “pequeno-12”, “médio-9”, e “grande-12”. Escolhemos essa solução porque um Formulário de boletim informativo de 100% de largura parece bacana para o tamanho dos dispositivos móveis, mas é realmente muito estranho no tamanho do tablet à medida que ele se torna muito Largo. Felizmente a Fundação 5 nos permite usar “Linhas Incompletas”: só temos que adicionar o “fim” class para a definição de classe CSS da coluna incompleta. Então, isso é o que vai acontecer aqui: no tamanho do celular, a barra lateral será exibida abaixo do conteúdo principal com um Formulário de Inscrição no Boletim informativo que cobre a tela inteira. No tamanho médio, a barra lateral permanecerá sob o conteúdo principal, mas o Formulário de Boletim informativo cobrirá apenas 75% da tela, e os 25% restantes permanecerão vazios. No tamanho da área de trabalho, a barra lateral ficará ao lado do conteúdo principal, e o Formulário de Boletim informativo cobrirá toda a largura da barra lateral novamente. Veja o Grid Docs para ler mais sobre Incomplete Rows. Agora olhe dentro do cabeçalho margin-bottom: 2em; .popular-adicional h4 font-size: 1.125em; margem superior: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Adicionando Mais Conteúdo
Título da última postagem
.linha .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; tamanho da fonte: 1.125em;
4.5 Adicionando paginação
5. Preenchendo a Barra Lateral
5.1 O Formulário de Newsletter
Inscreva-se no nosso boletim
O Foundation Forms tem muitas outras opções de layout, como Prefix Label, Prefix Radius Label, Postfix Button e Postfix Label. Escolhemos a opção do botão Postfix aqui, pois é mais fácil de usar: os usuários podem clicar nela e enviar o formulário imediatamente.
Dentro do formulário, adicionaremos uma nova linha aninhada que divide a tela para 2: 1. A entrada de texto terá 8 colunas e o botão postfix receberá 4. Como queremos ter esse layout, mesmo na tela do celular, vamos definir o “pequenas 8 colunas” e “pequenas 4 colunas” Seletores CSS aqui, o Small Grid sendo o menor tamanho onde queremos implementar essa marcação.
Você pode ver outra coisa nova no código HTML acima, que é o “colapso da linha” classe. Este é o estilo embutido do Foundation 5. Por padrão, há uma calha entre duas colunas adjacentes, mas se adicionarmos o “colapso” classe para a nossa fila, a sarjeta vai desaparecer. Fazemos isso porque queremos que o botão fique bem ao lado da entrada de texto sem qualquer espaço entre eles.
Agora é hora de inserir este trecho de código no
5,2 Flex Video
Abaixo da seção de boletim informativo, adicionaremos uma receita de vídeo diária à nossa barra lateral. Fundação 5 nos ajuda torne os vídeos incorporados responsivos e force-os a escalar automaticamente com seu recurso Flex Video.
Flex Videos usa o built-in “flex-video” Classe CSS. Criamos uma nova linha para a seção da barra lateral Daily Video Recipe e colocamos uma coluna larga nela “pequeno-12 médio-9 grande-12 final de colunas” Seletores CSS pelo mesmo motivo que usamos uma linha incompleta no Medium Grid no passo anterior.
Aqui está o código que você precisa colar abaixo da seção de boletim informativo. Você pode usar qualquer vídeo do Youtube, Vimeo etc.
Receita de Vídeo Diária
5.3 O Menu da Barra Lateral
Para o Menu Barra Lateral, usaremos o recurso Acordeão da Fundação 5. Acordos são elementos da Web que expandem e reduzem o conteúdo em seções lógicas.
Em nosso site de demonstração, essas seções lógicas são os três grupos de alimentos diferentes (pratos principais, acompanhamentos, sobremesas) e cada grupo contém grupos menores, como “Aves de capoeira”, “Carne de porco”, “Carne”, “Vegetariano”.
Colocamos todo o acordeon da barra lateral em uma única coluna com a mesma lógica dos passos 5.1 e 5.2 anteriores. Colocamos o acordeão dentro dele como uma lista não ordenada com as classes CSS internas apropriadas, como “acordeão” e “acordeão-navegação”.
Como os Foundation Accordions funcionam com JavaScript, você pode personalizar seu comportamento com a ajuda de variáveis JavaScript pré-construídas, se desejar. Para fazer isso, olhe para o “Configuração JavaScript opcional” seção no Documentos do Acordeão. O seguinte trecho de código vem abaixo da seção Flex Video dentro do arquivo index.html.
Conclusão
Agora que estamos prontos com nosso site de demonstração, vamos ver o que mais você pode fazer com a Foundation 5. Os elementos que usamos nesta demonstração são apenas um pequeno conjunto de recursos da estrutura Foundation. Há muitas outras coisas que você pode usar em seu design, como Barras de Ícones personalizáveis, Breadcrumbs, Lightboxes, Range Sliders, Validação de Formulários e muitas outras. Os documentos são muito bem escritos e ajudam os desenvolvedores com muitos exemplos de código.
Se você estiver familiarizado com o Sass, terá ainda mais opções, pois cada seção do Documentos explica como você pode criar seus próprios mixins e quais variáveis Sass podem ser usadas para personalizar seu site. Antes de começar a projetar sua página, não se esqueça de verificar a compatibilidade do framework Foundation para garantir que ele funcione em todos os navegadores que você precisa.
- Ver demonstração
- Fonte de download
