Talk:HAP HTML as image
Prologue: With the advent of cross-platform requirements and with pixel precision sites, there are new problems with the layout. This is especially true for the full screen mode sites. Implement an adaptive pixel-perfect design, it was a daunting task.
HAP - "HTML as Picture": the technology allows you to create a fully adaptive Pixel Perfect html sites with dynamic scaling of all html-document elements. Nesting site is done using EM and quantities per cent instead of the usual PX.
How to use: At the present time we can offer to create your project Jquery plugin. The plugin has a function mini HTML-framework to maintain the adaptability of the site. You can use the plug-in to extend the functionality of other HTML-frameworks such as: Twitter Bootstrap.
Installation and setup - download and plug in before the closing </ body> Jquery plugin "HAP" (HTML as Picture). Recommendation on the site layout using the plugin "HAP": • Magnitude of the width of the container is set to "%". Indentation, font sizes, UL-elements installed in EM. • not use the small picture: the images on the buttons is better to resort to icon fonts (eg: FontAwesome). • Do not use the font size is less than 10px. To avoid problems it is best to create the design of the future site resolution is 500/1000/1500/2000 / PX.
Note: For the container to 1000px width font size in the <BODY> is 100px.
Example for the site with the layout image 1000px: The site has 2 columns of different widths, the first - 200, the width of the second column 800. For the first column, set the width of 200 - 20%, for the second - 80%. Further, in the first column font size 12px, the second 16px. For the first column, font size: 12/100 = 0.12em, for the second column: 16/100 = 0.16em.
Recommendation: Do not use the plug-in with a small resolution screens. Disable function, you can using CSS:
The output is cross-platform solution suitable for the realization of a pixel-perfect. With automatic scaling for any screen resolution. We hope it will be useful to you.
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the page “GNU Free Documentation License”.
The copyright and license notices on this page only apply to the text on this page. Any software or copyright-licenses or other similar notices described in this text has its own copyright notice and license, which can usually be found in the distribution or license text itself.