{"id":13604326,"url":"https://github.com/Grinch3214/vite-starter-markup-template","last_synced_at":"2025-04-11T23:32:18.585Z","repository":{"id":197369112,"uuid":"695665076","full_name":"Grinch3214/vite-starter-markup-template","owner":"Grinch3214","description":"ViteJS starter template for markup/vanilla JS","archived":false,"fork":false,"pushed_at":"2025-03-09T09:22:30.000Z","size":2428,"stargazers_count":50,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T19:12:52.275Z","etag":null,"topics":["autoprefixer","image-optimizer","imagemin","imagemin-webp","javascript","markup","open-source","reset-css","scss","sort-media-query","vite","vitejs"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/Grinch3214.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-23T21:09:35.000Z","updated_at":"2025-03-09T09:22:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"b3a47c4b-2bd6-4112-bb48-402f13cad619","html_url":"https://github.com/Grinch3214/vite-starter-markup-template","commit_stats":null,"previous_names":["grinch3214/vite-starter-markup-template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grinch3214%2Fvite-starter-markup-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grinch3214%2Fvite-starter-markup-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grinch3214%2Fvite-starter-markup-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Grinch3214%2Fvite-starter-markup-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Grinch3214","download_url":"https://codeload.github.com/Grinch3214/vite-starter-markup-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248495159,"owners_count":21113578,"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":["autoprefixer","image-optimizer","imagemin","imagemin-webp","javascript","markup","open-source","reset-css","scss","sort-media-query","vite","vitejs"],"created_at":"2024-08-01T19:00:43.619Z","updated_at":"2025-04-11T23:32:13.562Z","avatar_url":"https://github.com/Grinch3214.png","language":"SCSS","funding_links":[],"categories":["Get Started"],"sub_categories":["Templates"],"readme":"# Vite simple starter markup template\r\n\r\n![screenshot](/demo/main-page.png)\r\n\r\nOn the Internet, it was difficult for me to find a simple template assembly to replace Gulp, and I decided to implement my “Simple markup template for beginners VITE” so that you can start comfortably developing simple landing pages or simple multi-pages sites. The build leverages Vite's capabilities for a modern and reliable build process.\r\n\r\nKey features of this template:\r\n\r\nBuild Tools: Vite.js\r\nPlugins: Autoprefixer, Imagemin, Imagemin-Webp, PostCSS Sort Media Queries, Vite plugin Image Optimizer\r\nStyles: SCSS\r\nReset: Reset.css\r\n\r\nGet your project up and running quickly with this template and start creating amazing web applications!\r\n\r\n## Dependencies\r\n\r\nThis template uses the following dependencies:\r\n\r\n- **[Vite](https://vitejs.dev/):** A next-generation frontend build tool that offers a fast dev server and optimized builds.\r\n- **[autoprefixer](https://www.npmjs.com/package/autoprefixer):** Autoprefixer automatically adds vendor prefixes to CSS.\r\n- **[vite-plugin-image-optimizer](https://github.com/FatehAK/vite-plugin-image-optimizer):** Image optimization (png, jpeg, gif, tiff, webp, avif). \r\n- **[imagemin-webp](https://www.npmjs.com/package/imagemin-webp):** Converts formats such as .png/.jpg etc to .webp format\r\n- **[postcss-sort-media-queries](https://www.npmjs.com/package/postcss-sort-media-queries):** Plugin for sorting and combining CSS media queries with mobile first / desktop first methodologies.\r\n\r\n## Starting\r\n\r\n1. To start using this template, clone the repository with this command:\r\n\r\n```bash\r\ngit clone https://github.com/Grinch3214/vite-builder.git\r\n```\r\n\r\n2. Then rename the folder \"vite-builder\" and install the dependencies:\r\n\r\n```bash\r\ncd your-project-name\r\nnpm install\r\n```\r\n\r\n\r\n## Further steps\r\n\r\nAfter cloning the template, make sure to clean up and update the following:\r\n\r\n1. Remove the .git directory and run `git init` to clean the commit history.\r\n2. Clean up the README.md file.\r\n3. Adapt the LICENSE file to your project.\r\n4. Delete `public/vite.svg`, folder `demo/`, `src/img/**/*`, `src/fonts/**/*` and also `src/scss/**.*` except `style.scss` and `_reset.scss`.\r\n5. Remove unnecessary `.html` files in the `pages` folder.\r\n6. Delete the content from `src/scss/style.scss` except `@import \"reset.scss\";`.\r\n7. In the `src/js/main.js` file, leave only these import statements: `import '../scss/style.scss';`.\r\n\r\n## Scripts\r\n\r\nUse the following scripts for your development workflow:\r\n\r\n```bash\r\n# Start the development server\r\nnpm run dev\r\n\r\n# Build for production\r\nnpm run build\r\n\r\n# Preview the build\r\nnpm run preview\r\n```\r\n\r\n## Folder Structure\r\n\r\nThis is the structure of the project:\r\n\r\n```plaintext\r\n/\r\n├── node_modules            # Node.js dependencies for the project.\r\n├── pages                   # Folder for additional .html pages\r\n├── public                  # Public assets and resources\r\n├── src                     # Source code\r\n│   ├── fonts\t            # Folder for your fonts\r\n│   ├── img                 # Folder for your images\r\n│   ├── js                  # Javascript files of your project\r\n│   ├── scss                # SCSS styles for your project\r\n├── .gitignore              # Files and folders to be ignored by Git\r\n├── index.html              # The HTML file for your project\r\n├── LICENSE                 # The license for your project\r\n├── package-lock.json       # Lockfile for your project's dependencies\r\n├── package.json            # Defines your project and its dependencies\r\n├── postcss.config.cjs      # Configuration for PostCSS\r\n├── README.md               # This file\r\n├── vite.config.js          # Configuration for Vite\r\n```\r\n\r\n## License\r\n\r\nThis template was created under the [MIT License](LICENSE).\r\n\r\n**Thank you and happy coding!** 💻","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGrinch3214%2Fvite-starter-markup-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGrinch3214%2Fvite-starter-markup-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGrinch3214%2Fvite-starter-markup-template/lists"}