Get Started

Stylify generates CSS dynamically based on what you write. It can be used directly in the browser or in a Node.js environment. It is inspired by Tailwind and Tachynos.

Unlike these CSS frameworks, Stylify uses native syntax like CSS property:value as selectors. Therefore, you don't have to study or remember the selectors because they are almost the same like pure CSS. In case you want shorter or completely different selectors you can configure them or create a whole new preset.

Quick Start

The easiest way to start is to use Stylify through CDN. Create an index.html file and copy the code bellow into it (you can also try our Codepen Playground).

<script src="https://cdn.jsdelivr.net/npm/@stylify/stylify@latest/dist/stylify.native.min.js"></script>
<script>
// This will be used for the configuration in examples bellow
const compilerConfig = {};
Stylify.runtime.configure({
    compiler: compilerConfig
})
</script>
Configuration varries based on where the Stylify is used. Checkout integration examples to find the tutorial for your favorite tool.

Writting first CSS

Before you start writting selectors, there are few rules you need to know:

  • Selectors are almost the same like css property:value
  • Use __ (two underscores) for a space and ^ (a hat) for a quote
  • The default syntax pattern is <screen>:<pseudo classes>:<property>:<value>
The property:value syntax comems from the Native Preset that is a default config for browser environment. You can define custom selectors and presets if you like. You can find more about that in the content bellow.
Loading...

Screens usage

In the Native Preset there are predefined shortcuts like sm, md, lg you may know from Tailwind or Bootstrap and dynamic screens such as minw, maxw, rng. Dynamic screens are flexible and the generated media query depends on the value you choose when using them. Checkout the full list.

When not using the Native Preset, you have to define your own screens as shown bellow in the configuration section.

Loading...

Screens can also be randomly combined by using logical operands. There is a logical AND && and a logical OR ||. Don't worry about the screens order. They are sorted before the CSS is generated (see screens documentation).

Loading...

If you want to add a custom screen, you can do that like this:

const compilerConfig = {
    screens: {
        'xs': '(min-width: 400px)',
        // Screens can also be functions
        // That allows you to make as flexible screen as possible
        'minw\\w+': (screen) => `(min-width: ${screen.replace('minw', '')})`
    }
};

Adding a Variable

It's not a good practice to have hardcoded variables in the code. Therefore you can define Variables.

Variable can be defined in a content (expects an object without surounding brackets) when used localy (one file / a few pages) or in a compiler config, when used globally.

Loading...

In a compiler config:

const compilerConfig = {
    variables: {
        fontSize: '24px',
        fontSizeLg: '32px',
        textShadow: '0 4px 8px #379adf'
    }
};

Defining a Component

When we want to reuse a piece of code, for example for a button without duplicating classes, we can define a component like this:

Variable can be defined in a content (expects an object without surounding brackets) when used localy (one file / a few pages) or in a compiler config, when used globally.

Loading...

In a compiler config:

const compilerConfig = {
    components: {
        'label-icon': 'lg:font-size:48px margin-left:8px',
        label: \`
            display:flex
            line-height:1.2
            font-size:32px
            align-items:center
        \`,
    }
};

Custom selectors

In case you want to add a custom selector, for example a shorter variant for margin-left like ml, you can do that as follows:

const compilerConfig = {
    macros: {
        'ml:(\\S+?)': function (macroMatch, cssProperties): void {
            // ml:24px => will create => margin-left: 24px
            cssProperties.add('margin-left', macroMatch.getCapture(0));
        }
    }
};

More Configuration

Checkout the compiler documentation to learn, how to configure Stylify even more.

The way to pass the configuration depends on how and where you use the Stylify. Make shure to checkout our guides bellow on how to integrate the Stylify into various tools.

Stylify Packages

Stylify ships with multiple packages. All of them can be installed using NPM or YARN. Stylify and Profiler can also be used directly through CDN:

Try Stylify with your favorite tool!

For easier start with your favorite tool checkout the integration examples.

If you haven't found your favorite tool let us know and we will add it.