Fundação - Instalação

Neste capítulo, discutiremos sobre como instalar e usar o Foundation no site.

Baixe a Fundação

Ao abrir o link Foundation.zurb.com , você verá uma tela conforme mostrado abaixo -

Clique no Download Foundation 6 botão, você será redirecionado para outra página.

Aqui você pode ver quatro botões -

Download Everything - Você pode baixar esta versão do Foundation, se desejar ter tudo no framework, ou seja, CSS e JS vanilla.
Download Essentials - Vai baixar a versão simples que inclui a grade, botões, tipografia etc.
Custom Download - Isso fará o download da biblioteca personalizada para Foundation, inclui elementos e define o tamanho das colunas, tamanho da fonte, cor etc.
Install via SCSS - Isso o redirecionará para a página de documentação para instalar o Foundation para sites.

Você pode clicar no Download Everythingbotão para obter tudo no framework, ou seja, CSS e JS. Como os arquivos consistem em todas as coisas na estrutura, sempre que você não precisa incluir arquivos separados para funcionalidade individual. No momento em que este tutorial foi escrito, a versão mais recente (Foundation 6) foi baixada.

Estrutura do Arquivo

Depois de fazer o download do Foundation, extraia o arquivo ZIP e você verá a seguinte estrutura de arquivo / diretório -

Como você pode ver, existem CSS e JS compilados (Foundation. *), Bem como CSS e JS compilados e minimizados (Foundation.min. *).

Estamos usando as versões CDN da biblioteca em todo este tutorial.

Modelo HTML

Um modelo HTML básico usando Foundation é mostrado abaixo -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

As seções a seguir descrevem o código acima em detalhes.

Doctype HTML5

O Foundation consiste em certos elementos HTML e propriedades CSS que requerem o uso do doctype HTML5. Portanto, o código a seguir para doctype HTML5 deve ser incluído no início de todos os seus projetos usando Foundation.

<!DOCTYPE html>
<html>
   ....
</html>

Mobile First

Ajuda ser responsivo a dispositivos móveis. Você precisa incluir oviewport meta tag ao elemento <head>, para garantir renderização adequada e zoom de toque em dispositivos móveis.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

A propriedade width controla a largura do dispositivo. Configurá-lo para a largura do dispositivo garantirá que ele seja renderizado em vários dispositivos (celulares, desktops, tablets ...) corretamente.
escala inicial = 1,0 garante que, quando carregada, sua página da web será renderizada em uma escala de 1: 1, e nenhum zoom será aplicado fora da caixa.

Inicialização de componentes

O script jQuery é necessário no Foundation para componentes como modais e suspensos.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código html fornecido acima firstexample.html Arquivo.
Abra este arquivo HTML em um navegador, uma saída é exibida conforme mostrado abaixo.