{"id":13417516,"url":"https://github.com/chkilel/vitewind-theme","last_synced_at":"2025-04-14T21:13:21.820Z","repository":{"id":41334211,"uuid":"399213893","full_name":"chkilel/vitewind-theme","owner":"chkilel","description":"Wintercms and Octobercms  theme with the power of Windi CSS and the speed of Vite JS.","archived":false,"fork":false,"pushed_at":"2022-12-31T15:20:49.000Z","size":1005,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T21:13:15.522Z","etag":null,"topics":["october","october-cms","octobercms","octobercms-theme","tailwindcss","vite","vitejs","windicss","winter","winter-cms","wintercms","wintercms-theme"],"latest_commit_sha":null,"homepage":"https://octobercms.com/theme/chkilel-vitewind","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chkilel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-23T18:44:15.000Z","updated_at":"2023-11-28T00:40:00.000Z","dependencies_parsed_at":"2023-01-31T19:15:16.604Z","dependency_job_id":null,"html_url":"https://github.com/chkilel/vitewind-theme","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chkilel%2Fvitewind-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chkilel%2Fvitewind-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chkilel%2Fvitewind-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chkilel%2Fvitewind-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chkilel","download_url":"https://codeload.github.com/chkilel/vitewind-theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248961237,"owners_count":21189993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["october","october-cms","octobercms","octobercms-theme","tailwindcss","vite","vitejs","windicss","winter","winter-cms","wintercms","wintercms-theme"],"created_at":"2024-07-30T22:00:38.962Z","updated_at":"2025-04-14T21:13:21.798Z","avatar_url":"https://github.com/chkilel.png","language":"HTML","funding_links":[],"categories":["Integrations with Backends","Get Started"],"sub_categories":["OctoberCMS","Examples"],"readme":"\u003ch1 align='center'\u003eVitewind theme\u003c/h1\u003e\n\n\u003cp align='center'\u003e\u003ca href=\"https://github.com/windicss/windicss\"\u003e💨Windi CSS\u003c/a\u003e and \u003ca href=\"https://github.com/vitejs/vite\"\u003e ⚡️Vite\u003c/a\u003e, for \u003ca href=\"https://octobercms.com\"\u003e 🍂OctoberCMS\u003c/a\u003e  \u0026 \u003ca href=\"https://wintercms.com/\"\u003e❄️WinterCMS\u003c/a\u003e\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n  \u003cimg src='https://vitejs.dev/logo.svg' alt='Vite' width='100'/\u003e\n  \u003cimg src='https://windicss.org/assets/logo.svg' alt='Vite' width='100'/\u003e\n\u003c/p\u003e\n\n\n## Features\n\n- ⚡️ **It's FAST** - 20~100x times faster than Tailwind on Vite\n- 🧩 On-demand CSS utilities (Fully compatible with Tailwind CSS v2)\n- 🍃 Load configurations from `tailwind.config.js`\n- 📄 CSS `@apply` / `@screen` directives transforms\n- 🎳 Support Variant Groups - e.g. `bg-gray-200 hover:(bg-gray-100 text-red-300)`\n- 😎 [\"Design in Devtools\"](https://windicss.org/integrations/vite.html#design-in-devtools) - if you work this way in the traditional Tailwind.\n- 😎 [\"Attributify mode\"](https://windicss.org/posts/v30.html#attributify-mode), code like this\n  ```html\n  \u003cbutton class=\"bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600\"\u003e\n    Button\n  \u003c/button\u003e\n    ```\n  can be written like:\n\n  ```html\n  \u003cbutton\n    bg=\"blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600\"\n    text=\"sm white\"\n    font=\"mono light\"\n    p=\"y-2 x-4\"\n    border=\"2 rounded blue-200\"\u003e\n    Button\n  \u003c/button\u003e\n  ```\n   just enabled it by\n  ```javascript\n  // windi.config.js\n  export default {\n  attributify: true\n  }\n  ```\n\n## Installation\n\nGo to your backend to **Settings \u003e System \u003e Updates \u0026 Plugins** and install the theme `Chkilel.Vitewind`, then install the following Plugin. (just copy \u0026 paste the PluginID below and put it in the search box.)\n```\n    - Chkilel.VitewindManager\n```\n\u003e Cannot work without Vitewind Manager plugin, please install before to use the theme.\n\n## Theme Setup\n\nYou must first install the theme dependencies. **In the theme folder**, execute:\n\n```\nnpm install\n```\n\n## Theme settings\nGo to your backend to **Settings \u003e Vitewind theme**, and configure the following settings:\n\n![Setting Vitewind](./assets/images/settings.png)\n\n        Environment:\n            - Use `.env` configuration  : will use the `APP_ENV` value in the .env file\n            - Development               : if you are working on the theme development (npm run dev)\n            - Production                : if you are in production, the theme must be built before (npm run build)\n\n        Port number : Enter the port on which the theme dev server is running (when you run `npm run dev`), default to 3000.\n\n        Theme: select the appropiate theme, if you modified the theme name in the `theme.yaml` file.\n\n\n## Vite config file\n\n\u003e - If you rename the theme folder, please adjust the name [VITE_WIND_RENAMED] in `vite.config.js` accordingly.\n\u003e - If you need many JS files for your layouts, add them all to the `build.rollupOptions.input` config array to be compiled.\n\n```javascript\nimport WindiCSS from 'vite-plugin-windicss'\nexport default ({command}) =\u003e ({\n    base: command === 'serve' ? '' : '/themes/[VITE_WIND_RENAMED]/public/build/', // Addjust the name of the theme\n    publicDir: 'fake_dir_so_nothing_gets_copied',\n    processCssUrls: true,\n    build: {\n        manifest: true,\n        outDir: 'public/build',\n        rollupOptions: {\n            input: [\n                'resources/js/app.js',\n                'resources/js/home.js',\n                // Add here all the files you need if you load different javascript code in each layout\n                'ressource/js/myFirstAddedFile.js',\n                'ressource/js/mySecondAddedFile.js',\n                ...\n            ],\n        },\n    },\n    plugins: [...],\n});\n```\n\n## Layout component\n\nThe **Vitewind plugin** register a layout component to inject JS and CSS assets,manage **hot reload** in Development and inject **build assets** in production.\n\n![Layout component](./assets/images/layout-component.png)\n\nPut the component in every layout and set the JS files you need to load for that layout.\n\n![Layout component](./assets/images/layout-component-settings.png)\n\n\n## Development\nRun the command below in your theme folder:\n\n```\nnpm run dev\n```\nThe theme DEV server will start on `http://localhost:3000/` and listen to any modification in your `.htm` files ( layouts, pages, partials,...).\nthen, you can visite your site on its usual URL and start development.\n\n\u003e Note the **port of the dev server**, if different from 3000 you need to adjust it in the backend settings.\n\n## Production build\n\nUse `npm run build` to compile your assets.\n\n```\nnpm run build\n```\n\u003e Don't forget to adjust the `Enviroment` to **production** in the backend settings.\n\n## Theme License\n\nMIT License - check out [LICENSE](LICENSE) file for MIT license details.\n\n## Changelog\n\n#### 1.0.0 : initial release\n- Vitewind: the magic of Windi CSS and the speed of Vite JS\n#### 1.0.1 : Update theme dependency\n- Update theme dependencies\n#### 1.1.0 : Update dependencies and fix minor bugs\n- Fix theme directory path in `vite.config.js`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchkilel%2Fvitewind-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchkilel%2Fvitewind-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchkilel%2Fvitewind-theme/lists"}