skeleventy

Un squelette de démarrage de Eleventy Starter

Skeleventy vous donne un fond de teint solide pour construire des sites Web statiques rapides et accessibles. Affichez le site de démonstration.

Caractéristiques

• Un pipeline de construction propre et minimal avec SCSS et mélange de laravel pour compiler les actifs
• Gorko, un générateur de classe de services publics intelligent à Sass Sass
• Purgecss pour éliminer le CSS inutilisé
• Minficateur HTML
• Prend en charge le javascript ES2017, avec compilation Babel
• Page amicale SEO Meta, y compris le graphique ouvert et Twitter
• Chargement paresseux d'image
• Navigation mobile
• Sitemap XML
• Blog propre et simple, avec des catégories et des images en vedette

Commencer

Condition préalable

Node v10+

Installation

1. Clone the repo git clone https://github.com/josephdyer/skeleventy.git
2. cd into the project folder and run npm install
3. Start the local development server by running npm run dev Tip: Eleventy has live reload baked in!

Structure de dossier

Evercenty

• site/ contains all the global data, templates and content
• utilities/ contains Eleventy helper filters and transforms
• Each page should have it's own respective folder containing an index.md file
• Vous pouvez ensuite choisir la disposition la plus appropriée pour chaque page (ou en créer plus si vous en avez besoin)
• La navigation est alimentée par le plugin officiel de navigation Eleventy

Actifs

• css/ for compiled CSS
• js/ for compiled JavaScript
• images/ contains our site's images, an SVG icon sprite and a folder for meta images (OG, Twitter etc)

Le pipeline de construction

Laravel Mix nous donne une belle couche API au-dessus de WebPack. Skeleventy uses a simplistic set up, but you can take advantage of extending Mix with custom Webpack configurations, code splitting and plugins such as PostCSS, if you so wish.

You'll find the site's uncompiled SCSS and JS within resources/ where Mix will be watching these directories for any changes. Tip: it's best to always restart the server when creating any new partials or folders

SCSS

• scss/ is structured into opinionated sub folders
• The _config.scss file is where you can change the site's colours and the utility classes generated by Gorko
• A typographic scale has already been set up using my personal favourite Major Third scale.
• Tip: for more scales, check out Type Scale

Gorko

J'ai décidé de retirer le vent arrière en faveur de Gorko, uniquement pour sa simplicité et sa maintenabilité (en particulier pour les nouveaux développeurs). Not having too much to begin with and adding in what you need, will lead to a simpler, more maintainable codebase. Gorko vous permet d'ajouter une pincée de cours d'utilité réutilisables pour aider à garder votre code à sec. Crédit à Andy Bell pour avoir fait ce petit outil pratique

Javascrip

• utilities/ contains any global utility/helper functions
• modules/ contains your site's actual JavaScript, all kept neat and tidy within their respective modular subfolders
• You can import these subfolders into main.js using import '@modules/example-module'
• Tip: you can set up optional import aliases via the webpack.mix.js file

Une note sur les images réactives

Skeleventy n'a pas d'images réactives cuites, la raison principale étant: il est préférable d'utiliser CDN. Consultez ce tutoriel sur la configuration de Elewty avec Cloudinary.