skeleventy

Un un Equeleto de Starter

SkeleVenty le ofrece una base sólida como una roca para construir sitios web estáticos rápidos y accesibles. Ver el sitio de demostración.

Características

• Una tubería de construcción limpia y mínima con SCSS y Laravel Mix para compilar activos
• Gorko, un pequeño generador de clases de utilidad con Sass Sass
• Purgecss para eliminar el CSS no utilizado
• Minificador HTML
• Admite ES2017 JavaScript, con compilación de Babel
• Meta de página amigable con SEO, que incluye gráfico abierto y Twitter
• Imagen Carga perezosa
• Navegación móvil
• Mapa del sitio XML
• Blog limpio y simple, con categorías e imágenes destacadas

Empezando

Requisitos previos

Nodo v10+

Instalación

1. Clon the Repo git clone https://github.com/josephdyer/skeleventy.git
2. cd en la carpeta del proyecto y ejecutar npm install
3. Inicie el servidor de desarrollo local ejecutando la punta npm run dev : Eleventy tiene recarga en vivo.

Estructura de carpetas

Altuito

• site/ contiene todos los datos globales, plantillas y contenido
• utilities/ Contiene altavos filters y transforms auxiliares
• Cada página debe tener su propia carpeta respectiva que contenga un archivo index.md
• Luego puede elegir el diseño más apropiado para cada página (o crear más si es necesario)
• La navegación funciona con el complemento oficial de navegación

Activos

• css/ para CSS compilado
• js/ para JavaScript compilado
• images/ contiene las imágenes de nuestro sitio, un icono SVG Sprite y una carpeta para meta imágenes (OG, Twitter, etc.)

La tubería de construcción

Laravel Mix nos ofrece una bonita capa API en la parte superior de Webpack. SkeleVenty usa una configuración simplista, pero puede aprovechar la extensión de la mezcla con configuraciones de Webpack personalizadas, división de código y complementos como PostCSS, si así lo desea.

Encontrará el SCSS y JS no compilado del sitio dentro de resources/ donde la mezcla estará observando estos directorios para cualquier cambio. Consejo: es mejor reiniciar siempre el servidor al crear nuevos parciales o carpetas

SCSS

• scss/ está estructurado en subpoletas obstinadas
• El archivo _config.scss es donde puede cambiar los colores del sitio y las clases de utilidad generadas por Gorko
• Ya se ha establecido una escala tipográfica utilizando mi tercera escala favorita personal favorita.
• Consejo: Para más escalas, consulte la escala de tipo

Gorko

Decidí eliminar el viento de cola a favor de Gorko, por su simplicidad y mantenimiento (especialmente para los desarrolladores más nuevos). No tener demasiado para empezar y agregar lo que necesita, conducirá a una base de código más simple y mantenible. Gorko le permite agregar una pizca de clases de utilidad reutilizables para ayudar a mantener su código seco. Crédito a Andy Bell por hacer esta pequeña herramienta útil

Javascript

• utilities/ Contiene cualquier funciones globales de utilidad/ ayudante
• modules/ Contiene el JavaScript real de su sitio, todo ordenado y ordenado dentro de sus respectivas subcarpetas modulares
• Puede importar estas subcarpetas a main.js utilizando import '@modules/example-module'
• Consejo: puede configurar alias de importación opcionales a través del archivo webpack.mix.js

Una nota sobre imágenes receptivas

SkeleVenty no tiene imágenes receptivas horneadas, la razón principal es: es mejor usar CDN. Echa un vistazo a este tutorial sobre la configuración de Eletenty With Cloudinary.