A starter boilerplate powered by 11ty, Sanity, Gulp, Tailwind CSS, rollup.js, Alpine.js and Highway.
A starter boilerplate powered by 11ty, Sanity, Gulp, Tailwind CSS, rollup.js, Alpine.js and Taxi.js.
$ npm i -g yarn
$ yarn
In config.js
, update Sanity options and environment URLs for project compilation.
$ yarn dev
$ yarn stage
$ yarn prod
src/site/_data
src/site
will be compiled to dist
src/site/_includes/layouts/base.njk
serves as the base template for the sitesrc/site/_includes/partials
contains site partials and components that are reused across the site (modular HTML)src/assets/scss
main.scss
in src/assets/scss
serves as the base that includes the other dependent SASS filesmain.scss
gets compiled to dist/assets/css/main.min.css
.stylelintrc
contains the settings for Stylelintsrc/assets/scss/main.scss
main.js
in src/assets/js
serves as the main JS file that includes and runs all components and will be compiled to dist/assets/js/main.min.js
src/assets/js/components
src/assets/js/vendors
if not found on Yarn.eslintrc
contains the settings for ESLintsrc/assets/images
directorydist/assets/images
imageSrc
shortcode to render responsive srcset
in markupsrc/assets/svg
directorydist/assets/svg/sprite.svg
src/assets
will be copied to dist/assets
on builddist
src/site/robots.njk
./tailwind.config.js
@apply
directive when writing custom SCSS for efficiency:svg {
@apply u-inline-block u-fill-current;
}
theme()
function:.button {
animation-duration: theme('transitionDuration.normal');
}
screen()
function:.button {
margin-right: 2.8rem;
@screen sm {
margin-right: 4.2rem;
}
}
@bymattlee
on most platforms