CLI to scaffold multi-page JSX apps
npm install create-mpaThis template is used for building multi-page applications (MPAs) with modern tools.
Built on the Minista static site generator framework with a Desktop-First responsive design approach.
To create a new project from this template:
``bash`
npm create mpa
- What's Inside
- Technology Stack
- Scripts
- Development Guide
- Folder Reference
- Accessibility Features
- Resources & Links
- License
The template includes:
- Minista framework with static site generation and file-based routing
- Vite bundler for fast development and optimized builds
- JSX for component-driven UI development
- SCSS/Sass
- PostCSS with preset-env and px-to-rem conversion
- Linting & Formatting: ESLint, StyleLint, and Prettier pre-configured
- CSS Normalization for cross-browser consistency
- Path Aliases (src -> @) configured for cleaner imports
- Pre-built Components: 14 reusable, accessible UI components
- Minista - Static site generator with file-based routing
- Vite - Next-generation frontend build tool
- SCSS - CSS preprocessor with powerful features
- PostCSS - CSS transformation tool with plugins:
- preset-env - Modern CSS polyfills and autoprefixing
- pxtorem - Automatic px to rem conversion
- ESLint - JavaScript linting
- StyleLint - CSS/SCSS linting
- Prettier - Code formatting
- clsx - Utility for combining CSS class names conditionally
- imask - Input masking for phone numbers, cards, dates, etc.
- Swiper - _Optional_ - Touch slider for carousels (install: npm install swiper). Is used for Slider component
| Command | Purpose |
| ---------------------- | ---------------------------------------------- |
| npm start | Start development server with hot reload |npm run build
| | Create optimized production build |npm run preview
| | Preview production build locally |npm run lint:js
| | Check JavaScript code for issues |npm run lint:js:fix
| | Automatically fix JavaScript issues |npm run lint:css
| | Check CSS/SCSS code for issues |npm run lint:css:fix
| | Automatically fix CSS/SCSS issues |npm run format
| | Check code formatting compliance |npm run format:fix
| | Auto-format all code files |npm run lint
| | Run all linters (JS + CSS/SCSS + format check) |npm run lint:fix
| | Fix all issues (JS + CSS/SCSS + format) |
1. Run: npm create mpa
2. Install dependencies:
3. Start development server:
4. Open in browser: Navigate to (Vite default)
Pages are automatically routed based on files in src/pages/:
`
src/pages/
├── index.jsx → /
├── about.jsx → /about
├── contact.jsx → /contact
└── 404.jsx → 404 error page
1. Create folder: src/components/ComponentName/
2. Add files: , ComponentName.scss, index.js
Structure:
ComponentName/
├── ComponentName.jsx // Main component
├── ComponentName.scss // Component styles
├── index.js // Export
└── SubComponentName/ // Optional: sub component
└── ...
3. Export in :`
javascript`
export { default } from './ComponentName'
4. Import styles in :`
jsx`
import './ComponentName.scss'
5. Import and use created component:
`jsx
import ComponentName from '@/components/ComponentName'
`
Edit src/styles/helpers/ to extend SCSS functionality:
- mixins.scss - Add new styling patterns (e.g., @mixin card-shadow { ... })@function spacing($multiplier) { ... }
- functions.scss - Add custom calculations (e.g., )
- media.scss - Add new breakpoints and media query helpers
- BEM (Block, Element, Modifier) is recommended: .component, .component__element, .component--modifier, .is-state
- Import paths: Use alias instead of relative paths (import Button from '@/components/Button')clsx
- Classes: Combine with utility for conditional styling
---
Static files that bypass the bundler and are copied directly to the build output. Examples include images, videos, and external assets that don't require processing.
---
Main source directory containing all application code.
---
Project assets including images, icons, favicons, and fonts:
- favicons/ - site favicons and related metadata files.fonts/
- - font files used throughout the project.icons/
- - SVG icons (typically used in sprite format).images/
- - images used across the project, organized into subdirectories by section or purpose.
---
Small, reusable UI components:
- Accordion - collapsible section component using native HTML and elements. Accepts a title, unique id, optional name (for grouping), and children content. Provides semantic markup with ARIA roles (role="term", role="definition") for accessibility.
- AccordionGroup - wrapper component for displaying multiple Accordion components in a list (ordered or unordered). Supports multi-column layout via CSS classes. Automatically handles proper semantic structure with
or tags based on the isOrdered prop.- AnimatedLink - link component that animates each individual grapheme character on hover. Uses the
getSegmentedString utility to split text into proper grapheme clusters (supports emoji and diacritics). Each character gets a staggered transition delay for a cascading animation effect.- BurgerButton - hamburger menu button with an animated icon. Uses SVG paths with stroke-dasharray animation to create the hamburger-to-X transformation. Supports custom styling via className and extraAttributes. Typically used with OverlayMenu module.
- Button - flexible button component that can render as either