Bymattlee 11ty Starter

A starter boilerplate powered by 11ty, Sanity, Gulp, Tailwind CSS, rollup.js, Alpine.js and Highway.
Alternatives To Bymattlee 11ty Starter
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Portfolio Template933
3 months ago80bsdJavaScript
Modern React Portfolio Template (FREE)
React Spring Bottom Sheet7811310 days ago37July 06, 202295mitTypeScript
Accessible ♿️, Delightful ✨, & Fast 🚀
Tailwindcss Plugins240673 years ago8August 10, 20191mitJavaScript
🔌🌊 Set of useful plugins for tailwindcss
2 months agoTypeScript
A collection of handmade Framer Motion variants made for your next project.
2 months agomitTypeScript
TailwindCSS based personal branding template. Built with react and framer-motion
Tailwindcss Spinner1452123 years ago7July 13, 2020mitJavaScript
Spinner utility for Tailwind CSS
a year agoTypeScript
🔷 My lovely portfolio built with React, NextJS, and TailwindCSS
Tailwind Animations Examples79
2 months agogpl-3.0Vue
Cool animations implemented with tailwindcss
Fabric Video Editor57
4 days ago2mitTypeScript
A simple video editor made with nextjs, react, tailwindcss, mobx, typescript and fabric.js
Front End56
25 days agomitCSS
Alternatives To Bymattlee 11ty Starter
Select To Compare

Alternative Project Comparisons

ByMattLee 11ty Starter Screenshot

ByMattLee 11ty Starter

A starter boilerplate powered by 11ty, Sanity, Gulp, Tailwind CSS, rollup.js, Alpine.js and Taxi.js.



1. Install Node 16.17.1 LTS:
2. Install Yarn
$ npm i -g yarn
3. Install all dependencies
$ yarn


In config.js, update Sanity options and environment URLs for project compilation.


Build Files For Development And Initialize Watch
$ yarn dev
Build Files For Staging
$ yarn stage
Build Files For Production
$ yarn prod

General Features

  • Features Gulp as the build pipeline that renders HTML, compiles styles and scripts, and optimizes assets.
  • Data is coming from the Sanity Cloud API. This pairs perfectly with the ByMattLee Sanity Studio Starter
  • Spins up a local development environment through Browsersync
  • Browser reload when NJK, JS, image, SVG or asset files are updated
  • Styles are injected when SCSS files are updated
  • Features 11ty as the static site generator
  • Markup is minified in staging and production environments
  • Site data can be set in src/site/_data
  • Pages in src/site will be compiled to dist
  • src/site/_includes/layouts/base.njk serves as the base template for the site
  • src/site/_includes/partials contains site partials and components that are reused across the site (modular HTML)
  • Features Tailwind CSS, a utility-first framework
  • Includes linter (Stylelint), autoprefixer, minification and sourcemap creation
  • SCSS files are located in src/assets/scss
  • main.scss in src/assets/scss serves as the base that includes the other dependent SASS files
  • main.scss gets compiled to dist/assets/css/main.min.css
  • .stylelintrc contains the settings for Stylelint
  • Info about class namespacing can be found in src/assets/scss/main.scss
  • Unused CSS (PurgeCSS) will be removed in staging and production builds
  • Features rollup.js as the module bundler
  • Includes linting (ESLint), concatenation, minification and sourcemap creation
  • Includes Taxi.js for seamless page transitions
  • Includes a custom framework for reuseable content animations
  • Includes Alpine.js for declarative DOM manipulation
  • 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
  • All local components should be placed in src/assets/js/components
  • All vendor JS can be manually added to src/assets/js/vendors if not found on Yarn
  • .eslintrc contains the settings for ESLint
  • Place all unoptimized images in the src/assets/images directory
  • They will then be optimized and placed in dist/assets/images
  • Responsive images will be generated at the following widths (if larger): 200w, 400w, 600w, 800w, 1000w, 1200w, 1400w, 1600w, 1800w
  • Use imageSrc shortcode to render responsive srcset in markup
  • Place all SVG files in the src/assets/svg directory
  • They will then be optimized and added to a sprite at dist/assets/svg/sprite.svg
Other Assets
  • All assets (fonts, videos, swfs, etc) under src/assets will be copied to dist/assets on build
  • Generates a sitemap based on the HTML files in dist
  • Generates a robots.txt file
  • Configuration can be found in src/site/robots.njk

Tailwind CSS Notes

  • All Tailwind settings can be found in ./tailwind.config.js
  • Most styles should be written as utility classes in the template markup but custom SCSS can be used for unique properties and/or magic numbers
  • Utilize the @apply directive when writing custom SCSS for efficiency:
svg {
    @apply u-inline-block u-fill-current;
  • Tailwind settings can be accessed with the theme() function:
.button {
    animation-duration: theme('transitionDuration.normal');
  • Media queries can be used with the shorthand screen() function:
.button {
    margin-right: 2.8rem;
    @screen sm {
        margin-right: 4.2rem;


  • Matt Lee - @bymattlee on most platforms
  • Visit my website at

Twitter Follow

Popular Animation Projects
Popular Tailwindcss Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Static Site Generator