fylgjafylgja
11

11ty Starter Template

screenshot of 11ty Starter Template
eleventy
scss

11ty starter template build using Fylgja CSS.

GithubDemo

Overview

The Fylgja 11ty starter template is a ready-to-use template for building websites using the 11ty static site generator. It is built using the Fylgja CSS framework and includes several features and configurations to streamline the development process. This template is a trimmed-down version of the Fylgja.dev website, providing the necessary components without excessive additions.

Features

  • Fylgja CSS: The template is built using the Fylgja CSS framework, offering a collection of pre-designed components and styles to enhance the website's appearance.
  • Eleventy Sass Compiler: This template includes a Sass compiler for processing Sass files, allowing for easy styling of the website.
  • PostCSS: PostCSS is included to enable various transformations on CSS files, such as autoprefixing, minification, and more.
  • Rollup: The template utilizes Rollup, a JavaScript module bundler, to bundle and optimize the JavaScript files of the website.
  • HTML Dialog with outside click close support: This feature provides a customizable HTML dialog component with support for closing the dialog by clicking outside of it.
  • Eleventy Img & Navigation: The template includes Eleventy Img for optimized image processing and Eleventy Navigation for generating navigation menus.
  • Prebuilt head with OG & Twitter tags: The template automatically generates the meta tags required for social sharing, providing an out-of-the-box SEO-friendly setup.
  • Support for loading page-specific CSS and JavaScript: This feature allows for including CSS and JavaScript files specific to individual pages, helping to keep the code modular and organized.
  • Offline page with service worker: The template includes a service worker that enables the website to work offline, providing a better user experience for visitors.

Installation

To use the Fylgja 11ty starter template, follow these steps:

  1. Click on the big green button labeled "Use this template" to create a new repository using the template.
  2. Clone the newly created repository to your local machine.
  3. Open the src/_data/meta.js file to modify the site-specific information, such as the site URL.
  4. If needed, explore the eleventy.js config file and the Eleventy site to make additional configurations.
  5. Start building your website using the template as a starting point.

For more detailed information, please refer to the demo and package.json files.

Summary

The Fylgja 11ty starter template is a convenient starting point for building websites using the 11ty static site generator. It offers several key features such as the Fylgja CSS framework, Eleventy Sass Compiler, PostCSS, Rollup, and more. The template simplifies the development process by providing prebuilt components, configurations for customization, and optimization techniques. With the Fylgja 11ty starter template, developers can build modern and visually appealing websites efficiently.

eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.