Framework7 Introduction — Mobile-First Framework for iOS and Android Apps
In this tutorial, you will learn about Framework7 Introduction. We cover key concepts, practical examples, and best practices to help you master this topic.
Framework7 is a mobile-first JavaScript framework for building iOS and Android style web applications with native-like UI components, smooth animations, and a built-in routing system designed for mobile app experiences.
What You'll Learn
- Framework7 architecture and philosophy
- iOS and Android theme modes
- Framework7 DOM library ($$)
- Views, pages, and routing basics
- Initializing a Framework7 app
Why It Matters
Building mobile web apps that feel native requires consistent UI patterns — swipe-to-go-back, momentum scrolling, touch-friendly lists, and platform-specific styling. Framework7 provides these out of the box with zero additional dependencies.
Real-World Use
A shopping app with iOS-style navigation bars, tab bars, swipeable product cards, pull-to-refresh on lists, and smooth page transitions — all rendered in the browser and installable as a PWA.
Framework7 Architecture
flowchart TD
A[Framework7 App] --> B[Views]
A --> C[Router]
A --> D[Theme]
A --> E[DOM Library]
B --> F[Pages]
B --> G[Navbar]
B --> H[Toolbar]
C --> I[History]
C --> J[Transitions]
D --> K[iOS Theme]
D --> L[Material Theme]
style A fill:#e6f3ff,stroke:#4a90d9,stroke-width:2px
Setting Up Framework7
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7@8/framework7-bundle.min.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/framework7@8/framework7-bundle.min.js"></script>
<script>
var app = new Framework7({
root: '#app',
name: 'MyApp',
id: 'com.myapp',
theme: 'auto',
routes: [
{ path: '/', url: 'pages/home.html' },
{ path: '/about/', url: 'pages/about.html' }
]
});
</script>
</body>
</html>
Expected output: A blank Framework7 app initialized with auto theme detection (iOS on Apple devices, Material on Android). The router is configured with two routes.
Views and Navigation
<div id="app">
<div class="view view-main">
<div class="page" data-name="home">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Home</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>Welcome to Framework7!</p>
<p><a href="/about/" class="link">Go to About</a></p>
</div>
</div>
</div>
</div>
</div>
var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'ios',
routes: [{
path: '/',
url: 'index.html'
}, {
path: '/about/',
component: {
template: `
<div class="page" data-name="about">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">About</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>This is the about page.</p>
</div>
</div>
</div>
`
}
}]
});
Expected output: The app shows a home page with a navbar title and a link. Clicking "Go to About" navigates to the about page with a back button transition.
Framework7 DOM Library ($$)
$$('.page').css('background-color', '#f5f5f5');
var title = $$('.navbar .title').text();
console.log('Page title:', title);
$$('.block').append('<p>Appended content</p>');
$$('a.external').attr('target', '_blank');
$$('.my-button').on('click', function() {
app.dialog.alert('Button clicked!');
});
$$('.page-content')
.addClass('custom-content')
.css('padding', '20px')
.html('<p>Replaced content</p>');
Expected output: The $$ function provides jQuery-like DOM manipulation within Framework7. It only works inside the Framework7 root element, preventing conflicts.
App Methods and Utilities
var app = new Framework7({
root: '#app',
});
console.log('iOS:', app.device.ios);
console.log('Android:', app.device.android);
console.log('Desktop:', app.device.desktop);
if (app.device.cordova) {
console.log('Running inside Cordova');
}
app.serviceWorker.register('/sw.js');
if (app.online) {
console.log('Device is online');
}
var lang = app.utils.lang('en');
Expected output: The app instance provides device detection, platform utilities, and service worker registration helpers.
Common Mistakes
Not including the viewport meta tag - Framework7 requires the viewport meta tag for proper mobile rendering. Without it, pages render at desktop width.
Using jQuery alongside Framework7 - Framework7 includes its own DOM library ($$). Using jQuery can cause conflicts.
Forgetting the view wrapper - All pages must be inside a
.viewelement. The router manages pages within views.Not setting theme correctly - Use theme: 'auto' for automatic detection, 'ios' for iOS style, or 'md' for Material Design.
Mixing Framework7 versions - Use the same version for CSS, JS, and any plugins.
Practice Questions
- What is the purpose of the view wrapper in Framework7?
- How does the $$ function differ from jQuery?
- What are the two theme modes in Framework7?
- How do you configure routes in Framework7?
- How do you navigate to a page programmatically?
Challenge: Build a simple two-page Framework7 app with: a home page showing device info, a navigation link to an about page, a back button on the about page, and auto theme detection.
FAQ
Mini Project
Build a mobile app shell with: auto theme detection, a main view with two pages, tab bar navigation at the bottom, navbar with titles and back buttons, and a splash screen that fades out on load.
What's Next
The app shell is set up. Learn how Framework7 Views and Pages handle navigation, page lifecycle, and dynamic content loading.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro