Variables

The variables available define both breakpoints and colors. Currently there are 4 breakpoint variables based on various device sizes that are being targeted. You can take a look at the breakpoint mixin to see where you might use them. The color variables have a new take on what color definitions should look like.

The colors offered are listed in terms of weights instead of shades. If you think about the number following a color variable in the same way that you would think of a font-weight, then each variable “weight” will match that of another color. It’s an easy way to determine what colors to use and what colors will go well together.

Breakpoint Variables:

    
        $bp-small: 425px;
        $bp-medium: 768px;
        $bp-large: 1024px;
        $bp-xlarge: 1440px;
    

Color Variables:

    
        $color-white: #ffffff;
        $color-black: #000000;

        $color-gray-50: #fafafa;
        $color-gray-100: #f5f5f5;
        $color-gray-200: #eeeeee;
        $color-gray-300: #e0e0e0;
        $color-gray-400: #bdbdbd;
        $color-gray-500: #9e9e9e;
        $color-gray-600: #757575;
        $color-gray-700: #616161;
        $color-gray-800: #424242;
        $color-gray-900: #212121;

        $color-red-50: #ffebee;
        $color-red-100: #ffcdd2;
        $color-red-200: #ef9a9a;
        $color-red-300: #e57373;
        $color-red-400: #ef5350;
        $color-red-500: #f44336;
        $color-red-600: #e53935;
        $color-red-700: #d32f2f;
        $color-red-800: #c62828;
        $color-red-900: #b71c1c;

        $color-blue-50: #e3f2fd;
        $color-blue-100: #bbdefb;
        $color-blue-200: #90caf9;
        $color-blue-300: #64b5f6;
        $color-blue-400: #42a5f5;
        $color-blue-500: #2196f3;
        $color-blue-600: #1e88e5;
        $color-blue-700: #1976d2;
        $color-blue-800: #1565c0;
        $color-blue-900: #0d47a1;

        // This isn't all!
        // There are many more colors (20 in all)