v0.0.2older

Documentation version

Currently searching v0.0.2

Search pages, component props, utilities and tokens.

↑↓ to move to openesc to close

Open files in your editor

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

Start hereLumos 0.0.1

Installation

Getting Lumos running on your machine

1. Navigate to a folder

Terminal
cd ~/Documents

2. Create the project

Terminal
npm create lumos@latest my-site

3. Fill in project details

Open src/consts.ts and fill in your own details.

src/consts.ts
export const SITE_NAME = "My Studio";
export const SITE_DESCRIPTION =
  "A studio that makes things.";
export const SITE_URL = "https://example.com";

4. Set your CSS variables

Then open src/styles/base.css and change the swatches at the top: --brand-500Token#c6fb50The brand color. Used as an accent and as the primary button fill. is the accent color used for buttons and highlights. Save, and the browser updates.

5. Set up your editor

None of these are required. The project builds and runs without them. They are what makes the files pleasant to work in, and the first two do for code what the Style panel did for you in Webflow.

  • Astro gives .astro files syntax highlighting, error checking and autocomplete. Without it they open as plain text. Lumos recommends this one in the project itself, so VS Code offers it the first time you open the folder.
  • CSS Var Complete completes your CSS variables as you type: --space- offers the whole scale, and a color token arrives with its swatch beside it. It needs no setup here, because it reads every .css file in the project and already understands .astro.
  • Prettier formats a file when you save it, so indentation stops being something you think about. Lumos ships a .prettierrc with the Astro plugin configured, so it knows how to format .astro as well as CSS. Turn on Format on Save in VS Code's settings to make it automatic.