Scalable web pages made easy.

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

Web pages built with the SFUMATO layout framework zoom like a PDF, can stop zooming at a given 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 will too.

SFUMATO encourages clean, small HTML5 markup files. Likewise, it uses SCSS for powerful and more 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.

Ricky Baker

Aunt Bella

Uncle Hector

Psycho Sam

Paula

The grid example above is written with simple HTML5 markup, using WAI-ARIA landmark roles for both accessibility, and context-based selectors.

                                    
                                        
                                    
                                

Build without classes.

The SFUMATO layout framework encourages developers to create HTML5 markup without assigning classes to elements. This keeps the HTML code clean and easy to read, maintainable, transportable, and much easier to re-style. Elements are targeted by context, not a stack of class names.

                                    
                                        
                                    
                                

More accessible.

Because the framework leverages WAI-ARIA attributes and landmark roles for features like the Flexbox grid, developers are encouraged to use role assignments for other elements as well, leaving a much more accessible product.

What are WAI-ARIA roles?

The Web Accessibility Initiative (WAI) Accessible Rich Internet Applications (ARIA) defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

ARIA landmark roles are properties that can be assigned to HTML elements, giving them context for screen readers and similar assistive devices. These role values are a pre-determined list and should not be customized. An example of using a role for defining the primary content on a page would look like:

                                            
                                                
                                            
                                        

For more information on WAI-ARIA roles, check out https://www.w3.org/.

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.

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 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.

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.

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. 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.

Issues?

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.