Skeleventy gives you a rock solid foundation to build fast and accessible static websites. View the demo site.
git clone https://github.com/josephdyer/skeleventy.git
cdinto the project folder and run
npm run devTip: Eleventy has live reload baked in!
site/contains all the global data, templates and content
utilities/contains Eleventy helper
css/for compiled CSS
images/contains our site's images, an SVG icon sprite and a folder for meta images (OG, Twitter etc)
Laravel Mix gives us a nice API layer on top of 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/is structured into opinionated sub folders
_config.scssfile is where you can change the site's colours and the utility classes generated by Gorko
I decided to remove Tailwind in favour of Gorko, purely for its simplicity and maintainability (especially for newer developers). Not having too much to begin with and adding in what you need, will lead to a simpler, more maintainable codebase. Gorko lets you add a sprinkle of reusable utility classes to help keep your code DRY. Credit to Andy Bell for making this handy little tool
utilities/contains any global utility/helper functions