Table of contents

Content

  1. Check out version 4

    This is the previous version of SFUMATO. Check out the latest!

  2. What is SFUMATO?
    1. Get started
      1. Color
        1. Form elements
          1. CSS grid
            1. Helpers
              1. Media
                1. Media queries
                  1. Typography
                    1. Unit layouts

                      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
                      • 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 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)