Vite Frontend Starter
A frontend boilerplate using Vite, SASS, Twig, ES6 modules. Shipped with some mixins, SVG sprite ready and images optimization. Also great performance tools : Purge & Critical CSS.
Overview
The Vite front-end boilerplate is a powerful tool designed for developers who want to start their projects with a solid foundation. Built using Vite, SASS, Twig, and ES6 modules, it emphasizes speed and efficiency. The boilerplate comes equipped with various pre-made mixins, an SVG-Sprite setup, and image optimization functionalities that are essential for modern web development. This setup ensures that you can focus on building features without getting bogged down by repetitive configurations.
What sets this boilerplate apart are the built-in performance enhancement tools like Purge and Critical CSS, which help streamline your final pages. Additionally, the configuration options are very adaptable, making it suitable for a range of projects, whether they are simple websites or complex applications.
Features
- Purge CSS: Easily toggle to enable or disable Purge CSS to keep your final stylesheets lean by removing unused CSS classes.
- Critical CSS: Activate or deactivate the Critical CSS feature to improve initial page load performance by prioritizing essential styles.
- Image Optimization: Utilize built-in configurations for image optimization with imagemin, ensuring fast load times while maintaining quality.
- Twig Integration: Includes Twig templates that simplify the development of dynamic content and include examples for handling images and icons.
- Lazy Loading: Implement lazy loading for images easily by adding a simple class and data attributes, enhancing the user experience by reducing initial load times.
- SASS Support: Organize your styles with SASS, taking advantage of variables, nesting, and mixins to create maintainable and reusable styles.
- Modular JavaScript: Load JavaScript files as ES6 modules based on conditions like viewport size, optimizing script delivery and performance.
- Responsive Design: The boilerplate includes a structured approach to handle responsive design, including breakpoints and conditional imports to manage resource loading based on device context.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.