Table of contents

Block layouts

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-block>
                                                                <div sf-block-lr-wrapper>
                                                                    <div sf-block-tb-wrapper>
                                                                        Content here
                                                                    </div>
                                                                </div>
                                                            </section>
                                                        </main>
scrollable

Block pattern

Blocks 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 blocks and subunits are rendered within a page.

Block  
Left/Right Padding Wrapper  
Top/Bottom Wrapper
Content here

Note: lighter shades are padding within the container.

                                            
                                                <main>
                                                    <section id="hero-unit" sf-block>
                                                        <div sf-block-lr-wrapper>
                                                            <div sf-block-tb-wrapper>
                                                                Content here
                                                            </div>
                                                        </div>
                                                    </section>
                                                    <section id="feature-unit" sf-block>
                                                        ...
                                                    </div>
                                                    ...
                                                </main>
scrollable

Elastic wrapper

The inner tag with the sf-block-lr-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.

Subunit pattern

Inside your blocks 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-block-tb-wrapper>
                                                    <div sf-subunit>
                                                        Some content, grids, etc.
                                                    </div>
                                                    <div sf-subunit>
                                                        More content, grids, etc.
                                                    </div>
                                                </div>
                                                ...
scrollable

Scroll pattern

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.

HTML

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

Example

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
scrollable