skeleventy

Um esqueleto inicial elevador

O Skeleventy oferece uma base sólida para construir sites estáticos rápidos e acessíveis. Veja o site de demonstração.

Características

• Um pipeline de construção limpo e mínimo com SCSS e Mix Laravel para compilar ativos
• Gorko, um pequeno gerador de classe de utilidades de Sass SASS
• Purgecss para remover CSS não utilizado
• Minificador HTML
• Suporta o ES2017 JavaScript, com compilação Babel
• Seo Friendly Page Meta, incluindo gráfico aberto e Twitter
• Imagem de carregamento preguiçoso
• Navegação móvel
• XML Sitemap
• Blog limpo e simples, com categorias e imagens em destaque

Começando

Pré -requisitos

Nó v10+

Instalação

1. Clone the Repo git clone https://github.com/josephdyer/skeleventy.git
2. cd na pasta do projeto e execute npm install
3. Inicie o servidor de desenvolvimento local executando npm run dev Dip: Eleventy tem recarregamento ao vivo assado!

Estrutura de pastas

Eleventy

• site/ contém todos os dados, modelos e conteúdo globais
• utilities/ contém elevadores filters e transforms auxiliares
• Cada página deve ter sua própria pasta respectiva contendo um arquivo index.md
• Você pode escolher o layout mais apropriado para cada página (ou criar mais, se precisar)
• A navegação é alimentada pelo plugin oficial de navegação elevadora

Ativos

• css/ para CSS compilado
• js/ para javascript compilado
• images/ contém imagens de nosso site, um sprite de ícone SVG e uma pasta para meta imagens (OG, Twitter etc.

O pipeline de construção

O Laravel Mix nos dá uma boa camada de API no topo do Webpack. O SKELEVENTE usa uma configuração simplista, mas você pode aproveitar a extensão do mix com configurações personalizadas do WebPack, divisão de código e plug -ins, como o PostCSS, se você deseja.

Você encontrará o SCSS e JS não compilados do site dentro de resources/ onde o mix estará assistindo a esses diretórios para quaisquer alterações. Dica: é melhor sempre reiniciar o servidor ao criar novos parciais ou pastas

SCSS

• scss/ é estruturado em sub -pastas opinativas
• O arquivo _config.scss é onde você pode alterar as cores do site e as classes utilitárias geradas por Gorko
• Uma escala tipográfica já foi configurada usando minha terceira escala principal favorita.
• Dica: Para mais escalas, confira a escala do tipo

Gorko

Decidi remover o Tailwind em favor de Gorko, puramente por sua simplicidade e manutenção (especialmente para desenvolvedores mais novos). Não ter muito para começar e adicionar o que você precisa, levará a uma base de código mais simples e sustentável. O Gorko permite adicionar uma pitada de classes de serviços públicos reutilizáveis ​​para ajudar a manter seu código seco. Crédito a Andy Bell por tornar esta pequena ferramenta útil

JavaScript

• utilities/ contém quaisquer funções globais de utilidade/ auxiliar
• modules/ contém o JavaScript real do seu site, todos mantidos arrumados e arrumados dentro de suas respectivas subpastas modulares
• Você pode importar essas subpastas para main.js usando import '@modules/example-module'
• Dica: você pode configurar aliases de importação opcionais através do arquivo webpack.mix.js

Uma nota sobre imagens responsivas

O SKELEVENTE não tem imagens responsivas assadas, a principal razão de ser: é melhor usar a CDN. Confira este tutorial sobre como configurar elente com o Cloudinary.