Getting Started

Basic Workflow

The typical GenCSS workflow is simple:

  1. Open GenCSS and connect to your (blank) globals.css file
  2. Set up or adjust your core design values using the User Interface.
  3. Generate the CSS you need by pressing “Push to file”.
  4. Use the generated variables, tokens, and classes while building your site or app.
  5. Return to GenCSS whenever you want to adjust or expand the system.

You are not locked into anything. The CSS is yours to use, edit, and adapt.

Using GenCSS with FEWD Studio

GenCSS works especially well alongside FEWD Studio.

FEWD Studio gives you a visual front-end development environment where you can work with real HTML, CSS, and JavaScript files. GenCSS can provide the CSS foundations that FEWD Studio then uses inside your project.

A common workflow would be:

  1. Use GenCSS to create your design tokens, variables, and utility classes.
  2. Add the generated CSS to your global stylesheet.
  3. Open the project in FEWD Studio.
  4. Build your page structure visually.
  5. Apply your generated classes and variables as you work.
  6. Continue editing the real project files directly.

This gives you the benefit of a structured CSS system while still working in a real front-end development workflow.

Using GenCSS without FEWD Studio

You do not need FEWD Studio to use GenCSS.

The CSS generated by GenCSS can be used in standard front-end projects, including:

  • Static HTML websites
  • Astro projects
  • React projects
  • Next.js projects
  • WordPress themes
  • WordPress page builder projects, such as Bricks, Etch or even Breakdance.
  • Any project where you can add custom CSS

As long as your project can use a stylesheet, you can use CSS generated by GenCSS.

Where to place the generated CSS

In most projects, the generated CSS should be placed in your main global stylesheet.

This might be a file such as:

global.css styles.css main.css app.css

For WordPress projects, you may add the CSS to your theme stylesheet, child theme stylesheet, custom code area, or builder-level global CSS area depending on your setup.

For Astro, React, or Next.js projects, you would usually place the CSS in your global stylesheet and import it into your project in the normal way.

Start small

You do not need to use everything GenCSS can generate on day one.

A sensible starting point is to generate the basics first:

  • Colours
  • Typography values
  • Spacing values
  • Container widths
  • Basic utility classes

Once those are in place, you can add more advanced utilities or design values as your project grows.

The best CSS systems are useful, not bloated. GenCSS is most effective when you generate what you actually need.

Editing the generated CSS

The CSS generated by GenCSS is normal CSS.

That means you can edit it manually whenever you want. You are not required to keep using GenCSS after generating the output, and you are not locked into a hidden system.

If you want to rename a variable, adjust a value, remove unused utilities, or combine the output with your existing stylesheet, you can.

GenCSS is a helper, not a dependency.