Get Started
Stylify is a library that uses CSS-like selectors to generate optimized utility-first CSS on demand. Stylify processes content (of a file for example), finds class selectors and generates CSS for them. Then it does some optimization and generates CSS files.
All you have to do in order to start using Stylify is to install it and write CSS-like selectors into class attributes. No configuration required. You don't have to create any CSS files, add any configuration or study anything. If you know CSS a bit, you already know, how to use Stylify.
However, if you want, you can use other features like Variables, Components, Macros and Custom selectors. More about them below.
Stylify CSS doesn't ship with any "Fancy Pants" shortcuts, color themes and predefined typography. You might be asking why, so here are a few explanations for start:
- Shortcuts: They are hard to remember and impractical. Yes, using them means less typing and shorter class attributes for the cost of studying syntax (which is easy to forget) and increased complexity.
- Color palettes: Stylify doesn't provide any because they doesn't match design needs in most cases and you have to get them from project designer, downloaded theme or generate them on your own using some tool like Material Theme Builder.
- Typography: The same as color palettes. You can find some typography tools and assets and typography snippets in Stlyify docs.
- To sum it up, the goal is to stick as much as possible with the native CSS syntax without unnecessary predefined configuration that is practically useless and overvalued.
Installation
Stylify can work with any tool. For some of them it have its own integration. If you havent found your favorite let us know.
Quick Start
The easiest way to start is to try our the Codepen Playground.
Syntax is similar to CSSproperty:value
with a few differences:
- Use
_
(one underscore) for a space and^
(a hat) for a quote - To preserver underscore or a hat character, use
\
(backslash) =>\_
- The default syntax pattern is
<screen>:<pseudo classes>:<property>:<value>
. Sceens and pseudo classes are optional. - You can group selectors to make them a bit shorter:
<screen>:<pseudo classes>:{<multiple properties split by ; >}
color:blue => blue color
hover:color:blue => blue color after hover
lg:color:blue => blue color for from selected screen
lg:hover:color:blue => blue color after hover from selected screen
hover:{color:blue;font-weight:bold} # Shortcut for multiple selectors
lg:hover:{color:blue;font-weight:bold} # The same but also for screen
<!--
Edit Me 😎!
Write selectors as CSS property:value
Use _ for a space and ^ for a quote
-->
<img src="/images/p1.jpg" class="
height:120px
width:auto
border-radius:4px
transition:.3s
hover:scale:1.1
">
Screens Usage
Stylify has predefined shortcuts like sm
, md
, lg
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.
Check out the full list. All generated screens are automaticaly sorted.
Screens
Screens can also be combined using logical operands: Logical AND: &&
, Logical OR: ||
Combined screens
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 => dynamic screens
'customScreen\\w+': (screen) => `(min-width: ${screen.replace('customScreen', '')})`
}
};
Adding a Variable
It's not a good practice to have hardcoded values in the code. Therefore you can define variables.
Variable can be defined in a content (expects an object without surounding brackets) when used localy or in a compiler config, when used globally.
<!--
stylify-variables
height: '120px',
radius: '4px',
scale: '1.1'
/stylify-variables
-->
<img src="/images/p3.jpg" class="
width:auto
transition:.3s
height:$height
border-radius:$radius
hover:scale:$scale
">
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. Component 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.
<!--
stylify-components
'image': `
height:100px
width:auto
border-radius:4px
transition:.3s
margin:0_8px
hover:scale:1.1
`
/stylify-components
-->
<img src="/images/p1.jpg" class="image">
<img src="/images/p2.jpg" class="image">
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
`,
}
};
link
this selector can have a collision in production with selector like sidebar-link
, when mangling selectors. Check out components documentation for more info.
Adding Macros
In case you want to add for example a shorter variant for margin-left
like ml
, you can add macro as in example below.
const compilerConfig = {
macros: {
'ml:(\\S+?)': ({macroMatch, cssProperties}) => {
// ml:24px => will create => margin-left: 24px
cssProperties.add('margin-left', macroMatch.getCapture(0));
}
}
};
Custom selectors
Styling elements globally can be done using custom selectors.
Syntax is folllowing [css selectors]{stylify selectors split by ;}
.
The &
character always reffers to upper level like in SCSS.
For a space use the _
(underscore) and for a quote ^
a hat character.
<!-- Every <a> is going to have blue color -->
<div class="[a]{color:blue}">
<!-- When the cursor is over the link, only the label is going to be underlined -->
<a href="#" class="
hover:text-decoration:none
[&:hover_.label]{text-decoration:underline;font-weight:bold}
">
<span class="icon">&plus;</span>
<span class="label">Blue link</span>
</a>
</div>
Prepared Components
Are you looking for some prearanged components? We have you covered!
Material Theme Integration guide
If you are looking for some color palettes, there is a guide on how to use Material Theme Builder to easily generate Material Theme for your next project.
More Configuration
Check out the compiler for more configuration options.
Stylify CSS Packages
Stylify ships with multiple packages. All of them can be installed using NPM or YARN. Stylify CSS and Profiler can also be used directly through CDN:
- @stylify/astro - Integration module for Astro.build
- @stylify/stylify - The core. Generates CSS. Rewrites (mangles) selectors
- @stylify/bundler - For generating CSS bundles
- @stylify/unplugin - Universal plugin for Rollup, Webpack, Vite and Esbuild
- @stylify/nuxt - A module for Nuxt.js v3
- @stylify/nuxt-module - A module for Nuxt.js v2 < v3
Try Stylify CSS with your favorite tool!
For easier start with your favorite tool check out the integration examples.