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

                      Media

                      By default, SFUMATO makes all <img> tags responsive, willing the width of their container (up-scaling).

                      There are patterns you can follow as well, for things like responsive images and video embeds. These types can have captions, and will also break out of their containers and fill the width of a mobile display using negative margin.

                      This is a responsive video caption.

                      Patterns

                      The following are media patterns provided by SFUMATO.

                      Responsive video

                      Use this pattern to display a responsive, scalable video embed with optional caption.

                      • <div sf-video-wrapper>
                        The contents of this wrapper will be a responsive video container and optional caption.
                      • <div role="video"> or <video>
                        The contents of this wrapper will be a responsive video. The video embed is in this container.
                      • <small>
                        Optional for captions.
                      This is a responsive video caption.

                      HTML
                      scrollable

                      Responsive image

                      Use this pattern to display a responsive, scalable image with optional caption.

                      • <div sf-image-wrapper>
                        The contents of this wrapper will be a responsive image container and optional caption.
                      • <img>
                        This is the image.
                      • <small>
                        Optional for captions.
                      This is a responsive image caption.

                      HTML
                      scrollable