Discover 5t3ph/11ty-rocks Open Source project

Minimal snippets for modern CSS layouts and components

2,130

smolcss

Live, in-browser detection of modern CSS support for selectors, features, and at-rules. Applies support-based classes, exposes a results object, and allows custom tests.

791

SupportsCSS

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

270

11ty-sass-skeleton

Quickly launch an 11ty-generated static site. Includes a minimal Sass framework, generated sitemap, and RSS feed.

241

11ty-netlify-jumpstart

Generate accessible UI colors from your base color tokens.

235

a11y-color-tokens

Posts from the series "Modern CSS Solutions to Old CSS Problems"

159

moderncss-dot-dev

A collection of quick copy HTML snippets for a variety of common scenarios.

140

htmlrecipes

Minimal Sass/HTML Template Site - dart sass powered, includes stylelint and prettier, and autoprefix upon build. develop script includes hot-reload via browsersync.

131

html-sass-jumpstart

Extremely minimal Eleventy starter to kickstart a simple multi-page site / a nearly opinionless foundation to continue building on.

smol-11ty-starter

Query for CSS brower support data, combined from caniuse and MDN, including version support started and global support percentages.

css-browser-support

Learn about accessible button contrast then generate your own accessible button color palette

buttonbuddy

Generate simple, responsive email templates, with inlined CSS on build using 11ty.

11ty-email-generator

Create a personal RSS Reader using Eleventy. Review recordings to learn how it was built!

eleventy-rss-reader

Use the power of 11ty to generate web components (custom elements).

11ty-web-component-generator

A starter environment for creating plugins for Eleventy (11ty).

eleventy-plugin-template

Create dynamic images sized for social media tags for your Eleventy content.

eleventy-plugin-social-images

A slim 11ty + Sass setup to get started creating custom Twitch scenes, including responding to chat commands with ComfyJS.

11ty-twitch-scenes

Process CSS in Eleventy (11ty) with LightningCSS to minify, prefix, and add future CSS support.

eleventy-plugin-lightningcss

Compile Sass in Eleventy (11ty) and process it with LightningCSS to minify, prefix, and add future CSS support.

eleventy-plugin-sass-lightningcss

A starter for Style Stage submissions with the source Sass from the base theme + BrowserSync.

stylestage-sass

It's a move considered revolutionary by many...

nojson

An example of using 11ty Serverless to. create site search using local and external data sources.

11ty-serverless-search

A demonstration of returning a generative art SVG via Netlify On-Demand Builders

odb-generative-svg

An Eleventy theme for offering premium content to members. Requires Supabase and Netlify accounts.

11ty-membership-site

Applies bootstrap classes to various fields.

gravity-forms-snippets

PHP

objectfit-focalpoint

Generate the object-position value to capture an image's focal point given a custom aspect-ratio.

11ty-design-system-example

The source files repository for the video series for beginners to web development - "Learn How to Make a Website with Steph" - available on YouTube: https://www.youtube.com/channel/UC8qc2AyBbNmvgIky6236nHA

howtowebdev

Eleventy (11ty) plugin that provides a configurable filter to display an estimated read time for Eleventy content, optionally with an emoji visual indicator.

eleventy-plugin-emoji-readtime

Source code for the egghead course "Accessible Cross-Browser CSS Form Styling". Visit the link to take the course!

course-accessible-cross-browser-forms

Enforce a typed frontmatter schema for templates within an Eleventy collection.

eleventy-plugin-collection-schemas

Developed for Learn With Jason - a dashboard to showcase lots of modern CSS features!

lwj-modern-css

A barebones demo of basic but essential 11ty features.

11ty-basics

An Eleventy environment for creating CSS Houdini Paint worklets.

11ty-css-houdini

A yearly review of your public GitHub repository stats.

repos-wrapped

course-grid-flexbox-landing-page

11ty-egghead-collection

Find the fails, submit a PR with fixes. See link for live demo.

a11y-fails

Eleventy filters for decorating inline-code with CSS broswer support data or rendering support tables. Data combined from caniuse and MDN, including version support started and global support percentages.

eleventy-plugin-css-browser-support

eleventy-plugin-objectfit-focalpoint

Starter files for the video course "Learn How to Make a Website with Steph"

howtowebdev-starter

An Eleventy shortcode to add "Open in CodePen" functionality for code demos.

eleventy-plugin-open-in-codepen

An Eleventy-based Twitch scenes starter with a chat-controlled game! Includes ComfyJS with command responses, and 6 scenes including guest support.

twitch-scenes-gamified

Template HTML/Sass site that retrieves DEV posts with a Netlify function. Uses node-sass and includes Browsersync for hot reloading. Build styles are minified and autoprefixed.

devto-netlify-starter

Tiny demo with starter concepts for 11ty Edge.

11ty-edge-demo

11ty-serverless-esbuild-test

Stephanie Eckles' main site, built with Eleventy.

tdbc

A browser source Twitch poll widget created on-demand via the !poll chat command.

pollmychat

howtowebdev-capstone

A template to manage lessons for a related course using yarn workspaces.

course-structure

An Eleventy starter as built for the following CSS-Tricks tutorial: https://css-tricks.com/a-community-driven-site-with-eleventy-building-the-site/

meow-vs-bowwow

Learn how to setup Twitch scenes built with Eleventy in 30 minutes! Includes embedded chat, and chat command responses.

egghead-twitch-scenes

A simple web component that retrieves a selection of CSS blog links with customization available via CSS variables.

css-webring

Features built on-stream for Frontend Horse

cursed-horse

houdini-decorative-barcharts

Get hydrated by running this solo or appending to a watch type of command for reminders at your chosen minute interval.

hydrate-me

Building live on Twitch! https://twitch.tv/5t3phDev

11ty-demo-theme

A compilation of replies to a silly tweet asking about named CSS colors.

popular-named-css-colors