Table of contents

SFUMATO is the lean CSS framework with scaling, dark mode, and awesome grids

Features list

  • Scalable (zooming) web pages with near identical rendering between breakpoints
  • CSS grid system with unlimited columns and respositionable cells
  • Color sets that also handle dark themes (a.k.a. dark mode)
  • Easy unit-based layouts for building web pages with flexible content blocks
  • No javascript, pure CSS solution; works with any web platform
  • Built with Sass/SCSS for the most coding flexibility

Ready to dive in?

Check out the Get Started section for a setup walk-through.

Jump to Get Started

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.

  • Building color themes is a chore

    SFUMATO color sets include dark mode color variations so your web application will support dark themes without the extra hassle.

SFUMATO resizing on a desktop browser and various iPhones and iPads.

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)