Fundação - Projetos iniciais

Você pode começar com o desenvolvimento do seu projeto com alguns modelos disponíveis que podem ser instalados através do Yeti Launch ouFoundation CLI. Você pode começar com o novo projeto usando esses modelos, usando o sistema de compilação Gulp para o processamento do Sass, JavaScript, cópia de arquivos etc.

Modelo Básico

O modelo básico é algo como o modelo SASS, que inclui a estrutura de diretório simples e compila apenas arquivos SASS e é bom ter este modelo simples enquanto usa apenas SASS. Você pode usar o modelo básico usando Yeti Launch ou usando Foundation CLI usando o seguinte comando -

$ foundation new --framework sites --template basic

Para configurar isso, primeiro execute o npm install , bower install e use o comando npm start para executá-lo. Você também pode baixar os arquivos de modelo do Github .

Modelo ZURB

É uma combinação de CSS / SCSS, JavaScript, template Handlebars, estrutura de marcação, compressão de imagem e usa processamento SASS. Você pode usar o modelo ZURB usando Yeti Launch ou usando Foundation CLI usando o comando abaixo -

$ foundation new --framework sites --template zurb

Para executar este modelo, siga as mesmas etapas especificadas no modelo básico. Você também pode baixar os arquivos de modelo do Github .

Cópia de ativos

Você pode copiar o conteúdo na pasta src / assets usando Gulp, em que os ativos serão a pasta do seu projeto. O importante aqui é que os arquivos SASS, arquivos JavaScript e imagens não passarão por este processo de cópia de ativos, pois eles terão seu próprio processo para copiar o conteúdo.

Compilação de página

Você pode criar páginas HTML em três pastas: páginas , layouts e parciais que residem no diretório src / . Você pode usar o compilador de arquivo plano Panini que cria layouts para páginas usando modelos, páginas, HTML parciais. Esse processo pode ser feito usando a linguagem de modelagem do Handlebars .

Compilação SASS

Você pode compilar o SASS para CSS usando Libsass e o arquivo SASS principal será armazenado em src / assets / scss / app.scss e também os parciais SASS recém-criados serão armazenados nesta pasta. A saída do CSS será como o CSS normal, que está no estilo aninhado. Você pode compactar o CSS com clean-css e remover o CSS não utilizado da folha de estilo usando UnCSS .

Compilação JavaScript

Os arquivos JavaScript serão armazenados na pasta src / assets / js junto com o Foundation e todas as dependências serão agrupadas no arquivo app.js. Os arquivos serão agrupados conforme especificado na ordem abaixo -

  • Dependências da Fundação.
  • Os arquivos serão armazenados na pasta src / assets / js .
  • Os arquivos são empacotados em um arquivo chamado app.js .

Compressão de imagem

Por padrão, todas as imagens serão armazenadas na pasta assets / img na pasta dist . Você pode compactar as imagens enquanto constrói para produção usando gulp-imagemin, que oferece suporte a arquivos JPEG, PNG, SVG e GIF.

BrowserSync

Você pode criar um servidor BrowserSync que é um teste de navegador sincronizado disponível emhttp://localhost:8000e capaz de ver os modelos compilados usando este URL. Enquanto o servidor está em execução, a página é atualizada automaticamente quando você salva o arquivo e você pode ver as alterações feitas na página em tempo real enquanto trabalha.