Projects and components

What a project is

An ordinary web project in a folder you own:

your-project/
  globals.css        the design system
  styles.css         the styling for this page
  index.html         the page
  components/        one folder per component, each with its own stylesheet
  assets/
    fonts/
    images/
    icons/

Nothing is in a database and nothing is in a proprietary format. index.html is an HTML file. styles.css is a stylesheet. You could open either in any editor and read it.

That layout is what an Astro project wants, which is why handing the folder to FEWD Studio is opening the folder rather than an export step.

Starting one

New project on the welcome screen or in the left rail. Choose where it goes and name it; the design system is written first, because everything else is built from it.

Open points at an existing project folder — anything with a globals.css in it.

Saving

Save, or ⌘S. The button states when there is unsaved work.

Three things are written: the page, its stylesheet, and any components. Your design system is written separately, from the design system mode.

Anything in your stylesheet that BooshDesign cannot represent — a media query, a nested rule, something you added by hand — is kept exactly as you wrote it and put back untouched. Rebuilding a file from a model is only safe when nothing is lost.

Components

Two kinds, and the difference matters.

Sections

A whole band of the page: a hero, a feature row, a testimonial. Sections sit one after another on the page, never inside one another.

Elements

A card, a feature row, a price tile. These are never placed on a page directly — they live inside a section.

Using one several times in the same section is what makes it repeatable. Three cards in a feature row are three uses of one Card, and the layers panel says so: 3 × Card. When this becomes a real site, that is what lets the client add a fourth without touching a designer.

That is why it matters that a repeat is declared rather than guessed. Two boxes that happen to look alike are two boxes. Two uses of a component are a repeat, because you reached for the component twice.

Making one

Select something and press + beside Components, or Save as component on the right-click menu. Name it.

A component is one outermost element. That is the Boosh CMS contract, and it is also just what a component is — Astro, React, a web component, all of them return one thing.

So if you want a component made of three things sitting side by side, they have to become one thing first. ⇧-click to add to the selection, on the canvas or in the layers panel, and ⌘G to group them — which puts them in a <div> together. ⇧⌘G takes it back apart.

That div is real. It is in the markup, it is in the export, and a developer reading the file sees exactly the component that was drawn — it is not a wrapper this app invented to keep track of something.

Saving a multiple selection as a component offers to group it for you, and says so first, because it changes the markup.

An element component gets its own block: a Card is .card with .card__title, not .features__card — because it is a component in its own right and travels between sections unchanged. Every instance shares one rule, which is exactly what a repeat needs.

The selection you saved becomes the first instance of it.

On disk

components/Card/Card.html
components/Card/Card.css

One folder per component with its own stylesheet — the shape FEWD Studio and Boosh CMS both already read.

The hand-off

Open the folder in FEWD Studio. There is no import and no conversion: the HTML is HTML, the CSS is CSS, and globals.css is the same design system both apps read.

What FEWD adds is the developer’s half — turning components into Astro, wiring collections, and marking what a client is allowed to edit.

Unused rules are swept on save

Deleting something leaves its rule behind while you work — the class may come back, and undo restores the stylesheet anyway. That is right at the moment of deleting and wrong in the file somebody else opens: an hour of trying things leaves a sheet full of rules for markup that is not there, and nobody downstream can tell which of them matter.

So on Save, any rule the page can no longer match is removed, along with the @keyframes and @media blocks that belonged to it. The Save button says how many went. Nothing is removed quietly.

What counts as used is the whole first class of the selector, never a prefix — .section-2 starts with the text .section and is a different block. A rule still used by something else stays, whatever it is named after. A selector that does not begin with a class is left alone: this cannot reason about one, and a rule somebody wrote by hand is not litter.