FSCSS (Figured Shorthand CSS)

FSCSS is a lightweight, modern CSS preprocessor that reduces boilerplate and adds powerful new syntax for rapid styling. Think of it as CSS with superpowers — arrays, functions, variables, randomness, shorthand repetition, and more.

FSCSS NPM repository: https://github.com/Figsh/xfscss

---

FSCSS Modern Remote Module Protocol

The Modern Remote Module Protocol is a core design choice built directly into the FSCSS compiler. Instead of forcing developers to download package archives via node modules just to write a styling prototype, the FSCSS engine resolves imports over the air on-demand.

Files: xf/styles

Repositories: /assets/scripts/libs.json

---

Why FSCSS?

• FSCSS takes a shorthand approach:

• Less boilerplate: shorter files

• Array + function logic: more expressive

• Built-in randomness & numeric ops: great for dynamic UIs

• Vendor prefixing: no need for autoprefixer

• Designed for dynamic content, 3D animations, and complex prototypes

---

Get started

Start with our templates and remote library's https://fscss.devtem.org/libraries

version 1.2.5+ shorthands
Example This:

.media-frame {
  pos: relative;
  w: 100%;
  aspect: 16 / 9;
}
.media-frame > img {
  inset: ratio-fit(16 / 9);
  obj-fit: cover;
}
.card {
  stack: 12px;
  px: 16px;
  py: 14px;
  rounded: 12px;
  bg: #12121a;
  border-x: 1px solid rgba(255,255,255,.08);
  shadow: 0 8px 24px rgba(0,0,0,.35);
  max-w: 360px;
}
.avatar { size: 40px; rounded: 50%; }

version 1.2.4+ pattern
Define:

pattern(0.6: "rounded primary button with color: white, bg: red", `
background: @match(background:?\s([#\w\d-_]+)) @match(bg:?\s([#\w\d-_]+));
color: @match(color:?\s([#\w\d-_]+)) @match(text:?\s([#\w\d-_]+));
border-radius: 25px;
padding: 10px 20px;
border: 2px solid;
font-weight: 700;
`)

Then use:

.primary {
  rounded primary button with color: #0BCEAE, background: midnightblue
}

https://fscss.devtem.org/pattern

---

Documentation

For complete documentation with examples, visit the FSCSS Documentation.

Documentation includes:

• Full syntax reference
• Interactive examples
• Feature deep dives
• Performance best practices
• Troubleshooting guide

API Reference

https://fscss.devtem.org/api

License

FSCSS is MIT licensed.

---

FSCSS. Authored and maintained with ❤️ by developers for developers.