Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Building native-looking mobile apps with HTML and CSS

Thursday, February 23rd, 2017 by Servage

html-css-js-web-appHave you ever wished creating native Android or iOS applications were as easy as using HTML and CSS? Well, now it is! A CSS framework called Framework7 allows you to build web applications for phones that look almost identical to native mobile applications. If you enable full screen view in your phone’s web browser, chances are you don’t even notice the difference.

Grid System

One of the core features in every CSS framework is the grid system. It defines how many columns one row can have and what screen sizes they support. The grid in Framework7 is very similar to the grid of Bootstrap. All columns are placed inside a “row” class and use the “col-” prefix. Instead of 12 columns, the columns in the framework increase by 5% in width, such as “col-5”, “col-10” and so on until “col-100”. This makes it easy for those familiar with Bootstrap to get started with Framework7.

Included Components

Framework7 comes with many components found in the iOS and Android operating systems. The swipe slider component allows you to make multiple pages and switch between them by swiping horizontally. Pull to refresh allows a user to update the content of a page by swiping down like in many mobile applications. Framework7 also comes with a built-in login screen, modal dialogs, basic form elements, tabs and much more.

Routing Between Pages

There are multiple ways to load a new page when a link is clicked. Framework7 will load pages using AJAX by default, and all of this is done for you automatically behind the scenes. To make a page load using AJAX, you don’t have to add any special attributes to your links. If you want to open an external page without using AJAX, you can add a class “external” to the link.

Another choice is to use inline pages. With this approach, all pages are preloaded, which makes the initial load time a little longer but switching pages will be faster because the content of the next page is already loaded. The framework also comes with a template engine called Template7, which is a little more complicated but also a good thing to consider. It allows you to create a separate template file for each page and pass variables to the templates, like many other template engines do.

Why Framework7?

If you are developing a hybrid mobile application for both Android and iOS, you may want to consider building it with Framework7. Instead of maintaining two completely different code bases, you could combine your work into one project using Framework7.

Framework7 is also good for prototyping mobile applications. Creating applications using HTML and CSS is fast, which allows you to quickly prototype your ideas for potential customers, clients and users.

Building native-looking mobile apps with HTML and CSS, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.