Enterprise-grade Vite starter with TypeScript, SCSS, and professional tooling. Designed for developers who value quality, performance, and maintainability.
Built with modern best practices and enterprise-grade tooling for professional development teams
Vite-powered HMR with instant feedback. Multi-page application support with Handlebars templating. Optimized build pipeline for production-ready deployments.
Full TypeScript integration with class-based component architecture. Modular design patterns for scalable applications. Comprehensive type definitions.
SCSS with PostCSS optimization. CSS-in-JS alternatives with proper scoping. Responsive design utilities and modern CSS features.
Production-ready interactive components: Accordion, Tabs, Modal, Theme switcher. Built with accessibility and performance in mind.
Lenis smooth scrolling integration. Optimized bundle splitting. Critical CSS extraction and lazy loading strategies.
ESLint + Prettier configuration. Hot module replacement. Comprehensive error handling and debugging tools.
The core principles and architectural decisions that make ZEN Starter exceptional. Built with modern best practices and designed for professional development teams.
Semantic HTML structure with proper accessibility features, multi-page support, and Handlebars templating. Clean, maintainable markup that works everywhere.
Proper HTML5 elements with meaningful hierarchy
Handlebars templating for multiple HTML pages
Reusable HTML components in dedicated folder
Works everywhere, enhanced where possible
Optimized HTML structure for fast loading and rendering
Powerful templating engine for dynamic content and component reuse
Modular SCSS architecture with BEM methodology, responsive design system, and modern CSS features. Built-in rem() and fluid() functions ensure consistent scaling and optimal performance.
Consistent naming with .block__element--modifier pattern
rem() function, fluid typography, mobile-first approach
CSS Grid, Flexbox, Custom Properties, Container Queries
@use and @forward for modular architecture and dependency management
Custom mixins for common patterns and utility functions
CSS custom properties and SCSS variables for consistent theming
TypeScript class-based architecture with strict type checking, modern ES6+ features, and comprehensive error handling. Each component is self-contained with clear interfaces.
Object-oriented approach with proper inheritance and lifecycle methods
Strict TypeScript configuration for maximum type safety and error prevention
ES6+ features, async/await patterns, and modern DOM APIs
Advanced optimization strategies including code splitting, lazy loading, minification, and critical CSS extraction. Built for maximum performance and minimal bundle size with Vite-powered build system.
Automatic chunk optimization and dynamic imports for optimal loading
CSS and JavaScript minification with PostCSS and Vite optimization
Dead code elimination and unused export removal
Dynamic component loading and image optimization
Smooth scrolling with performance-optimized animations
Image compression, font optimization, and resource bundling
Clean, organized project structure with clear separation of concerns. Each part of the application has its dedicated place for maximum maintainability.
src/scripts/components/ - Class-based component architecture
src/styles/components/ - Modular styling system
src/scripts/services/ - Business logic and utilities
pages/ - Handlebars-powered HTML templates
components/ - HTML component library
src/scripts/types/ - TypeScript type definitions
Built-in accessibility features following WCAG 2.1 AA guidelines. Semantic HTML, ARIA attributes, keyboard navigation, and screen reader compatibility.
Proper heading hierarchy and landmark regions for screen readers
Complex interactive elements with proper labeling and states
Full keyboard support for all interactive elements
Visible focus indicators and logical tab order
Comprehensive support for assistive technologies
Respects user's motion preferences and reduced motion settings
Lightning-fast development with Vite, PostCSS optimization, and comprehensive tooling. Hot Module Replacement, ESLint, Prettier, and TypeScript integration for professional development.
Instant feedback during development with Vite's HMR
Autoprefixer, media query combining, and CSS optimization
ESLint, Prettier, comprehensive error handling and debugging
Full TypeScript support with strict configuration
Handlebars templating for scalable multi-page applications
Production-ready builds with automatic optimization
Essential commands for working with the ZEN Starter build system. Everything you need to develop, build, and maintain your project.
Start the development server with Vite. Features hot module replacement, instant feedback, and optimized development experience.
Start development server with network access. Allows testing on mobile devices and other machines on the same network.
Build the project for production. Compiles TypeScript, optimizes assets, and generates production-ready files.
Preview the production build locally. Test the optimized version before deployment to ensure everything works correctly.
Run ESLint to check code quality and find potential issues. Analyzes TypeScript files for code style and best practices.
Automatically fix ESLint issues that can be resolved. Saves time by automatically correcting common code style problems.