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.
The SFUMATO layout framework only uses SCSS for its complete feature-set. Resize your browser window to see it in action!
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.
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.
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.
The grid example above is written with simple HTML5 markup, using WAI-ARIA landmark roles for both accessibility, and context-based selectors.
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.
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?
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/.
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.
I'm sure the benefits of scaling web pages is clear. But why use these specific technologies?
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.
CSS3 transforms like
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.
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.