FlexCSS

A flexible CSS libary which is minimal and easy to read.

FlexScript

The FlexCSS has custom Stylus Inspired Domain Specific Language (DSL) called FlexScript. The flex-cli doesnt care about the exetention of FlexScript but it is recommended to use the: .flex exetention. Like: ui.flex

Quick Start | CLI

Paste this inside a file like: card.flex

.card {
  fusion-gradient, shadow-xl, rounded
}

Run npx flex-cli transpill card.flex -o card.css and after this it is expected to show the css below in the card.css:

.card {
  background: linear-gradient(135deg, #4776E6, #8E54E9);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  border-radius: 50px
}

There is also another command: npx flex-cli watch card.flex -o card.css. This will use the watchFile() function from the node:fs to change the output on change.

Common errors:

If the flexcss-cli command doesn't work (common on Linux). Try to go in the node_modules folder and run chmod +x cli.js for the FlexCSS-CLI to run as executable.

Documentation

Flex CSS documentation