Table of contents

Content

  1. Check out version 4

    This is the previous version of SFUMATO. Check out the latest!

  2. What is SFUMATO?
    1. Get started
      1. Color
        1. Form elements
          1. CSS grid
            1. Helpers
              1. Media
                1. Media queries
                  1. Typography
                    1. Unit layouts

                      Typography

                      To provide a jump start on your layout, SFUMATO will reset your browser behavior and tune your typography. This includes font sizes and leading, list and table styles, and more.

                      Highlights

                      • Default mobile font size prevents form zooming
                      • Tables formatted to present data cleanly
                      • Headline sizes that clearly denote heirarchy
                      • Line spacing focused on readability
                      • Properly spaced and indented lists
                      • Ordered lists that display nested numbers
                      • Preformatted text and code blocks that look great and scroll horizontally on mobile
                      • Inline code blocks that fit with your text flow

                      Below are examples of the default styles for various elements.

                      Headlines

                      <h6> Heading 6
                      <h5> Heading 5

                      <h4> Heading 4

                      <h3> Heading 3

                      <h2> Heading 2

                      <h1> Heading 1

                      Mixed content

                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                      Sample Topic Headline

                      This is a subhead

                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

                      — Johnny Appleseed

                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

                      • Superscript itemsup
                      • Subscript itemsub
                      • Small text for fine print.

                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

                      Lists

                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

                      Ordered List

                      1. list item 1 showing proper indentation, wrapping, and item spacing when the content of the list item is too long.
                      2. list item 1
                        1. list item 2
                        2. list item 2
                          1. list item 3
                          2. list item 3
                        3. list item 2
                        4. list item 2
                      3. list item 1
                      4. list item 1

                      Unordered List

                      • list item 1 showing proper indentation, wrapping, and item spacing when the content of the list item is too long.
                      • list item 1
                        • list item 2
                        • list item 2
                          • list item 3
                          • list item 3
                        • list item 2
                        • list item 2
                      • list item 1
                      • list item 1

                      Tables

                      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

                      HTML
                      scrollable

                      Code

                      This demo site also uses Prism to syntax highlight the source code examples. 

                                                                          
                                                        <p>
                                                            Hello, World!
                                                        </p>
                      scrollable

                      Inline code can look like this: <p>hello</p>.

                      HTML

                                                                  
                                                <div sf-code>
                                                    <div sf-code-inner>
                                                        <div sf-code-content>
                                                            <pre>
                                                                <code class="language-markup">
                                                                    <p>
                                                                        Hello, World!
                                                                    </p>
                                                                </code>
                                                            </pre>
                                                        </div>
                                                    </div>
                                                    <div><i class="fas fa-long-arrow-alt-left"></i> scrollable</div>
                                                </div>
                      scrollable