<h2>Overview</h2>
<p>11ty-starter is a static site example that utilizes Eleventy as a comprehensive build system for HTML, CSS, JavaScript, and image optimization. It showcases various features of Eleventy and provides a solid foundation for developing static websites.</p>
<h2>Features</h2>
<ul>
<li><strong>Markdown content and front-matter</strong>: Allows easy creation and management of content using markdown syntax and front-matter metadata.</li>
<li><strong>Custom Nunchucks templates</strong>: Utilizes custom Nunchucks templates for styling and layout customization.</li>
<li><strong>Pages and article posts</strong>: Facilitates the creation of both static pages and dynamic article posts.</li>
<li><strong>Draft and future articles</strong>: Allows the creation of draft articles or scheduling of articles for future publishing.</li>
<li><strong>Article indexes</strong>: Provides the functionality to create indexes or lists of articles for improved navigation and organization.</li>
<li><strong>Filters for dates and word count</strong>: Offers filters to manipulate and format dates as well as count words in the content.</li>
<li><strong>Shortcode for generating navigation menus</strong>: Provides a shortcode for generating navigation menus, enhancing site navigation.</li>
<li><strong>Transformations for HTML and CSS</strong>: Supports transformations for HTML and CSS to optimize the output and improve performance.</li>
<li><strong>Image optimization</strong>: Includes image optimization capabilities to ensure efficient and optimized loading of images.</li>
<li><strong>Post CSS SCSS processing</strong>: Enables the use of SCSS with Post CSS processing for efficient CSS styling.</li>
<li><strong>Rollup.js JavaScript processing</strong>: Utilizes Rollup.js for processing JavaScript files, enhancing productivity and performance.</li>
</ul>
<h3>Development mode build</h3>
<p>To enable development mode on Linux/macOS, set the ELEVENTY_ENV environment variable to "development":</p>
<pre><code class="language-bash">export ELEVENTY_ENV=development
</code></pre>
<p>On Windows cmd:</p>
<pre><code class="language-bash">SET ELEVENTY_ENV=development
</code></pre>
<p>Or on Windows PowerShell:</p>
<pre><code class="language-bash">$env:ELEVENTY_ENV = "development"
</code></pre>
<p>Launch the Eleventy build process and server by running the following command:</p>
<pre><code class="language-bash">npx eleventy --serve
</code></pre>
<p>Navigate to http://localhost:8080 in your browser to access the development build.</p>
<h3>Production mode build</h3>
<p>To enable production mode on Linux/macOS, set the ELEVENTY_ENV environment variable to "production":</p>
<pre><code class="language-bash">export ELEVENTY_ENV=production
</code></pre>
<p>On Windows cmd:</p>
<pre><code class="language-bash">SET ELEVENTY_ENV=production
</code></pre>
<p>Or on Windows PowerShell:</p>
<pre><code class="language-bash">$env:ELEVENTY_ENV = "production"
</code></pre>
<p>Run the Eleventy build process by executing the following command:</p>
<pre><code class="language-bash">npx eleventy
</code></pre>
<p>The generated files in the build folder can be uploaded to any web host for deployment.</p>
<h2>Summary</h2>
<p>11ty-starter is an example static site that demonstrates the capabilities of Eleventy as a powerful build system for creating static websites. Its features include markdown content management, custom templates, article post management, navigation menu generation, and various optimization options for HTML, CSS, and images. With easy installation and production-ready builds, it provides a solid foundation for developing static sites efficiently.</p>


<h2>Overview</h2>
<p>Gulp CSS is an impressive development tool designed for automating CSS tasks, making it a must-have for web developers who want to enhance their workflow efficiency. With its extensive features, Gulp CSS simplifies the process of optimizing stylesheets while ensuring that the final production is clean and efficient. Whether you’re a seasoned developer or just starting out, Gulp CSS provides an accessible way to handle your CSS needs seamlessly.</p>
<p>This Gulp.js project not only compiles Sass files but also focuses on optimizing images, managing assets, and even live reloading during development. Its capability to handle multiple tasks simultaneously helps save precious time and keeps the developer experience smooth and streamlined.</p>
<h2>Features</h2>
<ul>
<li><strong>Optimizing Images</strong>: Ensures that images are compressed and ready for web, reducing load times significantly.</li>
<li><strong>Compiling Sass Files</strong>: Transforms .scss files into CSS, making it easy to work with modern CSS preprocessors.</li>
<li><strong>Handling and Inlining Assets</strong>: Efficiently manages assets and can inline them for optimized performance.</li>
<li><strong>Automatically Appending Vendor Prefixes</strong>: Simplifies cross-browser compatibility by automatically adding necessary vendor prefixes to CSS properties.</li>
<li><strong>Removing Unused CSS Selectors</strong>: Cleans up your stylesheets by eliminating any unused styles, keeping only what is necessary.</li>
<li><strong>Minifying CSS</strong>: Shrinks CSS files to save bandwidth and improve load times while keeping the styles intact.</li>
<li><strong>Reporting File Sizes</strong>: Offers insights into your CSS file sizes, allowing for better optimization decisions.</li>
<li><strong>Live-reloading</strong>: Automatically refreshes the browser whenever changes are made to CSS files, improving development efficiency.</li>
</ul>


<h2>Overview</h2>
<p>Gulp.js is a powerful toolkit that streamlines your workflow and improves efficiency in front-end development. By automating routine tasks, it allows developers to focus on creating high-quality web applications without getting bogged down by repetitive processes. Whether you are modifying HTML files, managing CSS or optimizing images, Gulp.js provides an effective foundation for modern web development.</p>
<h2>Features</h2>
<ul>
<li><strong>HTML Modification and Minification</strong>: Easily modify your HTML files and minify them for faster load times without sacrificing quality.</li>
<li><strong>Image Compression</strong>: Optimize images for the web by compressing them and converting them into data URIs, reducing file size and enhancing performance.</li>
<li><strong>Sass Compilation</strong>: Automatically compile Sass into CSS, along with auto-prefixing for cross-browser compatibility and minification for optimal performance.</li>
<li><strong>JavaScript Linting</strong>: Ensure that your JavaScript code adheres to best practices by linting it, which helps catch errors early in the development process.</li>
<li><strong>Dependency Management</strong>: Effortlessly load and manage dependencies, ensuring that your project runs smoothly with all necessary libraries included.</li>
<li><strong>File Concatenation and Minification</strong>: Combine multiple files into one and minify them to reduce the number of requests made to the server, improving load times.</li>
<li><strong>Deployment Automation</strong>: Simplify the process of file management and deploy your website directly to live servers with minimal effort, making updates seamless.</li>
</ul>


<h2>Overview</h2>
<p>Gulp4-css is a powerful toolkit that simplifies the workflow of web developers by automating essential CSS tasks. With a solid foundation built on Gulp.js 4, this project streamlines everything from image optimization to live-reloading in a clean and efficient manner. Whether you are a novice or an experienced developer, this setup allows you to focus on crafting beautiful websites without getting bogged down by repetitive tasks.</p>
<p>The project is designed to make CSS management more efficient, providing versatility for modern web applications. It incorporates best practices such as compiling Sass files and ensuring cross-browser compatibility through automated vendor prefixing. With Gulp4-css, managing CSS has never been more straightforward.</p>
<h2>Features</h2>
<ul>
<li><strong>Optimizing Images</strong>: Automatically compresses images to enhance performance without quality loss.</li>
<li><strong>Compiling Sass .scss Files</strong>: Translates your Sass files into standard CSS, simplifying the development process.</li>
<li><strong>Handling and Inlining Assets</strong>: Manages and inlines your assets seamlessly, making your CSS cleaner and more maintainable.</li>
<li><strong>Auto-Appending Vendor Prefixes</strong>: Ensures cross-browser compatibility by automatically adding necessary vendor prefixes to CSS properties.</li>
<li><strong>Removing Unused CSS Selectors</strong>: Cleans up your code by eliminating selectors that are not in use, which helps reduce file size.</li>
<li><strong>Minifying CSS</strong>: Optimizes the file size of your CSS files for faster loading times on websites.</li>
<li><strong>Reporting File Sizes</strong>: Provides insights into the size of your CSS files, helping you make informed decisions about optimizations.</li>
<li><strong>Outputting Sourcemaps</strong>: Generates sourcemaps for easier debugging in browser developer tools, improving your workflow.</li>
<li><strong>Live-Releasing CSS Changes</strong>: Facilitates live-reloading so you can see changes immediately in the browser as you work.</li>
</ul>


Craigbuckler

11ty Starter

Gulp Css

Gulp Tutorial

Gulp4 Css