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!
Using only utility classes, you can quickly create complex layouts and effects.
Check out the documentation and try Sfumato on your next web project.
Web developers rejoice! There's an easy way to animate the height of an HTML element even if the height is dynamic, determined by its content, with only CSS. This is typically used for navigation menus and the like, and now it's much easier to code and maintain.
The strategy is to actually animate the grid-template-rows not the height. For example, take the following HTML markup:
The effective CSS for this markup would be:
Initially the outer div will be hidden since it has no overflow and the grid template rows are zero. When you add active to the outer div element's class list, the browser will animate the transition from zero row height to 1fr, which essentially means the height it needs for its content to render.
Here's an interesting method for styling an adjacent element based on whether an <input> is empty or not.
The traditional method for accomplishing this is to use JavaScript, which involves more complex code that is difficult to write and manage. It would require using a selector to find both elements, determining if the input is empty or not, and altering the styles or class names of the adjacent element.
The method below only requires Sfumato classes in your HTML:
In this case I'm hiding and showing a clickable icon that clears the search text if there is any. No JavaScript needed other than the click event 😃.
