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

                      Color

                      SFUMATO uses color sets, which allow you to easily set up and control the color theme for an entire website or parts of one. Each color in a color set defines a color, contrast color (e.g. for overlay text), tint color, and shade color.

                      Color sets

                      In the _config-colors.scss file, SFUMATO includes a collection of color sets. You should modify these color sets to suit your project needs. And you can create your own colors following the pattern already established.

                      • primary
                        The primary color used in your project
                      • secondary
                        The secondary color used in your project
                      • tertiary
                        The tertiary color used in your project
                      • buttons
                        The primary button color used in your project
                      • success
                        Color that indicates success (typically green)
                      • warning
                        Color that indicates warning (typically orange-yellow)
                      • danger
                        Color that indicates danger or error (typically red)
                      • light
                        Light gray for elements that need to provide subtle differentiation with white
                      • medium
                        General gray for elements like form field placeholders and disabled text over white
                      • dark
                        A dark slate gray for text and other near-black elements

                      Changing colors

                      In the file _config-colors.scss you will find the default color sets. Edit them (and add new colors) to suit your project. Below is an example definition for the color "primary". 

                                                                      
                                                    // PRIMARY COLOR
                                                    @include sf-generate-css-color-property(
                                                        $name: "primary", 
                                                        $hex-color: #3880ff, 
                                                        $hex-contrast-color: #ffffff, 
                                                        $alpha: 1.0, 
                                                        $shade-pct: 15%, 
                                                        $tint-pct: 20%);
            
                                                    // SECONDARY COLOR
                                                    ...
                      scrollable

                      The color configuration will generate CSS custom properties like this: 

                                                                      
                                                    // PRIMARY COLOR
                                                    --sf-color-primary: #3880ff;
                                                    --sf-color-primary-contrast: #ffffff;
                                                    --sf-color-primary-shade: #0962ff;
                                                    --sf-color-primary-tint: #6099ff;
            
                                                    --sf-color-primary-rgb: 30,100,50;
                                                    --sf-color-primary-contrast-rgb: 255,255,255;
                                                    --sf-color-primary-shade-rgb: 20,80,40;
                                                    --sf-color-primary-tint-rgb: 40,120,60;
                                                
                                                    .sf-color-primary {
                                                        color: #3880ff;
                                                    }
                                                                                            
                                                    // SECONDARY COLOR
                                                    ...
                      scrollable

                      Hex or RGBa?

                      Always specify colors in hex notation.

                      Color output will always be hex for alpha values of 1.0. If you use an alpha value below 1.0, RGBa values will be used.

                      Usage

                      You can use the colors in SCSS or CSS like this: 

                                                                      
            
                                                    .warning {
            
                                                        border: solid 0.1rem var(--sf-color-warning-shade);
                                                        background-color: var(--sf-color-warning);
                                                        color: var(--sf-color-warning-contrast);
                                                    }
                      scrollable

                      Since these colors are stored in CSS custom properties, you can easily create color themes using only CSS and/or JavaScript.