Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/argentini/argentini.sfumato
Sfumato is a lean, modern, utility-based CSS framework generation utility (like Tailwind CSS) with Dart Sass and relative UI scaling built-in (Windows, macOS, Linux, .NET 8.0, x64, Arm64, Apple Silicon).
https://github.com/argentini/argentini.sfumato
cli css framework sass scss sfumato tailwind tailwindcss ui ux web website
Last synced: 4 days ago
JSON representation
Sfumato is a lean, modern, utility-based CSS framework generation utility (like Tailwind CSS) with Dart Sass and relative UI scaling built-in (Windows, macOS, Linux, .NET 8.0, x64, Arm64, Apple Silicon).
- Host: GitHub
- URL: https://github.com/argentini/argentini.sfumato
- Owner: argentini
- License: other
- Created: 2023-10-04T19:54:38.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-28T21:09:49.000Z (16 days ago)
- Last Synced: 2024-10-28T22:21:52.746Z (16 days ago)
- Topics: cli, css, framework, sass, scss, sfumato, tailwind, tailwindcss, ui, ux, web, website
- Language: C#
- Homepage:
- Size: 81 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# SFUMATO
Sfumato is a lean, modern, utility-based CSS framework generation tool. It is compatible with the Tailwind CSS class naming structure and has the following additional features:
- The Sfumato CLI tool is written in cross-platform (multi-threaded) native code, not javascript, and is much faster than Tailwind
- Dart Sass (also cross-platform native code) is embedded so you get all the benefits of using Sass as part of your workflow
- Sfumato provides an optional scalable CSS system that makes all the viewport sizes between breakpoints scale like a PDF for a more controlled layout
- Theme mode that supports system theme matching, as well as classes that include an "auto" class to fall back to system matching
- Integrated form element styles (class compatible with Tailwind forms plugin)
- One install works for all your projects!
## How To Use
Create one simple "sfumato.yml" file (manually or using the Sfumato "init" command) for your web-based app or website project and run the Sfumato CLI "watch" command. It will watch your project files as you work, keeping track of your markup changes, and will transpile your SCSS files into custom, tiny CSS files based only on the Sfumato features you use.
Use the following command for more information on Sfumato commands and options:
```sfumato help```
## Installation
### 1. Install Microsoft .NET
Sfumato requires that you already have the .NET 8.0 runtime installed, which you can get at [https://dotnet.microsoft.com/en-us/download](https://dotnet.microsoft.com/en-us/download).
### 2. Install Sfumato
Run the following command in your command line interface (e.g. cmd, PowerShell, Terminal, bash, etc.):
```dotnet tool install --global argentini.sfumato```
Later you can update Sfumato with the following command:
```dotnet tool update --global argentini.sfumato```
## Uninstall
If you need to completely uninstall Sfumato, use the command below:
```dotnet tool uninstall --global argentini.sfumato```