Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chkilel/vitewind-theme
Wintercms and Octobercms theme with the power of Windi CSS and the speed of Vite JS.
https://github.com/chkilel/vitewind-theme
october october-cms octobercms octobercms-theme tailwindcss vite vitejs windicss winter winter-cms wintercms wintercms-theme
Last synced: 4 months ago
JSON representation
Wintercms and Octobercms theme with the power of Windi CSS and the speed of Vite JS.
- Host: GitHub
- URL: https://github.com/chkilel/vitewind-theme
- Owner: chkilel
- License: mit
- Created: 2021-08-23T18:44:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-31T15:20:49.000Z (about 2 years ago)
- Last Synced: 2024-10-02T04:41:20.563Z (4 months ago)
- Topics: october, october-cms, octobercms, octobercms-theme, tailwindcss, vite, vitejs, windicss, winter, winter-cms, wintercms, wintercms-theme
- Language: HTML
- Homepage: https://octobercms.com/theme/chkilel-vitewind
- Size: 981 KB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Vitewind theme
💨Windi CSS and ⚡️Vite, for 🍂OctoberCMS & ❄️WinterCMS
## Features
- ⚡️ **It's FAST** - 20~100x times faster than Tailwind on Vite
- 🧩 On-demand CSS utilities (Fully compatible with Tailwind CSS v2)
- 🍃 Load configurations from `tailwind.config.js`
- 📄 CSS `@apply` / `@screen` directives transforms
- 🎳 Support Variant Groups - e.g. `bg-gray-200 hover:(bg-gray-100 text-red-300)`
- 😎 ["Design in Devtools"](https://windicss.org/integrations/vite.html#design-in-devtools) - if you work this way in the traditional Tailwind.
- 😎 ["Attributify mode"](https://windicss.org/posts/v30.html#attributify-mode), code like this
```html
Button
```
can be written like:
```html
Button
```
just enabled it by
```javascript
// windi.config.js
export default {
attributify: true
}
```
## Installation
Go to your backend to **Settings > System > Updates & Plugins** and install the theme `Chkilel.Vitewind`, then install the following Plugin. (just copy & paste the PluginID below and put it in the search box.)
```
- Chkilel.VitewindManager
```
> Cannot work without Vitewind Manager plugin, please install before to use the theme.
## Theme Setup
You must first install the theme dependencies. **In the theme folder**, execute:
```
npm install
```
## Theme settings
Go to your backend to **Settings > Vitewind theme**, and configure the following settings:
Environment:
- Use `.env` configuration : will use the `APP_ENV` value in the .env file
- Development : if you are working on the theme development (npm run dev)
- Production : if you are in production, the theme must be built before (npm run build)
Port number : Enter the port on which the theme dev server is running (when you run `npm run dev`), default to 3000.
Theme: select the appropiate theme, if you modified the theme name in the `theme.yaml` file.
## Vite config file
> - If you rename the theme folder, please adjust the name [VITE_WIND_RENAMED] in `vite.config.js` accordingly.
> - If you need many JS files for your layouts, add them all to the `build.rollupOptions.input` config array to be compiled.
```javascript
import WindiCSS from 'vite-plugin-windicss'
export default ({command}) => ({
base: command === 'serve' ? '' : '/themes/[VITE_WIND_RENAMED]/public/build/', // Addjust the name of the theme
publicDir: 'fake_dir_so_nothing_gets_copied',
processCssUrls: true,
build: {
manifest: true,
outDir: 'public/build',
rollupOptions: {
input: [
'resources/js/app.js',
'resources/js/home.js',
// Add here all the files you need if you load different javascript code in each layout
'ressource/js/myFirstAddedFile.js',
'ressource/js/mySecondAddedFile.js',
...
],
},
},
plugins: [...],
});
```
## Layout component
The **Vitewind plugin** register a layout component to inject JS and CSS assets,manage **hot reload** in Development and inject **build assets** in production.
Put the component in every layout and set the JS files you need to load for that layout.
## Development
Run the command below in your theme folder:
```
npm run dev
```
The theme DEV server will start on `http://localhost:3000/` and listen to any modification in your `.htm` files ( layouts, pages, partials,...).
then, you can visite your site on its usual URL and start development.
> Note the **port of the dev server**, if different from 3000 you need to adjust it in the backend settings.
## Production build
Use `npm run build` to compile your assets.
```
npm run build
```
> Don't forget to adjust the `Enviroment` to **production** in the backend settings.
## Theme License
MIT License - check out [LICENSE](LICENSE) file for MIT license details.
## Changelog
#### 1.0.0 : initial release
- Vitewind: the magic of Windi CSS and the speed of Vite JS
#### 1.0.1 : Update theme dependency
- Update theme dependencies
#### 1.1.0 : Update dependencies and fix minor bugs
- Fix theme directory path in `vite.config.js`