Table of contents

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
  • Flexbox grid system
  • Color theming
  • Easy unit-based layouts
  • Uses CSS custom properties
  • No javascript, pure CSS solution; works with almost any web platform

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.

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 15 (April 2017)
  • Chrome 49 (March 2016)
  • Firefox 31 (March 2014)
  • Opera 36 (March 2016)
  • Safari 9 (September 2015)

The oldest mobile browsers supported are:

  • iOS Safari 9.2 (December 2015)
  • Opera Mobile 37 for Android (March 2016)
  • Android webview 50 (May 2016)
  • Chrome 49 for Android (November 2015)
  • Firefox 31 for Android (September 2014)

Need to support older browsers like IE11?

Are you sure you need to support IE11 or another old browser? According to W3Counter, browsers like IE11 are barely being used.

If you're sure that you need to support an old browser, check out SFUMATO version 1 (pull the v1 branch from our github repo), which supports the browsers below and later.

Download SFUMATO version 1

Note that the generated CSS is about 3x larger than this version of SFUMATO, and other restrictions apply.

  • Internet Explorer 11 (October 2013)
  • Edge 12 (March 2015)
  • Chrome 29 (August 2013)
  • Firefox 28 (October 2013)
  • Opera 17 (October 2013)
  • Safari 9 (September 2015)

The oldest mobile browsers supported are:

  • iOS Safari 9.2 (December 2015)
  • Opera Mobile 37 for Android (March 2016)
  • Android webview 4.4 (October 2013)
  • Chrome 29 for Android (August 2013)
  • Firefox 31 for Android (September 2014)