Introducing Brewventy: Your Coffee-Themed Eleventy Starter Kit

· About a 2 min read time

eleventy

Brewventy Website Screenshot shown on a Macbook

Unlock the perfect brew of design, performance, and developer experience with Brewventy, a fully customizable Eleventy starter kit. Whether you’re launching a personal blog, documentation site, or simple landing page, Brewventy provides a coffee-inspired theme, easy theming system, and deployment-ready tooling—so you can focus on content, not configuration.

What Is Brewventy?

Brewventy is an open-source Eleventy template that blends:

  • Elegant design: A clean, responsive layout with a subtle coffee aesthetic
  • Dark & light modes: Toggle between Mocha (dark) and Latte (light) themes seamlessly
  • Performance optimizations: Lightweight build, minimal dependencies, and SCSS‐driven CSS
  • Accessibility: WCAG-friendly focus styles, semantic HTML, and proper aria labels

It ships with sensible defaults—typography, color palette, and animations—yet remains fully customizable via SCSS variables, Nunjucks shortcodes, and Eleventy config.

Key Features

Coffee-Themed Design

  • Mocha & Latte modes stored as data-theme="mocha" or "latte" on <html>
  • Toggle button generated by the coffeeToggle shortcode, with sun/moon icons
  • SCSS variables in src/styles/themes/_variables.scss let you tweak every color and spacing token

Eleventy Foundation

  • Powered by Eleventy 3.1.2 with built-in plugins for navigation, RSS feeds, and syntax highlighting
  • Markdown and Nunjucks support for flexible content authoring
  • Data files under src/_data/ automate site metadata, navigation, and social links

Developer Workflow

  • npm run dev: Live-reload server (Browsersync) + SCSS watch
  • npm run build: Compile SCSS and output static site to _site/
  • npm run serve: Preview the production build locally
  • Modular SCSS structure under src/styles/ and component partials under src/_includes/

Deployment Ready

  • GitHub Actions workflow (on main pushes) builds the site and deploys _site/ to your gh-pages branch
  • Detailed guides for Netlify, Vercel, and GitHub Pages in DOCS/DEPLOYMENT.md
  • One-click sponsorship via GitHub Sponsors badge in README

Getting Started

  1. Fork or clone the repo

    git clone https://github.com/kylereddoch/brewventy.git
cd brewventy

  2. Install dependencies

    npm install

  3. Run the development server

    npm run dev

    Navigate to http://localhost:8080 to see your site with live reload.

  4. Build for production

    npm run build

    Your static files will be in the _site/ directory.

  5. Deploy via GitHub Pages (automatic via Actions) or follow DOCS/DEPLOYMENT.md for Netlify/Vercel.

Theming & Customization

SCSS Variables

All colors, font sizes, and spacing tokens live in:

src/styles/themes/_variables.scss

Example:

$color-bg:       #ffffff;
$color-text:     #333333;
$color-primary:  #b5651d;   // Coffee brown
$spacing-base:   1rem;

Edit values, then rebuild with npm run build to apply your brand’s look and feel.

Shortcodes & Layouts

  • coffeeToggle: Inserts the theme-switch button.
  • recentPosts: Renders a list of latest posts with titles and descriptions.
  • Layouts in src/_includes/layouts/ control the overall page structure.

Modify or add your own shortcodes in .eleventy.js:

eleventyConfig.addShortcode("coffeeToggle", () => {
  /* returns the button HTML */ 
});

Deployment Guides

Find step-by-step instructions in DOCS/DEPLOYMENT.md, covering:

  • Netlify: Connect your repo and set build command npm run build, publish _site/.
  • Vercel: Run vercel CLI, configure output folder _site/.
  • GitHub Pages: Push gh-pages branch via Actions workflow using peaceiris/actions-gh-pages.

Contribute & Support

  • Issues & PRs: Open on GitHub Issues.
  • Sponsor: Keep the coffee flowing via GitHub Sponsors (link in README).
  • Roadmap: Future enhancements include additional theme variants, improved blog components, and plugin extensions.

Brewventy combines a delightful coffee-inspired UI with the power and flexibility of Eleventy. Clone, customize, and launch your site today—and enjoy your perfect brew! ☕🚀

Discuss on Mastodon

This site is member of the following webrings!

← Fediring →
← IndieWeb Webring →

👻 Proud member of darktheme.club 👻