Using a UI Framework
The previous page showed how to hand-roll simple SPA-style navigation with plain divs
and a small router function. That works, but as an app grows — more screens, tab bars, sliding
side menus, list views with swipe actions — writing and maintaining all of that yourself in plain
HTML/CSS gets expensive fast. This is where a dedicated UI framework earns its keep.
Why Plain HTML/CSS Often Isn't Enough
A mobile app UI has expectations a typical website doesn't: touch targets sized for fingers rather than mouse pointers, components that feel and animate the way the platform's own native apps do, and standard navigation patterns (tab bars, slide-in menus, list-to-detail transitions) that users already intuitively understand. Building all of this from scratch with hand-written CSS is possible, but it means re-solving problems that are already solved — and getting the small details (tap feedback, momentum scrolling, platform-correct spacing) right takes real, ongoing effort.
Option 1: Bootstrap
Since Bootstrap is already covered in depth on this site's own Bootstrap track,
it's a very approachable option if you already know it — its grid system, buttons, forms, modals,
and navbars all work perfectly well inside a Cordova WebView with zero special setup, since it's
just CSS and JavaScript like anything else in your www/ folder.
Option 2: A Mobile-Native Hybrid UI Framework
For apps that need to feel truly native, two frameworks have historically been the most common choices built specifically for hybrid apps like Cordova's: Framework7 and Onsen UI. Both provide ready-made components styled to automatically match iOS's or Android's native look and feel depending on which platform the app is running on — tab bars, navigation bars with the platform-correct back button style, native-feeling list views, action sheets, and side panels — none of which plain Bootstrap replicates out of the box.
| Framework | Known For |
|---|---|
| Framework7 | iOS- and Android-styled components, a built-in SPA router with page transitions and history handling, common in Cordova and Capacitor apps |
| Onsen UI | Similarly native-styled components (tabs, navigator, lists), works with plain JavaScript or alongside frameworks like Angular/React/Vue |
Full Worked Example: Framework7-Style Page Structure
Framework7 (and similarly-shaped frameworks) organize a screen as a .page containing
a .navbar and a .page-content. This is illustrative markup showing the
general shape of that structure — you don't need Framework7 actually installed to follow the idea:
<div class="page">
<!-- The navbar shows the screen's title and back button, styled per-platform -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Product Details</div>
</div>
</div>
<!-- The scrollable body of the screen -->
<div class="page-content">
<div class="list">
<ul>
<li>Price: $49.99</li>
<li>In stock: Yes</li>
</ul>
</div>
</div>
</div>The Tradeoff: Bigger App, More Polish
Adding a full hybrid UI framework is not free. It's worth weighing both sides honestly before committing:
| What You Get / Give Up | |
|---|---|
| Cost | A larger final app size (more CSS/JS to bundle and ship), and one more third-party dependency you need to keep updated as the framework itself evolves |
| Payoff | A dramatically more polished, native-feeling result — platform-correct components, built-in SPA routing with history and back-button handling, and animations — for far less custom CSS than building the same thing by hand |
For a small internal tool or a simple content app, plain Bootstrap (or even plain hand-rolled CSS, as shown on the previous page) is often good enough and keeps things simple. For a consumer-facing app where "feels native" genuinely matters to your users, a framework like Framework7 or Onsen UI is very likely worth its cost.