SFUMATO is scalable web pages
Websites and web apps that use SFUMATO (sfu-ma'-toe) zoom like a PDF and can stop zooming at a maximum width. Finally, designers and developers can easily create responsive, scalable, near pixel-perfect layouts.
- Scalable web pages with identical rendering between breakpoints
- CSS grid system
- Color theming
- Easy unit-based layouts
- Uses CSS custom properties
Ready to dive in?
Check out the Get Started section for a setup walk-through.
Why use SFUMATO?
The SFUMATO CSS Framework was created to solve a few key problems:
Unpredictable content wrapping between media breakpoints
Traditional mobile-first CSS does not render very well between breakpoints. For example, a mobile site looks different on phones with varying screen sizes. And viewing a website on a desktop browser is just ridiculous.
Coding for a wide variety of device and screen sizes is insane
If you want to support as many devices as possible, you either have to radically simplify your layout, or create a "metric shit tonne" of media breakpoints. This exponentially complicates your code and adds tons of additional work.
Design integrity is hard to ensure in practice
Web pages that scale in size ensure a predictable user experience and better layout integrity from the original designs.
Traditional 12-column grid systems are inadequate
Fixed column grid systems (like Bootstrap) are outdated and don't provide enough granularity for modern designs.
Responsive forms and media are a pain to get right
Rendering responsive media is a bit of a pain. But rendering responsive forms are a pure nightmare, especially when each browser and platform doesn't show the same form field styles and sizes.
Sorry (not sorry), Internet Explorer...
To get the most out of SFUMATO, we had to dump support for IE11. But we do support a pretty large number of browsers.
The oldest desktop browsers supported are:
- Edge 16 (October 2017)
- Chrome 57 (March 2017)
- Firefox 52 (March 2017)
- Safari 10.1 (March 2017)
The oldest mobile browsers supported are:
- iOS Safari 10.3 (March 2017)
- Chrome 57 for Android (March 2017)
- Firefox 52 for Android (March 2017)