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.

Alias	Properties
`bc`	`border-color`
`bg`	`background-color`
`m`	`margin`
`mb`	`margin-bottom`
`ml`	`margin-left`
`mr`	`margin-right`
`mt`	`margin-top`
`mx`	`margin-left` and `margin-right`
`my`	`margin-top` and `margin-bottom`
`p`	`padding`
`pb`	`padding-bottom`
`pl`	`padding-left`
`pr`	`padding-right`
`pt`	`padding-top`
`px`	`padding-left` and `padding-right`
`py`	`padding-top` and `padding-bottom`
`radius`	`border-radius`
`size`	`width` 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.

Color Modes

Markup

Designed and maintained with by @jmjuanes.

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

Currently v4.4.0

Repository

Issues

Releases