foneFrame logofoneFrame     about   contact

Getting Started

The easiest way to use this template to find a page or section you like and replace the text and graphics with your own content. Many of the examples are wrapped in an <article>. HTML5’s articles are similar to a <div>. Copy the article you want and build your web page out from there.

The basic foneFrame framework elements are hosted in the cloud (think CDN), cached close to your end users which in many cases is faster hosting them on your web server. Link to them like this:
    <link href="" rel="stylesheet" >

The alternative is to host the files yourself using this line in the <head> of your HTML files:
    <link href="foneFrame.2.1.0.min.css" rel="stylesheet" >

The comments inside this HTML file & foneFrame.2.1.0.css annotate this template. Reading them will help you understand how foneFrame works. Read the FAQ too.

The basic styles can be mixed and matached in countless ways. Examples include alternate, simple, f, and i. When you see something you like, copy and edit as needed. If you create a new variation, hack, mashup, or have a feature request, please share it with us.

faux phone menus

Another navigation option is creating buttons that mimic the look & feel of native phone apps.

This template is full of comments and how-to instructions. This article uses the f style which is why the gradient goes from dark to light.

Do read the comments in this HTML5 file and the CSS file as well. Along with the examples, the comments serve as the foneFrame template documentation. Look for the easter egg.

Additional resources are on our web site. If you build something really cool with foneFrame, please share it with us. If you need customization or contract work, please feel free to contact us.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est. Om mani padme hum.




licensing info

CC BY 3.0This version of foneFrame by Azalea Software, Inc. is licensed under a Creative Commons Attribution 3.0 Unported License (CC BY 3.0) This means you are encouraged to share, distribute, modify, mashup, and remix this template. All we ask is a link using this HTML snippet:   <a href="" title="foneFrame mobile framework">foneFrame</a>

We want you to use, improve, and change this template. We’d just like a touch of credit. Thanks!

RSS feed   RSS feed

follow us on Facebook   follow us on Twitter   watch us on YouTube   findus on Yelp   find us on Etsy

Azalea Software, Inc.

mobile dev tools

So you are reading the underlying code. Good! You've just discovered the abracadabra style, which makes things disappear. You may have an element you want to hide, or toggle on and off. This style does just that without affecting the spacing of the things around it, a little bit of CSS magic!