77 posts in 'CSS/Sass'
11ty Fix Inline Styles Livereload
writings of a coder + sysadmin
Dec 6, 2024
by equilibriumuk (15 posts) · Website & RSS feed
Categories: CSS/Sass
Notes on Upgrading to Eleventy 3.0
My blog is now generated by Eleventy 3.0, which was released last month. The upgrade process took me a few hours split over two evenings and I took a few notes. This probably isn’t an interesting write up for hardly anyone – but if you have any of the same 11ty concerns I do, you may find a solution in here.
Nov 21, 2024
by Harris Lapiroff (4 posts) · Website & RSS feed
Categories: CSS/SassDatesFiltersPaginationPermalinksUpgrading
Build static website with 11ty. Part 2
Nov 21, 2024
by ProDeveloper (2 posts) · Website & RSS feed
Categories: BloggingCSS/SassConfigurationGetting StartedRSS
Building My Resume in HTML using Eleventy
Nov 3, 2024
by Michael Engen (1 post) · Website
Categories: CSS/SassGlobal DataHow to...
Adding Sidebars to an Eleventy Site
Nov 3, 2024
by John M. Wargo (43 posts) · Website & RSS feed
Categories: CSS/SassHow to...Shortcodes
Migrating from WordPress.com to self-hosted Eleventy via Ghost
Web standards, accessibility, free/open source software, old UNIX/TV/Music and occasional wargaming
Oct 30, 2024
by Dr. Matt Lee (1 post) · Website & RSS feed
Categories: CSS/SassMigrating to Eleventy
Open Graph Metadata and Images in Eleventy Made Easy
Blog posts are meant to be shared. When sharing links, you'll often see a preview on social media and instant messengers. But how does it work and how can you do it with Eleventy?
Oct 26, 2024
by Sebin Nyshkim (3 posts) · Website & RSS feed
Categories: CSS/SassFront MatterGlobal DataHow to...ImagesPlugins
Responsive, Self-hosted Images for Your Eleventy Blog
While you can certainly host your image files with the Git repo your Eleventy site is checked into, or add them manually after building it, neither option is ideal if you want responsive images in multiple formats to save precious bandwidth.
Oct 22, 2024
by Sebin Nyshkim (3 posts) · Website & RSS feed
Categories: CSS/SassConfigurationImages
Building a Blog with Eleventy (blind, any%)
I recently felt like getting back into blogging. But setting up and maintaining WordPress felt like more than I was looking for. I was looking for something much simpler. Preferably file-based and with Markdown support. That was my introduction to Eleventy.
Oct 19, 2024
by Sebin Nyshkim (3 posts) · Website & RSS feed
Categories: BloggingCSS/SassCollectionsConfigurationData CascadeFiltersGetting StartedGlobal DataLayoutsMarkdownNavigationPaginationPluginsShortcodes
Newspaper style layout for my content
I designed a layout in the style of an old broadsheet newspaper.
Sep 15, 2024
by Simon Cox (12 posts) · Website & RSS feed
Eleventy - Zero JS charts
It'd be cool to be able to sprinkle in some charts to your website easily. And without a lick of client-side JavaScript.
Sep 9, 2024
by Rob O'Leary (11 posts) · Website & RSS feed
Categories: CSS/SassHow to...Nunjucks/Macros
Syntax highlighting in Eleventy
How the syntax highlighting and codeblocks work on this site
Jul 31, 2024
by Nathan Smith (2 posts) · Website
Categories: CSS/SassConfigurationHow to...
Aboard the Eleventy 3.0 Train
My developer portfolio and blog website has been officially upgraded to Eleventy 3.0.
Jul 19, 2024
by Helen Chong (3 posts) · Website & RSS feed
11ty : how to use the image plugin to generate responsive images for CSS
Medium post
Jul 13, 2024
by Phil Rentier Digital (1 post)
Categories: CSS/SassConfigurationHow to...ImagesShortcodes
Highlighting the Active Navigation Link in Eleventy Using Templates, Shortcodes, and the Page Object
Using templates, shortcodes, and the Eleventy supplied data for highlighting the current page in navigation
Jul 6, 2024
by nonnullish (3 posts) · Website & RSS feed
Categories: CSS/SassHow to...Shortcodes
Eleventy Buckets & Cascade Layers
Solving a problem I created
Jul 6, 2024
by Miriam Suzanne (1 post) · Website & RSS feed
Categories: Asset PipelinesCSS/SassConfigurationHow to...WebC
Organizing NPM Build Scripts
I recently took an existing codebase and ported it over to Eleventy. The main purpose was to recreate the website with existing markdown files and CSS. Creating the collections and templates…
Jun 27, 2024
by Trevor Morris (8 posts) · Website & RSS feed
Categories: Asset PipelinesCSS/SassHow to...
Upgrading to Eleventy v3
I took some time this week to upgrade my site to the newest version of Eleventy. Here's what I learned.
Jun 23, 2024
by Alex Zappa (2 posts) · Website & RSS feed
Readable HTML and CSS
Instead of minifying HTML and CSS, I make it easy to read.
Jun 9, 2024
by Shiv J.M. (11 posts) · Website & RSS feed
Categories: CSS/SassConfigurationHow to...Plugins
Get image pixel colours in Eleventy/Node
How to get colour information from images at build time when using Eleventy (or Node more generally).
Jun 7, 2024
by Sam Smith (1 post) · Website & RSS feed
Create an Interactive TOC from Markdown-Generated Content
Create an interactive TOC for Markdown in Static Site Generators using the Intersection Observer API.
Mar 24, 2024
Version 3
I'll show you the true power of being third!
Mar 2, 2024
by Devin Haska (1 post) · Website & RSS feed
Categories: CSS/SassData CascadeGlobal DataMigrating to EleventyWhy Eleventy?
Adding Site Search to Eleventy with pagefind-search
Chris McLeod is a software developer with over 20 years of experience. Sometimes he writes about it.
Jan 7, 2024
My Journey with 11ty and Tailwind CSS: Building a Personal Website
Jan 7, 2024
by Dipesh Kumar (1 post) · Website
Categories: CSS/SassWhy Eleventy?
Syntax highlighting code in Eleventy posts
A quick tutorial about how to enable syntax highlighting of code blocks in Eleventy posts
Dec 16, 2023
More Easily Use Design Tokens in Eleventy
Jan De Wilde, designer and web developer
Dec 12, 2023
Let’s create a microblog with visual editing using Bookshop and Eleventy
Visual editing is table stakes for a modern content management workflow.
Dec 7, 2023
by Zach Leatherman (44 posts) · Website & RSS feed
Categories: BloggingCMSCSS/SassConfigurationHow to...
Permalink-Driven Breadcrumbs in Eleventy
An approach to add a breadcrumb navigation to your Eleventy site, utilising the permalink structure
Oct 13, 2023
by Oscar (3 posts) · Website & RSS feed
Categories: NavigationHow to...CSS/SassPermalinks
Making a lighthouse-fast website with a static site generator like 11ty
Creating an SSG flow to generate a highly optimized static website.
Oct 7, 2023
by Piotr Maliński (3 posts) · Website & RSS feed
Categories: ConfigurationHow to...ImagesCSS/SassSocial Media
Custom language syntax highlighting
Web development blog. The good, bad, and ugly (mostly bad and ugly)
Sep 15, 2023
Flickerless dark mode in 11ty with Tailwind CSS
Just a couple of days ago, I was about to rebuild my portfolio website from scratch. As a typical web... Tagged with webdev, javascript, tutorial, html.
Sep 4, 2023
by Tengku Farhan (1 post) · Website & RSS feed
Categories: CSS/SassConfigurationHow to...
Compiling CSS with Eleventy
A list of different options for compiling CSS with Eleventy
Aug 16, 2023
by Robb Knight (19 posts) · Website & RSS feed
Categories: CSS/SassAsset Pipelines
classnames
An Eleventy plugin that joins truthy, deduplicated values into a single, compact string for use in an HTML element's class attribute.
Aug 5, 2023
Use TailwindCSS with Eleventy Static Site Generator
A guide to using Tailwindcss and Eleventy with auto reloading feature. You will also learn to add DaisyUI in conjunction with TailwindCSS.
Jul 30, 2023
by Hrishikesh Pathak (3 posts) · Website & RSS feed
Categories: CSS/SassConfigurationHow to...
A Future of Themes with CSS Container Style Queries
One way to implement themes on a website with style queries.
Jul 29, 2023
by Christopher Kirk-Nielsen (9 posts) · Website & RSS feed
Categories: CSS/SassAsset Pipelines
Use TailwindCSS with Eleventy Static Site Generator
If you are building a blog with Eleventy and want to add TailwindCSS for styling, then this is the... Tagged with javascript, tailwindcss, css, eleventy.
Jul 11, 2023
by Hrishikesh Pathak (3 posts) · Website & RSS feed
Categories: CSS/Sass
Generating CSS with PostCSS and eleventy.before
I'm trying to keep the setup of my personal projects as simple as possible. Today, we're looking at how CSS is generated.
Jun 29, 2023
by Martin Schneider (7 posts) · Website & RSS feed
Categories: CSS/SassConfigurationHow to...
Postcss 11ty Integration Update
writings of a coder + sysadmin
Jun 29, 2023
by equilibriumuk (15 posts) · Website & RSS feed
Categories: CSS/SassConfigurationHow to...
11ty Postcss Integration Optimized
writings of a coder + sysadmin
Jun 29, 2023
by equilibriumuk (15 posts) · Website & RSS feed
Categories: CSS/SassConfigurationPerformance
Integrating Tailwindcss With Eleventy
writings of a coder + sysadmin
Jun 24, 2023
by equilibriumuk (15 posts) · Website & RSS feed
Categories: CSS/SassConfigurationHow to...Plugins
11ty Fixing Livereload Client For Inline Styles
writings of a coder + sysadmin
Jun 21, 2023
by equilibriumuk (15 posts) · Website & RSS feed
Categories: CSS/Sass
Fast and Easy CSS Revisioning
MooseDog Studios - Where Convention Takes A Back Seat To Quality
Jun 8, 2023
3 Methods for scoped styles in web components that work everywhere
A post by Zach Leatherman (zachleat)
Apr 6, 2023
The evolution of my CSS pipeline in Eleventy (part 2)
Evolution is a continuous phenomenon.
Mar 26, 2023
by Bob Monsour (13 posts) · Website & RSS feed
Categories: CSS/Sass
The evolution of my CSS pipeline in Eleventy (part 1)
Handling CSS in Eleventy has been an evolutionary experience.
Mar 14, 2023
by Bob Monsour (13 posts) · Website & RSS feed
Categories: CSS/Sass
Sass in Eleventy, with versioning
Adding support for code.scss/code files, complete with content hashes.
Mar 1, 2023
by Dan Burzo (3 posts) · Website & RSS feed
Categories: CSS/Sass
Process CSS or Sass With LightningCSS
Use these plugins or code snippets to make CSS a first-class templating language in Eleventy and add processing with LightningCSS and/or Sass.
Feb 25, 2023
by Stephanie Eckles (21 posts) · Website & RSS feed
Categories: CSS/Sass
Extracting and using Critical CSS on my Eleventy site
This week I made some enhancements to extracting and implementing Critical CSS on my website that runs on Eleventy. Let's delve into its workings and features.
Feb 24, 2023
by Silvestar Bistrović (3 posts) · Website & RSS feed
Categories: CSS/Sass
CAUTION
The posts below were published before the release of Eleventy v2.0.0 (Feb 8, 2023). Information in these posts may be out of date. The current stable release is 2.0.1. Eleventy v3.0 is currently under development and available for testing.
Components with Nunjucks and 11ty
We are going to be go through the first steps to get up and running with 11ty. Building a 11ty site from scratch will help you keep your site lightweight, scalable and easy to manage.
Jan 25, 2023
by Jeremy Faucher (8 posts) · Website & RSS feed
Categories: CSS/SassConfigurationHow to...Nunjucks/Macros
Static Mastodon toots in Eleventy: the Tailwind CSS edition
For users of my favorite JS-based SSG, here’s an Eleventy version of the Tailwind-based toots-embedding shortcode I offered yesterday.
Jan 17, 2023
by Bryce Wray (26 posts) · Website & RSS feed
Categories: CSS/SassSocial Media
CSS and JavaScript as first-class citizens in Eleventy
When building websites on Eleventy, we often have to decide how to deal with the CSS and JavaScript post-processing. Recently I came up with a solution, finally making CSS and JS first-class citizens in Eleventy for me.
Nov 25, 2022
by Vadim Makeev (1 post) · Website & RSS feed
Categories: CSS/Sass
Eleventy: Integrate PostCSS and Tailwind CSS
Daniel Zenzes
Nov 25, 2022
by Daniel Zenzes (1 post) · Website & RSS feed
Categories: CSS/Sass
Eleventy, Markdown, and Tailwind CSS
English software developer based in Seattle.
Nov 8, 2022
by Matthew Tole (1 post) · Website & RSS feed
Cache-busting in Eleventy, take two
This time, a solution that really (?) works.
Sep 19, 2022
by Bryce Wray (26 posts) · Website & RSS feed
Categories: CSS/Sass
Getting Tailwind to work with Eleventy
Tackling Tailwind to work with Eleventy.
Jun 11, 2022
Build a Blog With 11ty: Setup - Part 1
We are going to be go through the first steps to get up and running with 11ty. Building a 11ty site from scratch will help you keep your site lightweight, scalable and easy to manage.
Mar 28, 2022
by Jeremy Faucher (8 posts) · Website & RSS feed
Categories: BloggingCSS/SassGetting StartedHow to...
Building blocks for my first Eleventy site
Different choices that go into building an Eleventy website from scratch.
Mar 8, 2022
by Sami Määttä (5 posts) · Website
Categories: CSS/SassDatesDeploymentFiltersHow to...NavigationPaginationSocial Media
Minimum Static Site Setup with Sass
Use this command line combination for building a static site that includes Browsersync, processing Sass and running the final files through autoprefixer and cssnano.
Feb 19, 2022
by Stephanie Eckles (21 posts) · Website & RSS feed
Categories: CSS/SassGetting Started
CAUTION
The posts below were published before the release of Eleventy v1.0.0 (Jan 9, 2022). Information in these posts may be out of date. The current stable release is 2.0.1. Eleventy v3.0 is currently under development and available for testing.
Minimal SASS & eleventy Setup
A post about setting up SASS with eleventy without additional tools
Jun 21, 2021
by Thomas Semmler (3 posts) · Website & RSS feed
Categories: CSS/Sass
Using PurgeCSS with Bootstrap and Eleventy
Tailwind is rad but have you ever wanted a customized, slim version of Bootstrap? In this tutorial,... Tagged with eleventy, 11ty, bootstrap, purgecss.
May 9, 2021
Layout Templating
Tips for creating Eleventy layouts.
Apr 16, 2021
by Stephanie Eckles (21 posts) · Website & RSS feed
Categories: CSS/Sass
Using SASS With Eleventy
Eleventy (11ty) is a super customisable static site generator that at its core transforms template language into HTML. However, template languages li…
Mar 29, 2021
Tailwind-to-head with Eleventy
This follow-up to an earlier article about Hugo Pipes shows how to get internal CSS in an Eleventy site — and with no build tools required.
Mar 20, 2021
by Bryce Wray (26 posts) · Website & RSS feed
Creating a Fast and Beautiful Portfolio Website using HTML, CSS, Eleventy and Netlify
Eleven years ago, in 2010, my personal website was minimal by every means. Relaunching in 2021 using... Tagged with webdev, webperf, eleventy, netlify.
Feb 23, 2021
by Ingo Steinke (1 post) · Website & RSS feed
Categories: CSS/SassNetlifyGetting Started
Hashing out a cache-busting fix for Eleventy
Some of the code behind my previous post.
Dec 15, 2020
by Bryce Wray (26 posts) · Website & RSS feed
Categories: CSS/Sass
Inlining scripts and styles in 11ty
I’m Kitty Giraudel, a non-binary trans frontend developer based in Berlin, focused on accessibility and inclusivity.
Dec 3, 2020
by Kitty Giraudel (4 posts) · Website & RSS feed
Categories: CSS/SassConfiguration
Compile Sass With Eleventy
Instead of using Gulp or Grunt, Eleventy can also compile Sass files directly. The players: the new beforeBuild event and Dart Sass.
Nov 19, 2020
Asset Pipelines in Eleventy
This is a clever trick (probably too clever) for setting up Eleventy to manage asset pipelines like SCSS and JavaScript transformations, as well as using hashes in filenames for cache busting.
Nov 13, 2020
by Evan Sheehan (7 posts) · Website & RSS feed
Categories: How to...CSS/SassAsset Pipelines
Using PostCSS for cache-busting in Eleventy
Optimizing how browsers handle your site’s CSS, and why you should care about that.
Nov 10, 2020
by Bryce Wray (26 posts) · Website & RSS feed
Manually splitting CSS files in Eleventy
Don't want to use a bundler? Eleventy makes it easy to manually split your CSS.
Sep 28, 2020
by Dana Byerly (8 posts) · Website & RSS feed
An Eleventy Starter with Tailwind CSS and Alpine.js
When I decided to try to base my current personal website on Eleventy, I didn't want to reinvent the wheel: I tested all the Eleventy starters built with
Jul 10, 2020
by Greg Wolanski (1 post) · Website & RSS feed
Categories: CSS/Sass
Building and maintaining components from utility classes in Eleventy
Use a collection of utilities to form components without additional CSS.
Jun 29, 2020
Climbing the 11ty Performance leaderboard with Cloudinary, critical CSS and more
A few weeks ago, Zach Leatherman announced that he was going to change the Built with 11ty section 11ty's documentation. He was going to create a performance leaderboard to showcase performant projects using the tool. I wanted my site to break into the top 100!
May 25, 2020
How to Include PrismJS CSS Only When Required In Eleventy
How I set up Eleventy to avoid including unnecessary CSS.
Apr 29, 2020
by Shiv J.M. (11 posts) · Website & RSS feed
Eleventail - A helper for Taiwindcss
Phil Hawksworth's home on the web. Read his blog, ask questions, and find coverage of his recent conference talks about web development.
Jan 2, 2020
Keeping Sass Simple and Speedy
Optimising your local development pipleine, for faster Eleventy Sass compilation
Dec 12, 2018
by Phil Hawksworth (6 posts) · Website & RSS feed
Categories: CSS/Sass