Guides

Editor setup

Get _78- class suggestions as you type — in HTML and PHP, with go-to-definition on top. One extension and two settings; still no build step.

VS Code

1. Install the extension

HTML CSS Support (ecmel.vscode-html-css). It completes class and id values from whichever stylesheets you point it at, and it works in more than just HTML files.

Quick Open (Ctrl+P / ⌘P)

ext install ecmel.vscode-html-css

2. Turn it on for PHP

Out of the box it only looks at HTML. If your pages are PHP — as this site's are — add PHP to the languages it works in. This one is global, in your user settings.json, and VS Code needs a restart before it takes effect.

user settings.json

{
  "css.enabledLanguages": ["html", "php"]
}

3. Point it at the kit

This one is per project, in that project's .vscode/settings.json, so each project can point at whatever it actually uses.

.vscode/settings.json

{
  "css.styleSheets": ["C:/wamp64/www/78UIKit/css/**/*.css"]
}

Adjust the path to wherever your copy of the kit lives.

Why the folder, and not kit.css

kit.css is almost nothing but @import lines — the classes all live in the component files it pulls in. The extension may not follow those imports, so pointing it at a single file can leave you with almost no suggestions. The glob picks up every component file directly, which is where the real classes are.

No local copy of the kit?

If a project only loads the kit from the CDN, point at the CDN file instead. It is worth typing _78- somewhere afterwards to confirm suggestions actually appear — remote stylesheets are the case where the @import problem above is most likely to bite.

.vscode/settings.json — CDN

{
  "css.styleSheets": ["https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/css/kit.css"]
}

Downloading the kit's css/ folder into the project and globbing it locally is the more reliable option if you hit that.

What else you get

Once the stylesheets are wired up, two things come along for free.

Go to Definition. Put the cursor on a class and press F12, or Ctrl/⌘-click it, and you land on the rule that defines it. Quicker than searching the docs when you want to know exactly what _78-stat-card__spark does.
Class validation. The extension can check the classes in a file against the stylesheets it knows about and flag ones that do not exist — which catches a typo like _78-btn-primry before you wonder why the button is unstyled.

Nothing here changes what ships. It is editor comfort only — the kit is still plain CSS you load with a <link>, and a colleague without any of this set up works on the same files just fine.

← Theming Using with AI →