Blog

All the latest news and insights on PhoneGap

Intro to Framework7

Framework 7 Logo

Framework7 is an HTML framework for building iOS and Android apps and one of a set of open-source libraries and solutions from iDangero.us authored by Vladimir Kharlampidi.

I spent some time evaluating it recently and was pleasantly surprised to see that it now has support for Material Design as well as several new components. If you’re looking for a mobile app framework to get started building beautiful hybrid apps quickly, you should make a point to check this one out. It doesn’t rely on any particular framework other than it’s own DOM manipulation framework (DOM7), which is like a mobile-optimized version of jQuery. However, it can also be used with other frameworks like Angular, React etc if desired.

Features

  • View Management / Navigation Support - a view is a stack of pages with its own navigation, history and settings
  • Page-level events

    myApp.onPageInit('list', function (page) {...})
    
  • FastClick library built-in to handle click delay for touch UI’s
  • Easy, familiar syntax for anyone familiar with jQuery to get started quickly
  • Framework agnostic - can be used with React, Angular and other templating engines like Handlebars
  • Oodles of pre-styled widgets/components. Some examples listed below but check out their kitchen sink apps for iOS and Android to see them all per platform:
    • Search Bar with built-in filtering
    • Login screen
    • Popups
    • Overlays and pickers
    • Master/Detail Split Views
    • Side Panels (left/right with transition choices)
    • Photo Browser
    • Text messaging view
    • Numerous List choices (media list, contacts list, sortable list, virtual list)
    • Swipeouts (swipe list item to delete etc)
    • Accordions
    • Tabs
    • Preloaders (spinners)
    • Floating Action Button
    • Cards
    • Chips (Material Design)
    • Form Components
  • Pull-to-refresh
  • Built-in Layout Grid system

    <div class="row">
            <div class="col-50">50%</div>
            <div class="col-50">50%</div>
      </div>
    
  • Customizable
  • Flexible Router - Load pages from templates, using Ajax, inline or dynamically via the flexible router api

      mainView.router.load({url: 'list.html'});
    
      mainView.router.load({
        template: Template7.templates.listTemplate,
        context: resp.results
      });
    
  • Performant
      <div data-background="path/to/image.jpg" class="lazy">
    
  • Bootstrap-like styles
  • Plugins API
    • Extend the framework and share with the community. Already includes many useful plugins listed on their site like an welcome/tutorial screen, indexed scroll list, 3D Panels, additional custom keyboards and more.
  • Icons - includes some basic ones (menu, search), but you can use any icon font or library with it such as Font Awesome or Ionicons. Check out the starter templates on noodl.io for more examples of using icons.
  • Good docs, visual examples, starter apps and great forum support, often by the author himself.

Built-in Helper Libraries

  • Template7 - a mobile-first lightweight template engine with handlebars.js like syntax.

    <div class="list-block">
        <ul>
        {{#each items}}
        <li class="item-content">
          <div class="item-inner">
          <div class="item-title">{{title}}</div>
          </div>
        </li>
        {{/each}}
        </ul>
    </div>
    
  • DOM7- jQuery-like syntax with similarly named functions optimized for mobile.

    $$('.something').on('click', function (e) {
      $$(this).addClass('hello').attr('title', 'world').insertAfter('.something-else');
    });
    
  • Swiper Slider - a customizable touch slider with support for overflow, 3D, parallax and more.

Sample and Starter Apps

I built a sample iTunes Media Explorer app using the framework here you can reference or use as a starter app. It’s a simple app utilizing the built-in DOM7 and Template7 approach. There’s also a list of starter apps and layouts included from their site to help get you started quickly.

Supported Platforms

  • Framework7 supports iOS and Android. (Material Design was added in August of this year).

Usage

  • Via bower:

    $ bower install framework7

  • By cloning or downloading from the git repo and using the dist/ folder as your base starter project.
  • Use the PhoneGap Desktop App or the PhoneGap CLI to create a project and copy in the contents from the dist folder into the www folder.

Additional Resources

More community themes, starter app templates and components can also be found on Noodl.io. Also be sure to check out their app showcase to see a set of some great looking apps built with it thus far.

Feedback Wanted!

The team would like to collect your feedback on Framework7 as well any other frameworks you’ve looked at or used. Please comment here or tweet us your thoughts!