introduction
customization
ConfigurationThemeColorsColor ModesStyles syntax
modules
elements
helpers
presets
packages

Styles Syntax

Siimple allows you to define custom styles following the CSS in JS approach. You can think in this like declaring all your styles in a JSON format, but following the rules specified in this document.

This is an example of a CSS in JS declaration:

const styles = {
    ".button": {
        backgroundColor: "#3b82f6",
        color: "#ffffff",
        display: "block",
        fontWeight: "bold",
        padding: "0.5rem",
        "&:hover": {
            backgroundColor: "#1d4ed8",
            cursor: "pointer",
        },
    },
};

You can easily transform this map in pure CSS styles, right?

.button {
    background-color: #3b82f6;
    collor: #ffffff;
    display: block;
    font-weight: bold;
    padding: 0.5rem;
}
.button:hover {
    background-color: #1d4ed8;
    cursor: pointer;
}

Naming properties

Properties must be in Camel Case:

const styles = {
    ".button": {
        borderTopLeftRadius: "0px",
        borderTopRightRadius: "0px",
        fontSize: "1rem",
    },
};

Values

CSS values should be always provided surrounded by double quotes:

const styles = {
    ".small": {
        color: "grey",
        fontSize: "0.875rem",
    },
};
Themed values

Values from theme scales can be included providing the scale key surrounded by double quotes:

const styles = {
    ".small": {
        color: "primary",
        fontSize: "small",
    },
};
Adding the !important flag

You can mark a value with the !important flag providing an array where the first position is the value we want to include and the second position is the "!important" keyword.

const styles = {
    ".small": {
        color: ["primary", "!important"],
        fontSize: ["small", "!important"],
    },
};

Aliases

We provide some aliases for applying some styles like margins, paddings and more.

AliasProperties
bcborder-color
bgbackground-color
mmargin
mbmargin-bottom
mlmargin-left
mrmargin-right
mtmargin-top
mxmargin-left and margin-right
mymargin-top and margin-bottom
ppadding
pbpadding-bottom
plpadding-left
prpadding-right
ptpadding-top
pxpadding-left and padding-right
pypadding-top and padding-bottom
radiusborder-radius
sizewidth and height

The following style definition:

const styles = {
    ".box": {
        size: "100%",      /* width and height */
        p: "2rem",         /* padding */
        radius: "0.5rem",  /* border-radius */
    },
};

Will generate:

.box {
    border-radius: 0.5rem;
    padding: 2rem;
    width: 100%;
    height: 100%;
}

Media queries

You can use @media query selectors to conditionally apply styles.

const styles = {
    ".columns": {
        display: "flex",
        flexDirection: "row",
        flexWrap: "nowrap",
        overflow: "hidden",
    },
    "@media screen and (max-width: 600px)": {
        ".columns": {
            flexDirection: "column",
        },
    },
};

Breakpoints

You can generate @media queries with breakpoints defined in your theme just using the @breakpoint query followed with the breakpoint name you want to apply:

const styles = {
    ".columns": {
        display: "flex",
        flexDirection: "row",
        flexWrap: "nowrap",
        overflow: "hidden",
    },
    "@breakpoint mobile": {
        ".columns": {
            flexDirection: "column",
        },
    },
};

Parent selector

We provide support for using the parent selector, &, in the same way that works in Sass: used in an inline selector will be automatically replaced with the corresponding outer selector.

const styles = {
    ".button": {
        color: "white",
        display: "block",
        "&:hover": {
            color: "black",
            cursor: "pointer",
        },
    },
};

Will generate the following styles:

.button {
    color: white;
    display: block;
}
.button:hover {
    color: black;
    cursor: pointer;
}

Pseudo elements

Pseudo-elements selectors like ::before and ::after are supported. Also remember that you must wrap the value of the content property into single quotes:

const styles = {
    ".button": {
        "&::before": {
            content: '""',
            display: "block",
        },
    },
};

Nesting styles

Nesting styles is not supported, but you can use the parent selector & instead.

Designed and maintained with by @jmjuanes.

Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.

Currently v4.3.0