Open source

SFUMATO Layout Framework

Scalable web pages made easy.

Traditional responsive websites only look great at two or three screen widths.

Websites that use SFUMATO zoom like a PDF, can stop zooming at a maximum width, and are optimized for mobile. FINALLY, developers can easily create responsive, scalable, near pixel-perfect layouts.

An example site (beautyledger.com) built with SFUMATO.

Just SCSS.

The SFUMATO layout framework only uses SCSS for its complete feature-set. Resize your browser window to see it in action!


Visitors love it.

Sites are fully scalable, like a PDF, including mobile layouts, in most web browsers. It just "looks right" on every screen. And web apps are more accessible for people with disabilities.

Developers too.

SFUMATO encourages simple, clean HTML5 markup and uses SCSS for powerful, easily managed stylesheets. SFUMATO provides coding freedom through tools not mandates.


We made CSS grids easy.

A new CSS grid-based grid system is part of the SFUMATO layout framework, allowing developers to easily structure scalable page layouts as they would with traditional responsive grid systems.

Why use CSS grid? CSS grid makes using viewport units more reliable, uses simpler CSS markup, and doesn't rely on floats and negative margins and other patterns that can make styling a layout more problematic.

You can create grids with simple HTML5 markup, using WAI-ARIA landmark roles for both accessibility, and context-based selectors.

<article role="grid">
    <div role="gridcell">
        <section>
            <p>Ricky Baker</p>
        </section>
    </div>
    ...

SFUMATO has advanced features.

SFUMATO leverages modern CSS features like custom properties, which allow you to create advanced user interfaces with features like real-time theming. Do you really need to support old browsers? According to W3Counter old browsers are barely being used.

Nonetheless, browser support for SFUMATO is quite broad as shown below.

Desktop browsers

  1. Edge 16 (October 2017)
  2. Chrome 57 (March 2017)
  3. Firefox 52 (March 2017)
  4. Safari 10.1 (March 2017)

Mobile/tablet browsers

  1. iOS Safari 10.3 (March 2017)
  2. Chrome 57 for Android (March 2017)
  3. Firefox 52 for Android (March 2017)

Technology choices...

I'm sure the benefits of scaling web pages is clear. But why use these specific technologies?

Viewport and rem units

The most viable technique for scaling web pages is with CSS, mostly because of its low-overhead, broad support, and hardware acceleration. Of the options available within CSS, viewport units provide the best coverage of these benefits. Viewport units are used for the base fonts and rem units are used for everything else. Scaling based on rem units means your styles are often the same for various screen sizes, which means your SCSS code is smaller and easier to write.

Why not use JavaScript? JavaScript has been used by others in the past, and does work, but it feels clunky; it's choppy on window resize and inconsistent on page render.

CSS3 transforms like scale() look and work great, but aside from scaled pages needing to be repositioned, it breaks the positioning metrics in the DOM, so things like Javascript menus get plotted in the wrong place. It would break your ability to use third-party plugins that rely on DOM positioning metrics. And CSS transformations are hardware accelerated so they're super fast and smooth.

CSS grid

As with scaling, the benefits of using CSS grid for our grid system centers around compatibility, functionality, and performance.

Why not use a standard float-based grid? Float-based grids are a bit wonky, especially on sites with viewport-based measurements. And floats and negative margins can create other styling dependencies. CSS grid just works.

Sass/SCSS

This was the easiest choice. Aside from all the benefits of using SCSS, we needed the logic layer within the CSS code so that viewport units could be converted to pixels, and to minimize the size of generated CSS through the use of functions and mixins. Without SCSS we'd need to use JavaScript.


Are there any issues?

Not really. The only issue at this time remains with Apple Safari in macOS 10.14 Mojave and below. In those versions Safari does not scale font-size smoothly. It rounds font sizes down every half pixel, so as the font is scaled, some intermediate sizes jump to the next whole pixel size. This generally affects small text much more than large. And it can make paragraphs wrap differently on occasion. But generally speaking, it's a minor annoyance, and rarely gets in the way.


Ready to check it out?

Visit our github account and clone the repository to check it out. If you'd like to contribute to the project, we'd love to have you! Just let us know.


Need help using this?

If you need help with this or any of our other open source projects, Fynydd can consult with you to get your project moving in the right direction. Just let us know by visiting our contact page where you can reach out or talk to us directly on our free slack community.