Key features of this template:
Build Tools: Vite.js Plugins: Autoprefixer, Imagemin, Imagemin-Webp, PostCSS Sort Media Queries, Vite plugin Image Optimizer Styles: SCSS Reset: Reset.css
Get your project up and running quickly with this template and start creating amazing web applications!
This template uses the following dependencies:
- Vite: A next-generation frontend build tool that offers a fast dev server and optimized builds.
- autoprefixer: Autoprefixer automatically adds vendor prefixes to CSS.
- vite-plugin-image-optimizer: Image optimization (png, jpeg, gif, tiff, webp, avif).
- imagemin-webp: Converts formats such as .png/.jpg etc to .webp format
- postcss-sort-media-queries: Plugin for sorting and combining CSS media queries with mobile first / desktop first methodologies.
- To start using this template, clone the repository with this command:
git clone https://github.com/Grinch3214/vite-builder.git
- Then rename the folder "vite-builder" and install the dependencies:
cd your-project-name
npm install
After cloning the template, make sure to clean up and update the following:
- Remove the .git directory and run
git init
to clean the commit history. - Clean up the README.md file.
- Adapt the LICENSE file to your project.
- Delete
public/vite.svg
, folderdemo/
,src/img/**/*
,src/fonts/**/*
and alsosrc/scss/**.*
exceptstyle.scss
and_reset.scss
. - Remove unnecessary
.html
files in thepages
folder. - Delete the content from
src/scss/style.scss
except@import "reset.scss";
. - In the
src/js/main.js
file, leave only these import statements:import '../scss/style.scss';
.
Use the following scripts for your development workflow:
# Start the development server
npm run dev
# Build for production
npm run build
# Preview the build
npm run preview
This is the structure of the project:
/
├── node_modules # Node.js dependencies for the project.
├── pages # Folder for additional .html pages
├── public # Public assets and resources
├── src # Source code
│ ├── fonts # Folder for your fonts
│ ├── img # Folder for your images
│ ├── js # Javascript files of your project
│ ├── scss # SCSS styles for your project
├── .gitignore # Files and folders to be ignored by Git
├── index.html # The HTML file for your project
├── LICENSE # The license for your project
├── package-lock.json # Lockfile for your project's dependencies
├── package.json # Defines your project and its dependencies
├── postcss.config.cjs # Configuration for PostCSS
├── README.md # This file
├── vite.config.js # Configuration for Vite
This template was created under the MIT License.
Thank you and happy coding! 💻