Introduction

Find out more about Sfumato and how it can speed web development.

Overview

Sfumato is a command line interface (CLI) tool that generates CSS for your web-based projects. You can create HTML markup and use pre-defined utility class names to style the rendered markup, without actually writing any CSS code or leaving your HTML editor!

The resulting HTML markup is clean, readable, and consistent. And the generated CSS file is tiny, even if it hasn't been minified!

What does the name Sfumato mean? Sfumato is a painting technique that uses subtle, almost imperceptible gradations of light and shadow to create soft, hazy transitions between colors and tones, effectively blurring outlines and edges. The word "sfumato" (s-foo-`ma-tow) is Italian for "smoky" or "evaporated," which aptly describes the technique's effect of softening images as if they were viewed through smoke. This technique is most famously associated with Leonardo da Vinci, particularly in his masterpiece the Mona Lisa.

How it's used

Step 1: Watch your project for changes

Run the sfumato CLI tool in a terminal like zsh, bash, or PowerShell, and it will generate CSS as you work.

> sfumato watch /projects/website/css/source.css

Step 2: Work on your project

As you edit the HTML or other files in your project, Sfumato will scan each changed file for utility class references and update the output CSS. It does this in the background so quickly that you'll probably forget it's even running.

This panel uses Sfumato utility classes for styling.

<div class="mx-auto p-6 w-72 rounded-xl shadow-md text-balance text-center bg-blue-500 text-white">
    <p class="font-semibold">This panel uses Sfumato utility classes for styling.</p>
</div>

Sfumato will watch configured files and folders as you work. You can see an example of utility classes being used in the HTML sample above.

There is no step 3

Seriously, get to work.

Optional: use in custom CSS

It's not required, but you can use Sfumato utility classes (and other features) in your custom CSS code as well. This ensures consistency in your styles, giving you access to the spacing, colors, and variants used in your markup. Here's an example:

.story-heading {
    @apply text-lg font-bold text-black;
}

@variant desk {
    .story-heading {
        @apply text-xl;
    }
}

@variant dark {
    .story-heading {
        @apply text-white;
    }
}

Tailwind CSS compatible