Framework7 - Overview

What is Framework7?

Framework7 is a free and open source framework for mobile HTML. It is used for developing hybrid mobile apps or web apps for iOS and Android devices.

Framework7 - Environment

In this chapter, we will discuss about how to install and setup Framework7.
You can download the Framework7 in two ways:

• Download from Framework7 Github repository
  
• You can install the Framework7 by using Bower as shown below:
  

  bower install framework7

Framework7 - Layouts

Description

Framework7 provides different types of layouts for your application. It supports for three types of Navbar/Toolbar layouts:

Framework7 - Navbars

Description

In this chapter let us study about navbar. It is a usually placed at top of a screen containing title of the page and navigation elements.
Navbar consists of 3 parts each of which may contain any HTML content, but it is suggested to use them like the way given below:

Framework7 - Toolbars

Description

Toolbar provides easy access to other pages by using navigation elements at the bottom of the screen.
You can use toolbar in two ways as specified in the table:

Framework7 - Search Bar

Description

Framework 7 allows searching the elements by using the searchbar class.

Search Bar Parameters

S.N.	Parameters & Description	Type	Default
1	searchList It searches the CSS selector or HTML element of the list.

Framework7 - Status Bar

Description

The iOS 7+ allows you to build full screen apps which could create an issue when your status bar overlaps your app. Framework7 solves this problem by detecting whether your app is in full screen mode or not. If your app is in full screen mode then, the Framework7 will automatically adds with-statusbar-overlay class to <html> (or removes if app is not in full screen mode) and you need to add statusbar-overlay class in <body> as shown in below code:

Framework7 - Side Panels

Description

The side panel moves to left or right side of the screen to display the content. Framework7 allows you to include up to 2 panels (right side panel and left side panel) to your app. You need to add panels in the beginning of the <body> and then choose opening effect by applying the below listed classes:

Framework7 - Content Block

Description

Content blocks can be used to add extra content with different format.

Example

The below example demonstrates use of content block in the Framework7:

<!DOCTYPE html>
<html>
   <head>

Framework7 - Layout Grid

Description

Framework7 provides different types of grid types to place the content as per user need.
The layout grid provides different types of columns size as described in the below table:

Framework7 - Overlays

Description

Framework7 provides different types of overlays to work with the applications smoothly. Following table lists some of the Framework7 overlays:

Framework7 - Preloaders

Description

Preloader in Framework7 is made with Scalable Vector Graphic (SVG) and animated with CSS which makes it easily resizable. Preloader is available in two colors:

• the default is light background
• another one is dark background

Framework7 - Progress Bar

Description

The progress bars can be used to show loading of assets or progress of a task to the users. You can specify the progress bar by using the progressbar class. When user doesn't know how long the loading process will be there for the request, you can use progressbar-infinite class.

Framework7 - List Views

Description

List views are powerful UI components that presents data in a scrollable list of multiple rows. The Framework7 provides different types of List View to work with your application. The following table lists some of the Framework7 List View:

Framework7 - Accordion

Description

The accordion is a graphical control element displayed as a stacked list of items. Each accordion can be expanded or stretched to reveal the content associated with that accordion.

Framework7 - Cards

Description

Cards contains organized information related a single subject like a photo, link, and text. The below table shows Framework7 card types:

Framework7 - Chips

Description

Chip is a small block of entity which can contain a photo, small string of title, and short information.

Chips HTML Layout

The below code shows the basic chip HTML layout used in Framework7:

<div class="chip">
    <div class="chip-media">

Framework7 - Buttons

Description

Framework7 provides a group of ready to use buttons by just adding appropriate classes to links or input buttons.

Framework7 - Action Button

Description

Framework7 provides floating action button for a promoted action. They appear as a floating circled icon over the UI. It has the motion behaviors that contain morphing, launching, and transferring an anchor point.

Framework7 - Forms

Description

Forms are used for interactiong with users and collects data from the web users using text fields, checkboxes, radio buttons etc.
Framework7 provides different types of form elements to work with the applications smoothly as specified in the table below: