Download the PHP package chkilel/vitewind-theme without Composer
On this page you can find all versions of the php package chkilel/vitewind-theme. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package vitewind-theme
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" - if you work this way in the traditional Tailwind.
-
😎 "Attributify mode", code like this
can be written like:
just enabled it by
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.)
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:
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.
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:
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.
Don't forget to adjust the
Enviroment
to production in the backend settings.
Theme License
MIT License - check out 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