Skip to main content

{{ 11tybundle.dev }}

41 posts in 'CSS/Sass'

Permalink-Driven Breadcrumbs in Eleventy

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

Categories: CSS/Sass  How to...  Navigation  

Making a lighthouse-fast website with a static site generator like 11ty

Creating an SSG flow to generate a highly optimized static website.

Categories: Configuration  CSS/Sass  How to...  Images  Social Media  

Custom language syntax highlighting

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

Categories: CSS/Sass  How 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. Then, as a......

Categories: Configuration  CSS/Sass  How to...  

classnames

The online journal of Ashur Cabrera.

Categories: CSS/Sass  How to...  Plugins  

A Future of Themes with CSS Container Style Queries

One way to implement themes on a website with style queries

Categories: Asset Pipelines  CSS/Sass  

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...

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...

Categories: Configuration  CSS/Sass  How to...  

Fast and Easy CSS Revisioning

MooseDog Studios - Where Convention Takes A Back Seat To Quality

Categories: CSS/Sass  How to...  

3 Methods for scoped styles in web components that work everywhere

A post by Zach Leatherman (zachleat)

Categories: CSS/Sass  WebC  

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...

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...

Categories: CSS/Sass  

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...

Categories: CSS/Sass  Social 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...

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: CSS/Sass  How to...  Markdown  

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...

Categories: CSS/Sass  Getting Started  

Minimal SASS & eleventy Setup

A post about setting up SASS with eleventy without additional tools

Categories: CSS/Sass  

Compile Sass with eleventy

Categories: CSS/Sass  How to...  

Using PurgeCSS with Bootstrap and Eleventy

Tailwind is rad but have you ever wanted a customized, slim version of Bootstrap? In this...

Categories: CSS/Sass  How 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...

Categories: CSS/Sass  How 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...

Categories: CSS/Sass  How 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...

Categories: CSS/Sass  Getting Started  Netlify  

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...

Categories: Configuration  CSS/Sass  

https://www.hendricks.rocks/articles/compile-sass-with-eleventy/

Instead of using Gulp or Grunt, Eleventy can also compile Sass files directly. The players: the new...

Categories: CSS/Sass  How to...  

Asset Pipelines in Eleventy

This is a clever trick (probably too clever) for setting up Eleventy to manage asset pipelines like...

Categories: Asset Pipelines  CSS/Sass  How to...  

Using PostCSS for cache-busting in Eleventy

Optimizing how browsers handle your site’s CSS, and why you should care about that.

Categories: CSS/Sass  How to...  

Manually splitting CSS files in Eleventy

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

Categories: CSS/Sass  How 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...

Categories: CSS/Sass  

Building and maintaining components from utility classes in Eleventy

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

Categories: CSS/Sass  How to...  

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...

Categories: CSS/Sass  How to...  

How to Include PrismJS CSS Only When Required In Eleventy

How I set up Eleventy to avoid including unnecessary CSS.

Categories: CSS/Sass  How to...  

Eleventail - A helper for Taiwindcss

Phil Hawksworth's home on the web. Read his blog, ask questions, and find coverage of his recent...

Categories: CSS/Sass  How to...  

Keeping Sass Simple and Speedy

Optimising your local development pipleine, for faster Eleventy Sass compilation

Categories: CSS/Sass