🌐 My Webflow Boilerplate

Welcome to My Webflow Boilerplate - your ultimate starting point for building stunning, high-performance websites with Webflow, enhanced with the power of modern web technologies like Vite, TypeScript, and SCSS.

🚀 Features

• ⚡ Fast Development: Utilize Vite for an incredibly fast development and build process.
• 🔒 Type Safety: Leverage TypeScript for safer code across your project.
• 🎨 Advanced Styling: SCSS allows for more complex and maintainable stylesheets.
• 💥 Dynamic Interactions: GSAP and Swiper bring your site to life with animations and sliders.
• 📅 Efficient Date Handling: Dayjs offers simple and powerful date manipulation.
• ✅ Code Quality: Ensure high code quality with Prettier, ESLint, and Stylelint.
• 🤖 Automated Workflows: Husky, Lint-staged, and Commitlint streamline your Git workflow.

📦 Installation

Getting Started

1. Clone the repository to get your own copy of the boilerplate:

   git clone https://github.com/your-username/my-webflow-boilerplate.git

2. Navigate to your project directory and install the necessary dependencies:

   cd my-webflow-boilerplate
   npm install

🛠 Usage

Development Workflow

• Start Development Server: Access your app at http://localhost:3000.

  npm run dev

• Build for Production: Optimized files will be in the dist directory.

  npm run build

• Preview Production Build: Preview your app at http://localhost:5000.

  npm run serve

📁 Directory Structure

Understand the layout of the project for efficient navigation and management.

my-webflow-boilerplate/
├── src/
│   ├── assets/
│   │   ├── images/
│   │   ├── fonts/
│   │   └── styles/
│   ├── components/
│   ├── libs/
│   └── utils/
├── .env
├── .eslintrc.js
├── .prettierrc
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

🔧 Linting and Formatting

Ensuring Code Quality

• ESLint: Lint your JavaScript/TypeScript for errors and code smells.
• Prettier: Automatically format your code for consistency.
• Stylelint: Keep your SCSS files clean and organized.

🪝 Git Hooks

Streamlining Git Operations

• Husky: Manage Git hooks with ease.
• Lint-staged: Lint only staged files to save time.
• Commitlint: Enforce commit message conventions for better readability.

🤝 Contributing

We welcome contributions! If you have suggestions or want to fix a bug, feel free to make a pull request.

📄 License

This project is open-sourced under the MIT License.

❓ FAQs

Q: How do I update dependencies?

A: Run npm update to fetch the latest versions of your dependencies.

Q: Can I use this boilerplate for commercial projects?

A: Absolutely! This boilerplate is MIT licensed, meaning it's free for personal and commercial use.

📚 Changelog

Stay up to date with the changes and improvements made to the boilerplate.

• 1.0.6: Added new features and fixed bugs.
• 1.0.5: Improved documentation and updated dependencies.