To install a HTML/CSS template requires just to copy the template files on your webserver. This can be done using your hosting provider custom interface or a FTP (File Transfer Protocol) software. Our recommandation is FileZilla.

A regular HTML/CSS template does NOT include a CMS (Content Management System) to edit/add content of the pages. All content is edited using a HTML editor. HTML editors can be found as free and paid editors. Some modern HTML editors have included a DESIGN view mode of the code, making it easier for templates to be edited. Regular ones will let you edit the content only from the code mode, meaning you will need to have a basic HTML coding knowledge.

Scope of options:

• Fully responsive layout created in the convention of “Mobile First”
• Standard HTML 5 and CSS 3
• Created on Framework7 base
• Menu Off-Canvas
• Three-column grid system
• Responsive photo slider – touch optimized
• Pinned header
• Wide selection of icons thanks to FontAwesome
• Editable elements of forms
• More than 10 examples of edited webpages
• Typography
• Fast-action buttons: One Touch Email, One Touch Phone Call, One Touch Message
• ... and many more!

• assets/css – contains files of styles of libraries used and styles meant for the template
• assets/fonts – font files for FontAwesome feature (*.eot, *.svg, *ttf, *.woff, *.otf)
• assets/img – samples of photos used in the template
• assets/js – contains scripts used in the template
• index.html – sample of a webpage using slider and grid system
• blog.html, post1.html, about.html – list of blog comments and a page with details
• contact.html – sample of contact form
• gallery-3col.html – samples of galleries in different layouts
• features.html – grid system, typography and other components

Grid System

One column:

    <div class="row">
        <div class="col-100">1</div>
    </div>

Two equal columns:

    <div class="row">
        <div class="col-50">1</div>
        <div class="col-50">2</div>
    </div>

Three equal columns:

    <div class="row">
        <div class="col-33">1</div>
        <div class="col-33">2</div>
        <div class="col-33">3</div>
    </div>

Two unequal columns:

    <div class="row">
        <div class="col-33">1</div>
        <div class="col-66">2</div>
    </div>

More about grid you can find HERE.

You can change template settings in file /assets/js/app.js

All available settings you can find HERE

Page in Framework7 has the same meaning as when you think about web pages.

Let's look at page' HTML structure:

<!-- Views -->
<div class="views">
  <!-- Your main view -->
  <div class="view view-main">
      <!-- Pages -->
      <div class="pages">
          <div class="page" data-page="home">
              <div class="page-content">
                  ... page content goes here ...
              </div>
          </div>
      </div>
  </div>
  <!-- Another view -->
  <div class="view another-view">
      <!-- Pages -->
      <div class="pages">
          <div class="page" data-page="home-another">
              <div class="page-content">
                  ... page content goes here ...
              </div>
          </div>
      </div>
  </div>
</div>

More information you can find HERE

Modal is a small content pane that pops up over App's main content. Modals are usualy used to ask something from user, or to notify or warn user. Modal as all other overlays is part of so called "Temporary Views".

Modals can be opened only using JavaScript.

myApp.alert('Here goes alert text', 'Custom Title!');

More about modals you can find HERE.

Popup is a popup window with any HTML content that pops up over App's main content. Popup as all other overlays is part of so called "Temporary Views".

<!-- About Popup -->
  <div class="popup popup-about">
      <div class="content-block">
          <p>About</p>
          <p><a href="#" class="close-popup">Close popup</a></p>
          <p>Lorem ipsum dolor ...</p>
      </div>
  </div>
  <!-- Services Popup -->
  <div class="popup popup-services">
      <div class="content-block">
          <p>Services</p>
          <p><a href="#" class="close-popup">Close popup</a></p>
          <p>Lorem ipsum dolor ...</p>
      </div>
  </div>

mAlpha2 comes with ready to use Login Screen layout. It could be used inside of page or popup (embedded) or as a standalone overlay.

We can also open and close Login Screen with JavaScript, we need to look at related App methods:

myApp.loginScreen() // open Login Screen

myApp.closeModal(loginScreen) // close Login Screen

loginScreen - HTMLElement or string (with CSS Selector). Optional. If not specified, any opened Login Screen/Popup/Modal will be closed

Picker Modal is a special overlay type which is similar to Picker/Calendar's overlay. Such modal allows to create custom picker overlays with custom content.

It is possible to open and close required Picker Modal using special classes and data attributes on links:

We can also open and close Picker Modal with JavaScript, for this we need to look at related App methods:

myApp.pickerModal(picker) - open specified Picker Modal

myApp.closeModal(picker) - close Picker

picker - HTMLElement or string (with CSS Selector). If not specified, any opened Picker will be closed

Swipeout is an extension of list view that allows you to swipe over list elements to reveal hidden menu with available actions, like swipe-to-delete.

Let's look on layout structure of swipeout element in your list views:

<div class="list-block">
    <ul>
        <!-- Additional "swipeout" class on li -->
        <li class="swipeout">
            <!-- Usual list element wrapped with "swipeout-content" -->
            <div class="swipeout-content">
                <!-- Your list element here -->
                <div class="item-content">
                    <div class="item-media">...</div>
                    <div class="item-inner">...</div>
                </div>
            </div>
            <!-- Swipeout actions left -->
            <div class="swipeout-actions-left">
                <!-- Swipeout actions links/buttons -->
                <a href="#">Action 1</a>
                <a href="#">Action 2</a>
            </div>
            <!-- Swipeout actions right -->
            <div class="swipeout-actions-right">
                <!-- Swipeout actions links/buttons -->
                <a href="#">Action 1</a>
                <a class="swipeout-close" href="#">Action 2</a>
            </div>
        </li>
        ...
    </ul>
</div>

Where:

• swipeout-content - wrapper for your list element. This container will move during swipe over the list item
• swipeout-actions-left - container with left swipeout action buttons/links
• swipeout-actions-right - container with right swipeout action buttons/links
• swipeout-close - additional class on swipeout link that will close swipeout element when you click this link

More about swipeout you can find HERE.

This mobile template can be used to create a mobile website, a web app, and a native app. Depending on your needs you can use this layout to create the desired final product. Below we will try to describe each one of the final product you can create.

You can use this template to create a mobile version of your website. Considering that you main desktop website is not responsive or you want a separate mobile version of it, minio is a perfect solution to do that.

To createa a separate mobile version of your website using this template will require to create a subdomain or a subfolder of your domain (mobile.yourwebsite.com or m.yourwebsite.com) where the main files will be copied.

To redirect users to your new created mobile website you will need to use a redirection code. First you need to add a mobile detection code, and then redirect mobile users to the mobile url.

For more information about mobile detection and redirection check THIS WEBSITE.

You can use this template to create a web app. Web app are simple web application than run from a web server. Web apps are visible through a web browser and function just like a normal website.

The difference between web and native apps is that native apps are developed essentially for one particular mobile device and is installed directly onto the device itself. And are available only on app stores. Web apps can be used on any mobile device, and do not need to be downloaded first.

To convert this template into a native app you will need to use solutions like phonegap.

"Easily create apps using the web technologies you know and love: HTML, CSS, and JavaScript .

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about. "

More about phonegap on their WEBSITE.

Twitter Plugin: Tweetie Flickr Plugin: Flickr

In case of any problems or questions please let us know at:
hello@krzysztof-furtak.pl