![](logo-white.png#gh-dark-mode-only)
![](logo.png#gh-light-mode-only)
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.
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 */
To run the Vanilla OS website locally, you need to have Vue.js and Vite installed.
npm run generate-articles
This will also build the articles index.
npm run dev
This will also build the articles index.
npm run build