https://github.com/vanilla-os/website
Official Vanilla OS Website.
https://github.com/vanilla-os/website
frontend hacktoberfest vanillaos vite vue website
Last synced: about 1 month ago
JSON representation
Official Vanilla OS Website.
- Host: GitHub
- URL: https://github.com/vanilla-os/website
- Owner: Vanilla-OS
- License: agpl-3.0
- Created: 2022-09-30T19:10:40.000Z (over 2 years ago)
- Default Branch: v2
- Last Pushed: 2025-03-06T08:22:04.000Z (2 months ago)
- Last Synced: 2025-03-30T11:06:27.853Z (about 2 months ago)
- Topics: frontend, hacktoberfest, vanillaos, vite, vue, website
- Language: Vue
- Homepage: https://vanillaos.org
- Size: 80.4 MB
- Stars: 53
- Watchers: 5
- Forks: 34
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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)](https://en.bem.info/methodology/quick-start/)
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:
```css
.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](https://vuejs.org/) and
[Vite](https://vitejs.dev/) installed.
#### Build articles index
```bash
pnpm generate-articles
```
#### Run the website locally
This will also build the articles index.
```bash
pnpm dev
```
## Production Build
This will also build the articles index.
```bash
pnpm build
```