How to Style with Prompts

#frontend #fscss #css

🧩 How to Style with Prompts using FSCSS

FSCSS allows you to style with descriptive prompts instead of manual CSS syntax.
It interprets text prompts into valid CSS — perfect for developers who love writing in a natural, expressive way.

🧠 Example 1: Setting up variables with str()

/* str(A styled card, " the value here ") */
.card {
  A styled card
}

✨ Example 2: Adding smooth hover transitions

/* str(add smooth hover, "
transition: all 0.3s ease;
&:hover{
  transform: translateX(-10px);
  box-shadow: 0 0 4px #069;
}") */

.card {
  transform: translateX(0);
  box-shadow: 0 0 4px #000;
  add smooth hover
}

🌍 External Prompt Imports

If your prompt variables are external, import them using:

@import(exec(your_prompts.fscss))

Example import:

@import(exec(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@refs/heads/main/xf/styles/prompts.fscss))

body {
  High contrast dark aesthetic with soft glow
}

.card {
  /* card style */
  Smooth gradient background with subtle lighting

  /* center content */
  center content

  /* Define height */
  height should be 200px

  /* add hover transition */
  then_ add smooth hover

  /* add animation */
  add pulse animation
}

/* Define pulse keyframes */
pulse keyframes

.box {
  /* ... */
}

⚙️ Running FSCSS

When running locally (Node.js backend):

fscss your_file.fscss your_file.css

After installing FSCSS version 1.1.7.

🧩 Runtime Import Example (Browser)

You can load FSCSS on the client side using the runtime loader:

<head>
  <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.7/e/exec.min.js" defer></script>
  <style>
    @import(exec(your_file.fscss))
  </style>
</head>