DedrisFrameworkDedrisFramework
Templates

Start from a complete app, not a blank page

Each starter is a full Cordova project wired up with DedrisFramework components. Pick the layout that matches your app, scaffold it with one command, and you're already building features instead of boilerplate.

Every starter is plain www/ code: HTML, CSS and JavaScript you can inspect, copy and reshape.

6Starter templates
20+Ready screens
iOS + AndroidFrom one codebase
100%Open source
$0Forever free
Most popular

Tabs Starter

The layout most mobile apps reach for: a persistent bottom tab bar that switches between top-level sections, with active states and three placeholder screens already wired up. It's the fastest way to get a real navigation shell on your device.

Template gallery

Choose by app shape, not by guesswork

The templates cover the flows most Cordova apps need first: navigation, auth, data lists, onboarding and a clean base project. Each card shows the screens, setup effort and the first customization path.

Tabs Starter

Beginner

A classic bottom-tab navigation shell with three ready-made sections.

Best for: apps with 3–5 top-level sections.

3 screensHome, Search, Profile10 minCustomize labels
NavigationTabs
  • Bottom tab bar
  • Home, Search & Profile pages
  • Active-state handling

● Free & open source

Sidemenu Starter

Beginner

A slide-out navigation drawer with a content area and header.

Best for: content-heavy apps with many sections.

3 pagesDashboard, Account, Settings15 minMap menu routes
NavigationDrawer
  • Slide-out drawer
  • App header with menu button
  • Tap-to-close backdrop

● Free & open source

Login & Auth

Intermediate

Sign-in, sign-up and reset-password screens ready to connect to your backend.

Best for: any app that needs user accounts.

4 screensLanding plus auth flow20 minWire API calls
FormsAuth
  • Sign-in & sign-up
  • Reset-password flow
  • Validation stubs

● Free & open source

List & Detail

Intermediate

A master list that opens detail pages — perfect for catalogs and feeds.

Best for: catalogs, feeds & CRUD screens.

2 viewsCollection and detail20 minSwap sample data
ListsCRUD
  • Data-driven master list
  • Detail page
  • Back navigation

● Free & open source

Onboarding

Beginner

A swipeable intro carousel to welcome first-time users to your app.

Best for: welcoming first-time users.

3 slidesIntro, value, start12 minReplace copy
SlidesIntro
  • Swipeable slides
  • Progress dots
  • First-run flag

● Free & open source

+

Blank Starter

Beginner

A minimal single-page project with DedrisFramework wired in — your clean slate.

Best for: starting fully from scratch.

1 screenApp shell only5 minAdd first view
MinimalBase
  • Single page
  • deviceready hook
  • Zero extra deps

● Free & open source

Decision guide

Which starter should you use?

Start with the structure that matches your first real user journey. You can merge pieces later.

Navigation first

Need the app shell today?

Use Tabs for a compact consumer app, or Sidemenu when your product has many sections and settings.

Compare navigation starters →
Flow first

Need a complete user path?

Use Login & Auth for account creation, or Onboarding for the first-run experience before the main app.

Open the auth starter →
Data first

Need real content quickly?

Use List & Detail when your core screen is a feed, catalog, ticket list, collection or record browser.

Open List & Detail →
How it works

From template to running app in three steps

No blank-page paralysis. Scaffold a working project and customise it from there.

1

Pick a starter

Browse the gallery above and open the template whose layout matches the app you have in mind.

2

Scaffold it

Generate a ready-to-run Cordova project with a single command — cordova create … --template ….

3

Build your features

Rename the screens, drop in DedrisFramework components and cordova run on your device.

What's included

Every template is small enough to understand

No generated maze. The starters are designed so you can inspect the files and start replacing content immediately.

The shared starter structure

  • 1Clean app entryA readable index.html with the main shell, first screen and Cordova-ready metadata.
  • 2Scoped stylesTemplate CSS that sits on top of the DedrisFramework design system without extra dependencies.
  • 3Small JavaScriptOnly the behavior the template needs: tabs, drawer toggles, form stubs, carousel state or list routing.
  • 4Real demo filesThe live preview points at the same starter folder, so what you test is what you copy.
templates/tabs/
├─ index.html
├─ pages/
│  ├─ home.html
│  ├─ search.html
│  └─ profile.html
├─ css/
│  └─ app.css
└─ js/
   └─ app.js

cordova create myApp com.you.app MyApp --template cordova-template-dedris-tabs
Compare

Find the right starter

Not sure which one to clone? Match your app's shape to a template at a glance.

TemplateBest forNavigation styleScreensCustomize firstLevel
Tabs Starter Apps with 3–5 top-level sections Bottom tab bar 3 Labels, icons and default tab Beginner
Sidemenu Starter Content-heavy apps with many sections Slide-out drawer 3 Menu items and page routes Beginner
Login & Auth Any app that needs user accounts Form screens 4 Validation and backend calls Intermediate
List & Detail Catalogs, feeds & CRUD screens Master → detail 2 Data model and detail fields Intermediate
Onboarding Welcoming first-time users Swipeable carousel 3 Slides, CTA and first-run flag Beginner
Blank Starter Starting fully from scratch Single page 1 First screen and app theme Beginner
FAQ

Questions about templates

Are the templates really free?

Yes. Every starter is MIT-licensed and open source — no paywalls, no commercial tiers and no attribution required. Use them in personal or commercial apps however you like.

How do I create a project from a template?

Each detail page shows the exact command. In general it's cordova create myApp com.you.myapp MyApp --template cordova-template-dedris-<name>, then cd myApp and cordova run android.

Do they work on both iOS and Android?

Yes. Templates are plain HTML, CSS and JavaScript running on Apache Cordova, so the same project builds for both iOS and Android from one codebase.

Can I mix pieces from different templates?

Absolutely. Every template is built on the same dedris.css design system, so you can lift the drawer from Sidemenu into the Tabs Starter, or drop the login screens into any project, with no conflicts.

Are the live demos separate from the downloadable templates?

No. The demo links open the same starter folders under templates/, so the preview stays faithful to the code you will copy into a Cordova project.

Which template should I choose if I am unsure?

Choose Tabs Starter for most new apps. It gives you navigation, multiple screens and a clear place to add features without committing to a complex structure too early.

Can I contribute my own template?

Please do — templates are community-maintained. Head to the Community page to see how to propose and submit a new starter.

Found your starting point?

Spin up a project from any template and have it running on your device in minutes.

Get started — it's free Contribute a template