A modern, full-stack starter template that combines the best of cross-platform development with Framework7, reactive programming with Svelte, beautiful styling with Tailwind CSS, and type safety with TypeScript.
Technology | Version | Purpose |
---|---|---|
Framework7 | 8.3.4 | Mobile UI Framework |
Svelte | 4.2.0 | Reactive Frontend Framework |
Tailwind CSS | 4.x | Utility-first CSS |
TypeScript | 5.x | Type Safety |
Vite | 5.x | Build Tool & Dev Server |
Capacitor | 7.x | Cross-platform Deployment |
Clone or download this template
Install dependencies:
npm install
Start development server:
npm start
Open your browser and navigate to the provided localhost URL
Command | Description |
---|---|
npm run dev |
Start development server with HMR |
npm run build |
Build for production |
npm run build-capacitor-ios |
Build and prepare for iOS |
npm run build-capacitor-android |
Build and prepare for Android |
npm run check |
Run TypeScript and Svelte checks |
npm run check:watch |
Run checks in watch mode |
npm run create:apk |
Create apk for the project |
src/
āāā components/ # Svelte components
ā āāā app.svelte # Main app component
āāā css/ # Stylesheets
ā āāā app.css # Main CSS file
ā āāā tailwind.css # Tailwind directives
āāā js/ # JavaScript modules
ā āāā app.js # App initialization
ā āāā routes.js # Framework7 routes
ā āāā store.js # App store
āāā pages/ # Page components
āāā fonts/ # Icon fonts
This template integrates Tailwind CSS with Framework7's theming system:
framework7-primary
- #007aff (iOS Blue)framework7-secondary
- #5856d6 (Purple)framework7-success
- #34c759 (Green)framework7-warning
- #ff9500 (Orange)framework7-danger
- #ff3b30 (Red).hero-section
- Gradient hero section.feature-card
- Card component with hover effects.tech-badge
- Technology badge stylingnpm run build-capacitor-ios
npx cap open ios
npm run build-capacitor-android
npx cap open android
Configuration is in tailwind.config.js
with Framework7 color integration.
TypeScript configuration is in tsconfig.json
with Svelte support.
Build configuration is in vite.config.js
with Svelte and CSS preprocessing.
Feel free to submit issues and enhancement requests!
This project is licensed under the UNLICENSED License.
Happy coding! š Build amazing mobile and web applications with this powerful starter template.