The Mobify Bundle
The Mobify bundle is a set of files that transforms your site’s layout and performance for mobile.
A. Introduction to the Mobify Bundle
The Mobify Bundle is comprised of:
This file transforms the original HTML into the mobile-friendly HTML that is served to mobile visitors. You do not see this file in development since it is compiled from the following component files:
- Router: The router determines what view should be loaded on the current page.
- Views: Select and transform content from the original page in your views.
- Templates: Templates define the layout of your page on mobile. They use the content from the views.
These components are described in greater detail in the following sections.
Adaptive.js allows you to completely re-style your site on mobile by replacing your desktop CSS. We provide a Sass framework to build CSS. Also, you can write plain CSS instead.
Sass Read more about Sass in our Introduction to Sass guide.
B. The Router
The router analyzes the current page to determine its page type. Then, it loads the corresponding view file for that page type.
Router Read more about the Router.
Select and transform content from the original page in your views. This is a way to store content from the original page and to then re-use this content on the mobile version of the page.
The content is stored in the page context. Later, the content is called in the templates.
Views Read more about Views.
Templates define the layout of your page on mobile. Use the content that you selected or transformed in the corresponding view to build the layout for the page using the template.
Templates Read more about Templates.
When you create a bundle, the router, views, and templates are compiled into the
This is the main file that runs on your visitors' devices. Also, the bundle file provides instructions on how to transform the page for mobile.Edit in GitHub