This is the previous version of SFUMATO. Check out the latest!
SFUMATO provides a simple pattern for creating unit-based layouts. The pattern gives you a simple way to wrap your content in tags with unit and subunit attributes, which generate the right padding and spacing around them. When using them with or without grids your layout will collapse and expand, adjusting for different breakpoints.
<main>
<section id="hero-unit" sf-unit>
<div sf-outer-wrapper>
<div sf-inner-wrapper>
Content here
</div>
</div>
</section>
</main>
Units with nested containers give you the flexibility to create a wide variety of designs. For example, you can have multi-layer effects like a color filter layer over a background image.
Below is a visual representation of how units and subunits are rendered within a page.
Note: lighter shades are padding within the container.
<main>
<section id="hero-unit" sf-unit>
<div sf-outer-wrapper>
<div sf-inner-wrapper>
Content here
</div>
</div>
</section>
<section id="feature-unit" sf-unit>
...
</div>
...
</main>
The inner tag with the sf-outer-wrapper attribute will have a maximum width defined by the elastic breakpoint, as well as auto left and right margins to center it within its container.
You can also optionally use the attribute sf-elastic-wrapper on any tag to cause it to behave in the same way.
Inside your units you'll find the need to create subgroups of content that observe certain rules when columns collapse. These subunits provide spacing below to ensure visual separation.
...
<div sf-inner-wrapper>
<div sf-subunit>
Some content, grids, etc.
</div>
<div sf-subunit>
More content, grids, etc.
</div>
</div>
...
If you have content that requires a wide display, and which can't be reduced effectively for mobile, there is a scroll pattern. By wrapping your content in two containers, you will get a horizontally scrollable unit at sizes below tablet-portrait.
On mobile sizes, the right edge of the wrapper will extend out past the horizontal unit padding, touching the edge of the viewport. This indicates that scrolling is possible.
...
<div sf-scrollable>
<div sf-scrollable-inner>
<div sf-scrollable-content>
<table>
...
</table>
</div>
</div>
<div><i class="fas fa-long-arrow-alt-left"></i> scrollable</div>
</div>
...
This table is horizontally scrollable on mobile devices.
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |