Open source

SFUMATO SCSS

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.


Our grid uses flexbox.

A new flexbox 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 flexbox? Flexbox makes using viewport units more reliable, uses simpler CSS markup, and doesn't rely on floats and other properties 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>
    ...

Broadly compatible.

SFUMATO supports a large number of popular browsers. So even if you support large enterprise customers, it's likely that SFUMATO will work in their environment.

According to statcounter, as of April 2018, SFUMATO works with over 90.33% of web browsers globally.

Desktop browsers

  1. Internet Explorer 11 (2013)
  2. Microsoft Edge 12 (2015)
  3. Firefox 28 (2014)
  4. Safari 9 (2015)
  5. Opera 17 (2013)
  6. Google Chrome 29 (2013)

Mobile/tablet browsers

  1. iOS Safari 9.2 (2015)
  2. Opera Mobile 37 (2016)
  3. Android Browser 4.4 (2014)
  4. Chrome for Android 59 (2017)
  5. Firefox 54 for Android (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.

Flexbox

As with scaling, the benefits of using flexbox for our grid system centers around compatibility and functionality. In an ideal world we'd use CSS grid. But it's not well-supported at the time of this writing.

Flexbox, on the other hand, is widely supported. And although it's not the perfect fit for a grid layout system, it does provide the necessary functionality to make it a great choice. It also provides features a standard float-based grid doesn't, like equal column heights, row or column based layouts, and more.

Why not use a standard float-based grid? Float-based grids are a bit wonky, especially on sites with viewport-based measurements. And floats can create other styling dependencies. Flexbox 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. Even in macOS 10.13 High Sierra, 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.