Configuration

Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible.

CND

To try a quick demo, just grab the latest default configuration build via CDN. It will include .C.U.M.O settings: spacings, grids, colors, gutters & etc...

<link rel="stylesheet" href="https://www.cumo.rocks/css/style.min.css">

Download

While .C.U.M.O is available for download, we are working on installation with npm or yarn.

Stable 1.0

Configuration

Use .C.U.M.O JavaScript configuration file that serves as the home for your project. Define color palette, font stacks, families, spacing, border sizes, breakpoints, opacity, buttons, input, tables. Edit class names, or just completely delete all of the values for a given module. Don't forget about check engine page or utilities page, where generated classes will appear.

// main unit
var dp_unit = "1.25rem";

// colors
var colors = {
    "colors_theme": {
        "current": "#a6c3e0",
        "base": "#32d5f7",
        "alt": "#FFBE2F",
        "opt": "#ff2c77",
        "ctrl": "#FF63FF",
        "wh": "#fff"
    },
    "colors_bg": {
        "bg-base": "#161c25",
        "bg-alt": "#1B232E",
        "bg-opt": "#212A37"
    },
    "colors_ui": {
        "success": "#2EFA5B",
        "danger": "#FF432F",
        "warning": "#FF952F"
    }
};

// spacing
var spacing = {
    "zero": "0",
    "auto": "auto",
    "px": "1px",
    "half": dp_unit + "/2",
    "one": dp_unit,
    "two": dp_unit + "*2",
    "three": dp_unit + "*3",
    "four": dp_unit + "*4",
    "five": dp_unit + "*5",
    "six": dp_unit + "*6",
    "seven": dp_unit + "*7",
    "eight": dp_unit + "*8",
    "nine": dp_unit + "*9",
    "ten": dp_unit + "*10"
};

var border_width = {
    "zero": "0",
    "zero-i": "0!important",
    "one": "1px",
    "two": "2px"
};

var border_colors = {
    "bg-alt":colors['colors_bg']['bg-alt'],
    "current":colors['colors_theme']['current'],
    "success": colors['colors_ui']['success'],
    "wh": colors['colors_theme']['wh']
};

// Export to scss varaibles
module.exports = {
    "dp-unit": dp_unit,

    "breakpoints": {
        "mobile": "('480px', '767px')",
        "tablet": "('768px', '1200px')",
        "desktop": "('1201px', '')"
    },

    colors: colors,

    spacing: spacing,

    "utilities": {
        "text-align": {
            "property": "text-align",
            "prefix": "'-'",
            "responsive": true,
            "map": {
                "l": "left",
                "c": "center",
                "r": "right",
                "j": "justify"
            }
        },
        "text-decoration": {
            "property": "text-decoration",
            "prefix": "'-'",
            "responsive": true,
            "map": {
                "decoration-none": "none",
                "line-thr": "line-through",
                "underline": "underline"
            }
        },
        "text-transform": {
            "property": "text-transform",
            "prefix": "'-'",
            "responsive": true,
            "map": {
                "transform-none": "none",
                "capitalise": "capitalize",
                "uppercase": "uppercase",
                "lowercase": "lowercase"
            }
        },
        "text-overflow": {
            "property": "text-overflow",
            "prefix": "'-'",
            "responsive": true,
            "map": {
                "ellipsis": "ellipsis"
            }
        },
        "whitespace": {
            "property": "white-space",
            "prefix": "'-'",
            "responsive": true,
            "map": {
                "nowrap-normal": "normal",
                "nowrap": "nowrap",
                "pre": "pre"
            }
        },
        "margin": {
            "property": "margin",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "m": spacing
            }
        },
        "margin-top": {
            "property": "margin-top",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "mt": spacing
            }
        },
        "margin-bottom": {
            "property": "margin-bottom",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "mb": spacing
            }
        },
        "margin-left": {
            "property": "margin-left",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "ml": spacing
            }
        },
        "margin-right": {
            "property": "margin-right",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "mr": spacing
            }
        },
        "margin-x": {
            "property": "('margin-right', 'margin-left')",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "mx": spacing
            }
        },
        "margin-y": {
            "property": "('margin-top', 'margin-bottom')",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "my": spacing
            }
        },
        "padding": {
            "property": "padding",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "p": spacing
            }
        },
        "padding-top": {
            "property": "padding-top",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "pt": spacing
            }
        },
        "padding-bottom": {
            "property": "padding-bottom",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "pb": spacing
            }
        },
        "padding-left": {
            "property": "padding-left",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "hover": true,
            "map": {
                "pl": spacing
            }
        },
        "padding-right": {
            "property": "padding-right",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "pr": spacing
            }
        },
        "padding-x": {
            "property": "('padding-right', 'padding-left')",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "px": spacing
            }
        },
        "padding-y": {
            "property": "('padding-top', 'padding-bottom')",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "py": spacing
            }
        },
        "display": {
            "property": "display",
            "prefix": "'-'",
            "responsive": true,
            "map": {
                "none": "none",
                "none-i": "none!important",
                "block": "block",
                "block-i": "block!important",
                "flex": "flex",
                "inline-flex": "inline-flex",
                "table": "table",
                "table-cell": "table-cell",
                "inline-block": "inline-block"
            }
        },
        "float": {
            "property": "float",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "float": {
                    "l": "left",
                    "r": "right",
                    "none": "none"
                }
            }
        },
        "position": {
            "property": "position",
            "prefix": "'-'",
            "responsive": true,
            "map": {
                "relative": "relative",
                "absolute": "absolute",
                "fixed": "fixed",
                "sticky": "sticky"
            }
        },
        "pos-top": {
            "property": "top",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "pos": {
                    "t": "0"
                }
            }
        },
        "pos-bottom": {
            "property": "bottom",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "pos": {
                    "b": "0"
                }
            }
        },
        "pos-right": {
            "property": "right",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "pos": {
                    "r": "0"
                }
            }
        },
        "pos-left": {
            "property": "left",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "pos": {
                    "l": "0"
                }
            }
        },
        "stretch": {
            "property": "('top', 'bottom', left, right)",
            "prefix": "'-'",
            "separator": "'-'",
            "responsive": true,
            "map": {
                "stretch": "0"
            }
        },
        "stretch-x": {
            "property": "('left', 'right')",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "stretch": {
                    "x": "0"
                }
            }
        },
        "stretch-y": {
            "property": "('top', 'bottom')",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "stretch": {
                    "y": "0"
                }
            }
        },
        "stretch-auto": {
            "property": "('top', 'bottom', left, right)",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "stretch": {
                    "auto": "auto"
                }
            }
        },
        "overflow": {
            "property": "overflow",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "overflow": {
                    "auto": "auto",
                    "hidden": "hidden",
                    "visible": "visible",
                    "scroll": "scroll"
                }
            }
        },
        "overflow-x": {
            "property": "overflow-x",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "overflow": {
                    "x-auto": "auto",
                    "x-scroll": "scroll"
                }
            }
        },
        "overflow-y": {
            "property": "overflow-y",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "overflow": {
                    "y-auto": "auto",
                    "y-scroll": "scroll"
                }
            }
        },
        "touch": {
            "property": "-webkit-overflow-scrolling",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "overflow": {
                    "touch": "touch"
                }
            }
        },
        "scrollbar": {
            "property": "display",
            "prefix": "'-'",
            "separator": "'::'",
            "responsive": true,
            "map": {
                "overflow-scrollbar": {
                    "-webkit-scrollbar": "none"
                }
            }
        },
        "font-family": {
            "property": "font-family",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "ff": {
                    "base": ["Oxygen Mono",
                        "monospace"
                    ],
                    "alt": [
                        "Roboto",
                        "sans-serif"
                    ],
                    "system": [
                        "-apple-system",
                        "BlinkMacSystemFont",
                        "'Segoe UI'",
                        "Roboto",
                        "Oxygen-Sans",
                        "Ubuntu",
                        "Cantarell",
                        "'Helvetica Neue'",
                        "sans-serif"
                    ]
                }
            }
        },
        "font-size": {
            "property": "font-size",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "fs": {
                    "p-tn": ".75rem",
                    "p-sm": ".875rem",
                    "p-df": "1rem",
                    "p-md": "1.25rem",
                    "p-lg": "1.5rem",
                    "p-elg": "1.75rem",
                    "p-dlg": "2rem",
                    "h-tn": "2.25rem",
                    "h-sm": "2.45rem",
                    "h-md": "3.6rem",
                    "h-lg": "4.25rem",
                    "h-elg": "6rem"
                }
            }
        },
        "font-weight": {
            "property": "font-weight",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "fw": {
                    "thinnest": "100",
                    "thin": "200",
                    "light": "300",
                    "regular": "normal",
                    "medium": "500",
                    "semibold": "600",
                    "bold": "bold",
                    "extrabold": "800",
                    "black": "900"
                }
            }
        },
        "line-height": {
            "property": "line-height",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "lh": {
                    "zero": "0",
                    "one": "1",
                    "base": "1.5",
                    "normal": "normal"
                }
            }
        },
        "letter-spacing": {
            "property": "letter-spacing",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "lsp": {
                    "base-neg": "-1px",
                    "zero": "0",
                    "base": ".5px",
                    "alt": ".145rem",
                    "alt-neg": ".245rem"
                }
            }
        },
        "border": {
            "property": "border-width",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "border": border_width
            }
        },
        "border-left": {
            "property": "border-left-width",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "border-l": border_width
            }
        },
        "border-right": {
            "property": "border-right-width",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "border-r": border_width
            }
        },
        "border-top": {
            "property": "border-top-width",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "border-t": border_width
            }
        },
        "border-bottom": {
            "property": "border-bottom-width",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "border-b": border_width
            }
        },
        "border-color": {
            "property": "border-color",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "hover": true,
            "map": {
                "border": border_colors
            }
        },
        "border-style": {
            "property": "border-style",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "border": {
                    "dashed": "dashed"
                }
            }
        },
        "border-radius": {
            "property": "border-radius",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "radius": {
                    "zero": "0",
                    "zero-i": "0!important",
                    "px": "1px",
                    "two": "2px",
                    "four": "4px",
                    "eight": "8px",
                    "full": "100%"
                }
            }
        },
        "border-radius-t": {
            "property": "('border-top-left-radius', 'border-top-right-radius')",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "radius": {
                    "t-zero": "0"
                }
            }
        },
        "border-radius-tl": {
            "property": "border-top-left-radius",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "radius": {
                    "tl-zero": "0"
                }
            }
        },
        "border-radius-tr": {
            "property": "border-top-right-radius",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "radius": {
                    "tr-zero": "0"
                }
            }
        },
        "border-radius-b": {
            "property": "('border-bottom-left-radius', 'border-bottom-right-radius')",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "radius": {
                    "b-zero": "0"
                }
            }
        },
        "border-radius-bl": {
            "property": "border-bottom-left-radius",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "radius": {
                    "bl-zero": "0"
                }
            }
        },
        "border-radius-br": {
            "property": "border-bottom-right-radius",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "radius": {
                    "br-zero": "0"
                }
            }
        },
        "border-radius-l": {
            "property": "('border-top-left-radius', 'border-bottom-left-radius')",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "radius": {
                    "l-zero": "0"
                }
            }
        },
        "border-radius-r": {
            "property": "('border-top-right-radius', 'border-bottom-right-radius')",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "radius": {
                    "r-zero": "0"
                }
            }
        },
        "opacity": {
            "property": "opacity",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "opacity": {
                    "zero": "0",
                    "zero-i": "0!important",
                    "tw": ".2",
                    "fi": ".5"
                }
            }
        },
        "gutter": {
            "property": "('margin-left', 'margin-right')",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "gutter": {
                    "half": "-" + dp_unit + "/2",
                    "one": "-" + dp_unit,
                    "two": "-" + dp_unit + "*2"
                }
            }
        },
        "width": {
            "property": "width",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "width": {
                    "auto": "auto",
                    "auto-i": "auto!important",
                    "zero": "0",
                    "zero-i": "0!important",
                    "px": "1px",
                    "half": "(100% / 2)",
                    "g-14": "(100% / 4)",
                    "g-16": "(100% / 6)",
                    "g-18": "(100% / 8)",
                    "g-34": "(100% / 4 * 3 )",
                    "g-13": "(100% / 3)",
                    "g-23": "(100% / 3 * 2)",
                    "full": "100%",
                    "screen": "100vw",
                    "base": "6rem",
                    "alt": "4rem",
                    "mini-sidebar": "14rem",
                    "sidebar": "17.5rem"
                }
            }
        },
        "max-width": {
            "property": "max-width",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "max-width": {
                    "sidebar": "300px",
                    "eighty": "800px",
                    "mobile": "480px",
                    "tablet": "768px",
                    "desktop": "1400px"
                }
            }
        },
        "min-width": {
            "property": "min-width",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "min-width": {
                    "full": "100%",
                    "screen": "100vw",
                    "tablet": "40rem"
                }
            }
        },
        "height": {
            "property": "height",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "height": {
                    "auto": "auto",
                    "auto-i": "auto!important",
                    "zero": "0",
                    "zero-i": "0!important",
                    "px": "1px",
                    "base": "6rem",
                    "alt": "4rem",
                    "ctrl": "4px"
                }
            }
        },
        "max-height": {
            "property": "max-height",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "max-height": {
                    "full": "100%",
                    "base": "24rem"
                }
            }
        },
        "min-height": {
            "property": "min-height",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "min-height": {
                    "full": "100%",
                    "screen": "100vh"
                }
            }
        },
        "shadow": {
            "property": "box-shadow",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "shadow": {
                    "base": "0 16px 54px 0 rgba(0,0,0,.02)"
                }
            }
        },
        "z-index": {
            "property": "z-index",
            "prefix": "'-'",
            "separator": "'--'",
            "map": {
                "z": {
                    "dropdown": "3000",
                    "overlay": "4000",
                    "modal": "4001",
                    "header": "1",
                    "zero": 0,
                    "auto": "auto",
                    "unset": "unset",
                    "neg": "-1"
                }
            }
        },
        "vertical-align": {
            "property": "vertical-align",
            "prefix": "'-'",
            "separator": "'--'",
            "map": {
                "align-y": {
                    "t": "top",
                    "m": "middle",
                    "b": "bottom"

                }
            }
        },
        "align-content": {
            "property": "align-content",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "align-c": {
                    "center": "center",
                    "start": "flex-start",
                    "end": "flex-end",
                    "between": "space-between",
                    "around": "space-around",
                    "stretch": "stretch"
                }
            }
        },
        "align-self": {
            "property": "align-self",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "align-s": {
                    "center": "center",
                    "start": "flex-start",
                    "end": "flex-end",
                    "baseline": "baseline",
                    "auto": "auto",
                    "stretch": "stretch"
                }
            }
        },
        "align-items": {
            "property": "align-items",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "align-i": {
                    "center": "center",
                    "start": "flex-start",
                    "end": "flex-end",
                    "baseline": "baseline",
                    "stretch": "stretch"
                }
            }
        },
        "theme-colors": {
            "property": "color",
            "prefix": "'-'",
            "separator": "':'",
            "responsive": true,
            "hover": true,
            "group-hover": true,
            "map": (function (colors) {
                return colors['colors_theme']
            })(colors)
        },
        "bg-colors": {
            "property": "color",
            "prefix": "'-'",
            "separator": "':'",
            "responsive": true,
            "hover": true,
            "map": (function (colors) {
                return colors['colors_bg']
            })(colors)
        },
        "ui-colors": {
            "property": "color",
            "prefix": "'-'",
            "separator": "':'",
            "responsive": true,
            "hover": true,
            "map": (function (colors) {
                return colors['colors_ui']
            })(colors)
        },
        "bgc-theme-colors": {
            "property": "background-color",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "hover": true,
            "map": {
                "bgc": (function (colors) {
                    return colors['colors_theme']
                })(colors)
            }
        },
        "bgc-bg-colors": {
            "property": "background-color",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "hover": true,
            "group-hover": true,
            "map": {
                "bgc": (function (colors) {
                    return colors['colors_bg']
                })(colors)
            }
        },
        "bgc-ui-colors": {
            "property": "background-color",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "bgc": (function (colors) {
                    return colors['colors_ui']
                })(colors)
            }
        },
        "bgc": {
            "property": "background-color",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "bgc": {
                    "transparent": "transparent",
                    "transparent-i": "transparent!important"
                }
            }
        },
        "bg": {
            "property": "background",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "bgc": {
                    "none": "none",
                    "none-i": "none!important"
                }
            }
        },
        "flex-direction": {
            "property": "flex-direction",
            "prefix": "'-'",
            "separator": "'-'",
            "responsive": true,
            "map": {
                "flex": {
                    "row": "row",
                    "row-r": "row-reverse",
                    "col": "column",
                    "col-r": "column-reverse"
                }
            }
        },
        "flex-wrap": {
            "property": "flex-wrap",
            "prefix": "'-'",
            "separator": "'-'",
            "responsive": true,
            "map": {
                "flex": {
                    "nowrap": "nowrap",
                    "wrap": "wrap",
                    "wrap-r": "wrap-reverse"
                }
            }
        },
        "flex-justify": {
            "property": "justify-content",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "flex-justify": {
                    "center": "center",
                    "start": "flex-start",
                    "end": "flex-end",
                    "between": "space-between",
                    "around": "space-around",
                    "evenly": "space-evenly"
                }
            }
        },
        "flex-grow": {
            "property": "flex-grow",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "flex-grow": {
                    "one": "1",
                    "two": "2",
                    "three": "3",
                    "zero": "0"
                }
            }
        },
        "flex-shrink": {
            "property": "flex-shrink",
            "prefix": "'-'",
            "separator": "'--'",
            "responsive": true,
            "map": {
                "flex-shrink": {
                    "one": "1",
                    "two": "2",
                    "three": "3",
                    "zero": "0"
                }
            }
        },
        "cursor": {
            "property": "cursor",
            "prefix": "'-'",
            "separator": "'--'",
            "map": {
                "cursor": {
                    "pointer": "pointer",
                    "text": "text",
                    "not-allowed": "not-allowed"
                }
            }
        },

        "transition": {
            "property": "transition",
            "prefix": "'-'",
            "separator": "'--'",
            "map": {
                "transition": {
                    "base": ".25s ease-out",
                    "alt": ".33s ease-in-out"
                }
            }
        }
    },
    "objects": {
        // Buttons
        "buttons": {
            // Default settings
            "default-radius": "2px",
            "default-border": "2px",
            "font-weight": "700",
            "text-transform": "uppercase",
            "shadow": "none",
            // Colors .o-btn--{color}
            "colors": {
                "base": {
                    "default": {
                        "bg-color": colors.colors_theme['base'],
                        "text-color": colors.colors_bg["bg-base"],
                        "outline-text-color": colors.colors_theme["base"]
                    },
                    "hover": {
                        "bg-color": "mix(#fff, " + colors.colors_theme['base'] + ", 30%)",
                        "text-color": colors.colors_bg["bg-base"],
                        "outline-text-color": colors.colors_bg["bg-base"]
                    },
                    "active": {
                        "bg-color": "mix(#000, " + colors.colors_theme['base'] + ", 15%)",
                        "text-color": colors.colors_bg["bg-base"],
                        "outline-text-color": colors.colors_bg["bg-base"]
                    }
                },
                "alt": {
                    "default": {
                        "bg-color": colors.colors_theme["alt"],
                        "text-color": "#fff"
                    },
                    "hover": {
                        "bg-color": "mix(#fff, " + colors.colors_theme["alt"] + ", 15%)",
                        "text-color": "#fff"
                    },
                    "active": {
                        "bg-color": "mix(#000, " + colors.colors_theme["alt"] + ", 15%)",
                        "text-color": "#fff"
                    }
                }
            },
            // Sizes .o-btn--{size}
            "sizes": {
                "sm": {
                    "padding-top": ".875rem",
                    "padding-bottom": ".875rem",
                    "padding-left": "2rem",
                    "padding-right": "2rem",
                    "font-size": ".875rem",
                    "letter-spacing": "0.14rem",
                    "rounded": "30px"
                },
                "md": {
                    "padding-top": "1rem",
                    "padding-bottom": "1rem",
                    "padding-left": "2rem",
                    "padding-right": "2rem",
                    "font-size": "1rem",
                    "rounded": "40px"
                }
            }
        },

        // Inputs
        "inputs": {
            // Default settings
            "default-radius": "2px",
            "default-border": "2px",
            "font-weight": "500",
            "text-transform": "inherit",
            "letter-spacing": ".05rem",
            "padding": ".5625rem .75rem .625rem",
            "font-size": ".875rem",
            "icon-indent": "1.35rem",
            "placeholder-color": "#a6c3e0",
            // Colors .o-input--color
            "colors": {
                "base": {
                    "default": {
                        "bg-color": "#1d252c",
                        "text-color": "#a6c3e0",
                        "border-color": "transparent"
                    },
                    "hover": {
                        "bg-color": "#1d252c",
                        "text-color": "#a6c3e0",
                        "border-color": "transparent"
                    },
                    "focus": {
                        "border-color": "#fff"
                    }
                }
            }
        },
        // Checkbox
        "checkbox": {
            // Default settings
            "label_indent": "2rem",
            "line-height": "1.4",
            "width": "1.25rem",
            "height": "1.25rem",
            "border": "2px solid transparent",
            "radius": "2px",
            "checked-size": ".5rem",
            "checked-radius": "1px",
            // Colors:
            "colors": {
                "base": {
                    "default": {
                        "bg-color": "transparent",
                        "border-color": "grey"
                    },
                    "checked": {
                        "bg-color": "transparent",
                        "border-color": "#fff",
                        "checked-color": "#fff"
                    }
                }
            }
        },
        // Radios
        "radio": {
            // Default settings
            "label_indent": "2rem",
            "line-height": "1.4",
            "width": "1.25rem",
            "height": "1.25rem",
            "border": "2px solid transparent",
            "checked-size": ".5rem",
            // Colors:
            "colors": {
                "base": {
                    "default": {
                        "bg-color": "transparent",
                        "border-color": "grey"
                    },
                    "checked": {
                        "bg-color": "transparent",
                        "border-color": "#fff",
                        "checked-color": "#fff"
                    }
                }
            }
        },

        "switch": {
            // Default settings
            "width": "2.75rem",
            "height": "1.5rem",
            "radius": ".75rem",
            "shadow": "0 2px 2px rgba(0,0,0,0.24)",
            // Modifications:
            "mods": {
                "base": {
                    "default": {
                        "bg-color": colors.colors_bg["bg-alt"],
                        "indent-color": "grey",
                        "indent": "0",
                        "switch-color": "#f1f1f1"
                    },
                    "checked": {
                        "bg-color": colors.colors_bg["bg-alt"],
                        "indent-color": colors.colors_ui["success"],
                        "switch-color": "#fff"
                    }
                },
                "alt": {
                    "default": {
                        "bg-color": "#fff",
                        "indent-color": colors.colors_bg["bg-alt"],
                        "indent": ".125rem",
                        "switch-color": "#fff"
                    },
                    "checked": {
                        "bg-color": colors.colors_theme["opt"],
                        "indent-color": colors.colors_bg["bg-alt"],
                        "switch-color": colors.colors_theme["opt"]
                    }
                },
                "opt": {
                    "default": {
                        "bg-color": colors.colors_bg["bg-alt"],
                        "indent-color": "grey",
                        "indent": ".25rem",
                        "switch-color": "#fff"
                    },
                    "checked": {
                        "bg-color": colors.colors_bg["bg-alt"],
                        "indent-color": "green",
                        "switch-color": "#4BD763"
                    }
                }

            }
        },
        // Selects
        "select": {},
        // Loaders
        "loaders": {
            // Modifications:
            "colors": {
                "base": {
                    "color": colors.colors_theme["base"]
                },
                "alt": {
                    "color": colors.colors_theme["alt"]
                }
            },
            "sizes": {
                "sm": {
                    "size:": "2.5rem",
                    "duration": "2.5s",
                    "stroke-dasharray": "180",
                    "stroke-width": "4px"
                },
                "md": {
                    "size:": "4rem",
                    "duration": "1.5s",
                    "stroke-dasharray": "180",
                    "stroke-width": "6px"
                }
            }
        },
        // Progressbar
        //"progress": {},
        // Tables
        "table": {
            "border-collapse": "collapse",
            "padding": "3% 4%",
            "min-width": "10rem",
            "stripped-bg": colors.colors_bg["bg-alt"],
            "hoverable-bg": colors.colors_bg["bg-opt"]
        }
    },
    "modules": {
        "accordion": {},
        "collapse": {},
        "dropdown": {},
        "modal": {},
        "tabs": {}
    }
};

Responsive

.C.U.M.O allows you to create responsive utility classes just in a few seconds. Every utility class can be (or not) available in different screen-size. You define your project's screen sizes and class names in cumo.js config in breakpoints section.

"breakpoints": {
        "mobile": "('480px', '767px')",
        "tablet": "('768px', '1200px')",
        "desktop": "('1201px', '')"
    },
    "utilities": {
            "position": {
            "property": "position",
            "prefix": "'-'",
            "responsive": true,
            "map": {
                "relative": "relative",
                "absolute": "absolute",
                "fixed": "fixed",
                "sticky": "sticky"
            }
        },
    }

By default we use a "mobile first" approach, where each screen size represents a minimum viewport width. Or you can use desktop-first. Its up to you.

<div class="u-relative mobile:sticky tablet:u-fixed desktop:u-absolute"></div>

As a result the block will be always relative, sticky from 480px to 767px, fixed from 768px - 1200px, absolute from 1201px. Cool, right? Image what you can do with margins and paddings :)

State Variants

.C.U.M.O allows you to create state classes like hover & group hover. Let's have a look:

 "theme-colors": {
            "property": "color",
            "hover": true,
            "group-hover": true
        }

Build

  • Install gulp: npm install --global gulp-cli
  • Run npm install to install dev dependencies
  • Run gulp build for dev build
  • Run gulp build --prod for production build
This page is generated automatically by C.U.M.O.
Use the force of utility classes, Luke...

©