Eleventy Themes Logo Eleventy Themes
Smix Eleventy Starter screenshot

Smix Eleventy Starter

Author Avatar Theme by Maybethisisru
Updated: 22 Nov 2022
117 Stars

A standards-respecting starter kit for Eleventy. Go Indie.

Github Live Preview

Overview

The SmixA starter kit for Eleventy is a standards-respecting package designed for indie developers. It is considered complete for the author’s needs but can be enhanced through pull requests from the community. The kit includes features for a polished reading experience, RSS feed compatibility, dark mode, date filters, meta tags for SEO, sitemap generation, Markdown writing support, code blocks with Prism themes, Microformats2 support for IndieWeb, and future-ready CSS and JavaScript.

Features

  • Typeset: Enhances the build time to provide a more polished reading experience.
  • Atom Feed: Standards-compliant Atom feed with support for published and updated datetime stamps on posts.
  • Dark Mode: Includes a custom media query for dark mode out of the box.
  • Date Filters: Provides filters for friendly dates (e.g., 10 March 2020) and machine-parseable dates (ISO8601).
  • Meta Tags for SEO: Supports meta tags for social networks like Open Graph and Twitter, allowing for attractive card displays when sharing links on social media or search engines.
  • Sitemap: Generates a sitemap with change frequency for improved search engine crawling.
  • Robots.txt: Includes a robots.txt file for further control over search engine indexing.
  • Writing in Markdown: Supports Markdown writing, allowing for easy content creation.
  • Linking to Pages or Posts: Provides a shortcode for linking to pages or posts.
  • Code Blocks: Enables code blocks with Prism themes through an Eleventy plugin.
  • Microformats2 Support: Includes basic support for Microformats2, including h-card, h-entry, h-feed, and post types like Article, Note, Reply, and Photo.
  • Future-Ready CSS: Uses PostCSS to write CSS with upcoming standards, including imports, nesting, purge, minification, autoprefixer, custom properties, custom media queries, custom selectors, and LCH color coding.
  • Accessibility: Includes the Atkinson font by The Braille Institute for improved accessibility and ensures good contrast throughout the kit.
  • Custom Media Query for Motion: Provides a custom media query for animations to cater to those who prefer less motion.

Installation

To install the SmixA starter kit for Eleventy, follow these steps:

  1. Clone the repository to your local machine.
  2. Open a terminal and navigate to the project directory.
  3. Run the following command to install the dependencies:
npm install
  1. Customize the configuration files according to your needs.
  2. Start the development server using the following command:
npm run dev
  1. Open your browser and visit http://localhost:8080 to view the site.

Summary

The SmixA starter kit for Eleventy is a comprehensive package that provides indie developers with a standards-respecting foundation for their projects. It offers features such as Typeset for a polished reading experience, Atom feed compatibility, dark mode, date filters, SEO meta tags, sitemap generation, Markdown support, code blocks with Prism themes, Microformats2 support for IndieWeb, future-ready CSS, and accessibility considerations. By using the SmixA starter kit, developers can focus on content creation and have a strong foundation for building their websites or applications.