https://11ty.Rocks

11ty Rocks!A collection of Eleventy (11ty) starters, projects, plugins, and resources created by Stephanie Eckles (@5t3ph).11ty Rocks! Skip to content 11ty Rocks! A collection of Eleventy (11ty) starters, projects, plugins, and resources created by Stephanie Eckles (@5t3ph) Eleventy (11ty) is a simple to use, powerful static site generator that is capable of mixing template languages. Content can be written with Markdown or one of the other ten template languages. Or, dynamically create pages from local data or external sources that are compiled at build time. It has zero client-side JavaScript dependencies, so your site is truly static. This leads to phenomenal performance out of the box, as you can see from all the 💯 listed on Speedlify. Check out my overview of key Eleventy features and learn how to exceed the traditional limits of static. View the full 11ty docs at 11ty.dev, and bookmark this site or grab the RSS to keep updated on new resources, tips, and tutorials. Smart Incremental Rebuilds With eleventyImport 🍿 2 min. read • Posted on: Mar 18, 2023 Ensure templates that display content from collections, like a blog index, rebuild when associated collection content changes. Read Post View Post Archive 📝 11ty Quick Tips Useful snippets and ideas for managing and creating 11ty projects. Includes tips on VSCode settings, site metadata, permalinks, and more! View All Tips ⚙️ .eleventy.js Config Samples A collection of filters, shortcodes, and other tips for extending 11ty, such as working with dates and extending built-in filters. View All Samples Resources Starters, plugins, and externally hosted articles and tutorials Don't miss the Community Resources and add your own! Tutorials 📺 Build an Eleventy Site from Scratch Build a site in 20 mins! Start from a blank project and build up to an 11ty site that includes Sass, a blog collection, and is prepared to source content from a headless CMS. Watch the Collection 🤝 Build a Community Site With Eleventy Based on my experience building StyleStage.dev, this tutorial will cover how to create a full-featured 11ty site including: How to initialize Eleventy and create useful develop and build scripts Recommended setup customizations How to define custom data and combine multiple data sources Creating layouts with Nunjucks and Eleventy layout chaining Deploying to Netlify Build Your Community 📺 11ty.Rocks on Youtube 11ty Rocks is now on YouTube! Subscribe today so you don't miss a video. Content will be in support of topics explored here on 11ty.Rocks. Subscribe to 11ty Rocks Starters 💀 11ty Sass Skeleton Starter Featuring absolutely nothing beyond a base HTML5 template and the essential setup to watch and compile your Sass alongside 11ty. Includes minifiying and autoprefixing of styles postbuild. Get the Starter 🚀 11ty Netlify Jumpstart Quickly launch an 11ty-generated static site. Includes a minimal Sass framework, and generated sitemap, RSS feed, and social share preview images. Test Drive the Jumpstart 👥 11ty Membership Site An Eleventy theme for offering premium content to members by using Edge-powered authentication. Requires Supabase and Netlify accounts. Review this article on the high-level membership theme concepts to learn how members-only content works. Get this theme 🌱 Smol 11ty Starter An extremely minimal Eleventy starter to kickstart a simple multi-page site that provides a nearly opinionless foundation to continue building on. You can preview this starter or jump right to the repo. Use Smol Starter 🔖 11ty RSS Reader Starter Provide permalinks to your favorite RSS feeds to populate a personalized RSS reader Jamstack application using Eleventy. Bonus: This application was built on Twitch livestream, and recordings will be available on the 11ty Rocks YouTube channel. The course covers advanced 11ty templating. Get the RSS Starter 🎥 Twitch Scenes 11ty Starter Template Scenes are optimal at 1280x720, and are included for: Preshow, postshow, and break messages Main scene with large capture area and host webcam capture bonus slideshow layout All scenes include a lower third for stream details, which also features embedded chat. Get the Scenes Template Plugins 🛠 Eleventy Plugin Template Kickstart your 11ty plugin project with this template that includes a barebones 11ty build to test your functionality, and docs on how to test your plugin locally. Also includes a boilerplate for your plugin README, and demonstrates setting up plugin config defaults. Build Your Plugin 🎨 Plugin: Sass + LightningCSS Compile Sass in Eleventy (11ty) and process it with LightningCSS to minify, prefix, and add future CSS support. Also respects either your package.json browserslist or a .browserslistrc, otherwise the default targets are > 0.2% and not dead. Requires Eleventy v2 beta or stable. Add Sass to 11ty ⚙️ Plugin: Collection Schemas Enforce a typed frontmatter schema for templates within an Eleventy collection. Define a unique schema per collection, then receive output during development and builds to note incorrectly typed, missing, invalid, or misplaced custom data keys. Docs for Collection Schemas ↗️ Plugin: Open in CodePen This plugin provides an Eleventy shortcode to add "Open in CodePen" functionality for code demos. The functionality pairs well with the result of this tutorial on creating live static code demos. Docs for Open in CodePen 🍿 Plugin: Emoji Read Time This plugin provides a filter that displays an estimated read time for Eleventy content, optionally with an emoji visual indicator. The plugin offers config options to change or remove the emoji, update the word-per-minute, and alter the label. A simple string is returned, so the text formatting is up to you. The default appearance displays one 🍿 per rounded 5 minutes of estimated reading time, ex: 🍿 7 min. read Docs for Emoji Read Time 🖼 Plugin: Social Images Based on my tutorial, this package creates dynamic images sized for social media tags (particularly Twitter and Facebook) based on your available pages. Use one of the predefined color themes, or define your own style, template, or both to customize the layout (like the ones in use on 11ty Rocks). Configure the CLI script to run after your Eleventy build, and by default images will be created in _site/previews/ as png images. Use the CLI options to define a custom outputDir and/or a custom imageDir. Docs and Install 🍿 Plugin: Object-Fit Focal Point This plugin adds an Eleventy Nunjucks shortcode to provide the functionality of generating an image's object-position value in order to keep the focal point in view when setting CSS aspect-ratio and object-fit: cover. Test drive the results by using the utility app. Docs for Object-Fit Focal Point Other Resources 👩‍💻 Single-Page Setup (recorded livestream) I joined Colby Fayock on Twitch in a slightly chaotic hour where I began building SmolCSS.dev with Eleventy. Check out the recording and learn more about setting up Eleventy content for use in a single-page site, including advanced template and layout features using Nunjucks. Watch Recording ⚡️ 11ty Web Component Generator Eleventy makes it possible to mix templating languages. More importantly to this generator is that we can customize the output file type and composite a file from includes. This generator works with the inherent features of 11ty. Web components are generated within a Nunjucks (.njk) template that outputs the final .js file. Demo the Generator 💌 Email Generator Generate simple, responsive email templates, with inlined CSS on build. Use the Sass theme setup to re-brand the default template, and use the frontmatter keys for flexibilty in the layout. Check out the README for additional tips on creating emails. Create Your Emails 🎩 11ty CSS Houdini Worklet Generator CSS Houdini worklets require a server to run. While there are many ways to create an environment for developing and testing your worklet, as a static site generator, Eleventy provides a slim way to get setup and testing quickly so you can focus on creating your worklet! You can preview the included worklet example on this CodePen. Details and Template © 2024 11ty Rocks! by Stephanie Eckles ModernCSS.dev Buy Me A Coffeeenen1774434481https://11ty.Rocks

Guhindura urubuga rwawe?

Uriko ukora iki?