---

This source code is distributed under the AGPL 3.0 license, while Vanilla OS is a product of fabricators.ltd.

Please note that all assets on this website are owned by fabricators.ltd and the Vanilla OS Contributors Team.

Development

CSS Convention

Our framework follows the BEM (Block, Element, Modifier) convention for CSS classes.

Colors are defined in the assets/css/colors/default.css and assets/css/colors/dark.css files, they must be unique and not overlap with each other.

Each new component (block) must be defined in a separate file in the assets/css/components directory and must follow the following structure:

.block {
    /* Color Variables */
    --block-color: var(--color-primary);
    --block-element-color: var(--color-secondary);
}

.block {
    /* Block Styles */
    background-color: var(--block-color);
}

.block-element {
    /* Element Styles */
    background-color: var(--block-element-color);
    width: 100px;
    height: 100px;
}

.block--modifier {
    /* Modifier Styles */
    width: 200px;
    height: 200px;
}

/* Media Queries */

Build and Run

To run the Vanilla OS website locally, you need to have Vue.js and Vite installed.

Build articles index

pnpm generate-articles

Run the website locally

This will also build the articles index.

pnpm dev

Production Build

This will also build the articles index.

pnpm build