portfolio_one page template

Modelo de portfólio de uma página - arquivado

Modelo de site plano e responsivo, projetado e codificado por Maxim Orlov.

Demonstração: http://website-templates.github.io/portfolio_one-page-template

Mockup de produtos criado com http://magicmockups.com/

Conteúdo

• Estrutura de pasta e arquivo
• Requisitos:
  • EditorConfig
• Como começar
• Configuração do site
• Tarefas
  • Limpar
  • Dev
  • Construir
  • Reconstruir
  • Servidor
  • Sprite
• Recarregar ao vivo
• Licença

Estrutura de pasta e arquivo

 ./
├── .editorconfig
├── gulpfile.js
├── package.json
├── README.md
|
├── gulp_tasks/                                * gulp tasks
|   ├── config/                                * gulp tasks config
│   |   ├── paths.js
│   |   └── aliases.js
│   |
|   └── task.js
|
├── screenshots/                               * responsive test screenshots
|
├── dev/                                       * site source
│   ├── images/                                * image sources
|   │
│   ├── pug/                                   * templates
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.pug
|   │   ├── helpers/                           * helper mixins
|   │   ├── vendor/                            * third-party code
|   │   ├── layouts/                           * page layouts
|   │   └── pages/                             * main pages templates
|   │
│   ├── js/                                    * source js
|   |   ├── vendor/                            * vendor scripts library
|   |   ├── lib/                               * site scripts library
|   │   ├── head.js                            * head scripts
|   │   └── body.js                            * body scripts
|   │
|   ├── sass/                                  * sass preprocessor styles
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.sass
|   │   ├── helpers/                           * mixins and vars
|   │   ├── vendor/                            * third-party code
|   │   ├── custom.sass
|   │   ├── noscript.sass
|   │   └── screen.sass
|   │
│   ├── helpers/                               * helper files
|   |   ├── favicon.ico
|   |   └── .htaccess
|   │
│   ├── fonts/                                 * font sources
|   │
│   └── data/                                  * configs and data for templates
│
└── build/                                     * built source
    ├── index.html
    ├── page.html
    |
    └── static/                                * static assets
        ├── css/                               * minified styles
        |
        ├── images/                            * minified images
        │
        ├── js/                                * minified assembled js
        |
        └── fonts/                             * @font-face-ready webfonts

Requisitos

• Node.js
• Build Sytem: Grunt ou Gulp
• Opcionalmente:
  • EditorConfig

EditorConfig

Este projeto possui um arquivo .editorConfig na raiz. Ele descreve o estilo de recuo, os espaços em branco à direita etc. Veja mais detalhes aqui

Como começar

Se você nunca usou Gulp antes, não deixe de conferir o guia de início, verifique também esses receitos

Antes de começar, você precisa ter instalado o NPM , bem como o Gulp Globalmente.

Algumas etapas simples para começar:

• Instale as dependências do package.json em execução: npm install .
• Execute tarefas da lista abaixo e inicie o desenvolvimento!
• Editar configurações gerais no dev/data/config.json Consulte a seção Configuração do site

Configuração do site

Este caldeira usa modelos de pug com configurações de dados externas. As configurações principais podem ser encontradas no arquivo dev/data/config.json . E eles estão disponíveis para uso em modelos com config.key-name

Tarefas

Aí vem grupos de tarefas de supra com algumas explicações

Limpar

Remova os espaços reservados dos diretórios de trabalho. Gulp: gulp cleanup

• Remova os arquivos gitkeep

Dev

Tarefa de dev com servidor estático. Gulp: gulp dev

• JavaScripts de pacote
• Compilar folhas de estilo SASS
• Adicione prefixos de fornecedores no CSS
• Combine consultas de mídia em arquivos CSS
• Compilar modelos de pug
• Sincronizadores e outros ativos
• Fontas de sincronização
• Sincronizar imagens
• Execute o servidor estático BrowSerSync com recarga ao vivo usando
• Cuidado com mudanças e execute tarefa de desenvolvimento

Construir

Construir tarefa. Gulp: gulp build

• Minificar imagens
• Minificar arquivos JavaScript
• Minify Stylesheets
• Minify HTML
• Run BrowSerSync Static Server

Reconstruir

Regenerar e construir o projeto executando todas as tarefas. Gulp: gulp rebuild

• JavaScripts de pacote
• Compilar folhas de estilo SASS
• Adicione prefixos de fornecedores no CSS
• Combine consultas de mídia em arquivos CSS
• Compilar modelos de pug
• Sincronizadores e outros ativos
• Fontas de sincronização
• Sincronizar imagens
• Minificar imagens
• Minificar arquivos JavaScript
• Minify Stylesheets
• Minify HTML

Servidor

Execute o servidor sem procurar alterações. Gulp: gulp server

• Run BrowSerSync Static Server

Recarregar ao vivo

Este projeto usa o BrowSerSync como servidor estático com a opção de recarga ao vivo ativada e configurada.

Licença

Mit