11ty Sass Skeleton screenshot

11ty Sass Skeleton

Author Avatar Theme by 5t3ph
Updated: 17 Jan 2024
251 Stars

Featuring absolutely nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside 11ty.

Categories

Overview:

The logo11ty Sass Skeleton is a basic HTML5 template with the necessary setup to watch and compile Sass alongside the 11ty static site generator. It includes features such as minifying and autoprefixing styles during development and build using Lightning CSS. The v3 update allows for processing during development as well.

Features:

  • Base HTML5 template: Provides a starting point for web development.
  • Sass compilation: Allows for the use of Sass stylesheets and compiles them into CSS.
  • 11ty integration: Works seamlessly with the 11ty static site generator.
  • Minifying and autoprefixing: Automatically minimizes and adds browser prefixes to CSS during development and build.
  • Standalone plugin: Can be added to existing 11ty projects to enable Sass and LightningCSS processing.
  • Hot reload: Allows for quick preview and immediate updates during development.
  • Production build: Creates a production-ready build with minified and autoprefixed CSS.

Installation:

To install the logo11ty Sass Skeleton, follow these steps:

  1. Clone the repository:
git clone https://github.com/5t3ph/logo11ty-sass-skeleton.git
  1. Install dependencies:
npm install
  1. Start the development server with hot reload:
npm start
  1. Make changes to the Sass files and observe the updates in real-time on localhost:8080.

  2. Build a production-ready version with minified and autoprefixed CSS:

npm run build

Summary:

The logo11ty Sass Skeleton provides a minimal HTML5 template with the necessary setup to compile and watch Sass alongside the 11ty static site generator. It includes features such as minifying and autoprefixing of styles during development and build using Lightning CSS. The inclusion of a standalone plugin allows for easy integration into existing 11ty projects. With its hot reload functionality and production build capabilities, it offers a convenient solution for web developers looking to leverage Sass and 11ty in their projects.