Skip to main content

48 posts in 'CSS/Sass'

Version 3

I'll show you the true power of being third!

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.

Categories: CSS/SassHow to...PluginsSearch

Syntax highlighting code in Eleventy posts

A quick tutorial about how to enable syntax highlighting of code blocks in Eleventy posts

Categories: CSS/SassHow to...Plugins

More Easily Use Design Tokens in Eleventy

Jan De Wilde, designer and web developer

Categories: CSS/SassHow to...

Let’s create a microblog with visual editing using Bookshop and Eleventy

Visual editing is table stakes for a modern content management workflow.

Categories: BloggingCMSCSS/SassConfigurationHow to...

An approach to add a breadcrumb navigation to your Eleventy site, utilising the permalink structure

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.

Categories: ConfigurationHow to...ImagesCSS/SassSocial Media

Custom language syntax highlighting

Web development blog. The good, bad, and ugly (mostly bad and ugly)

Categories: CSS/SassHow to...

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.

Categories: CSS/SassConfigurationHow to...

Compiling CSS with Eleventy

A list of different options for compiling CSS with Eleventy

Categories: CSS/SassAsset Pipelines


An Eleventy plugin that joins truthy, deduplicated values into a single, compact string for use in an HTML element's class attribute.

Categories: PluginsHow to...CSS/Sass

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.

Categories: CSS/SassConfigurationHow to...

A Future of Themes with CSS Container Style Queries

One way to implement themes on a website with style queries

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.

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.

Categories: CSS/SassConfigurationHow to...

Fast and Easy CSS Revisioning

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: CSS/SassHow to...

3 Methods for scoped styles in web components that work everywhere

A post by Zach Leatherman (zachleat)

Categories: CSS/SassWebC

The evolution of my CSS pipeline in Eleventy (part 2)

Evolution is a continuous phenomenon.

Categories: CSS/Sass

The evolution of my CSS pipeline in Eleventy (part 1)

Handling CSS in Eleventy has been an evolutionary experience.

Categories: CSS/Sass

Sass in Eleventy, with versioning

Adding support for code.scss/code files, complete with content hashes.

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.

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.

Categories: CSS/Sass


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.

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.

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.

Categories: CSS/Sass

Eleventy: Integrate PostCSS and Tailwind CSS

Daniel Zenzes

Categories: CSS/Sass

Eleventy, Markdown, and Tailwind CSS

English software developer based in Seattle.

Categories: MarkdownCSS/SassHow to...

Cache-busting in Eleventy, take two

This time, a solution that really (?) works.

Categories: CSS/Sass

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.

Categories: CSS/SassGetting Started


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

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.

Categories: CSS/SassHow to...

Layout Templating

Tips for creating Eleventy layouts.

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…

Categories: CSS/SassHow to...

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.

Categories: CSS/SassHow to...

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.

Categories: CSS/SassNetlifyGetting Started

Hashing out a cache-busting fix for Eleventy

Some of the code behind my previous post.

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.

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.

Categories: CSS/SassHow to...

Asset Pipelines in Eleventy

I design and build websites, web applications, and data visualizations. I’ve been known to play fiddle from time to time and board games.

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.

Categories: CSS/SassHow to...

Manually splitting CSS files in Eleventy

Don't want to use a bundler? Eleventy makes it easy to manually split your CSS.

Categories: CSS/SassHow to...

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

Categories: CSS/Sass

Building and maintaining components from utility classes in Eleventy

Use a collection of utilities to form components without additional CSS.

Categories: How to...CSS/Sass

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!

Categories: How to...CSS/Sass

How to Include PrismJS CSS Only When Required In Eleventy

How I set up Eleventy to avoid including unnecessary CSS.

Categories: CSS/SassHow to...

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.

Categories: How to...CSS/Sass

Keeping Sass Simple and Speedy

Optimising your local development pipleine, for faster Eleventy Sass compilation

Categories: CSS/Sass

Get the blog by email (or RSS)

Powered by Buttondown