HTML5 ★ Boilerplate    http://html5boilerplate.com/

• Source code
• Docs
• Other projects

Quick start

Choose one of the following options:

1. Download the latest stable release from html5boilerplate.com or a custom build from Initializr.
2. Clone the git repo — git clone https://github.com/h5bp/html5-boilerplate.git - and checkout the tagged release you'd like to use.

'

16 Best HTML5 Frameworks for Rapid Development

Link : http://codegeekz.com/best-html5-frameworks/

HTML5 is popular language amongst web designers because it is being supported by the most of the modern browsers like Firefox 6, Google Chrome, IE9 etc.. HTML5 provides numerous new features and capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity.

In this article I have generated a list of best HTML5 frameworks that will simplify your development process and speed up your coding. Following HTML5 frameworks are best in my concern, If you are aware of any other useful HTML5 framework, please do let us know by posting comments. We would love to hear from you. I hope you will find this list handy and useful for your development needs.

If you like the article you might be interested in other article on 10 Best HTML5 Tools and Best HTML5 Editors.

1. Iio Engine

iio Engine is an open source framework for creating HTML5 applications with JavaScript and canvas. The framework is lightweight (45kb) and packed with a debugging system+ cross-platform deployment engine. It doesn’t require any JS frameworks and can work side-by-side with Box2D.

2. Zoey

It is a HTML5-CSS3-powered framework for creating mobile apps, built on top of Zepto.js and weights only 6kb (gzipped). Zoey has the UI components like navigation, lists, buttons, control groups, forms and grids. The framework is compatible with iOS + Android and comes with an app skeleton that covers all the features.

3. Lime JS

It is a HTML5 game framework for building games that’ll feel native and work fast in modern touchscreens and desktop browsers. LimeJS is created with Closure Library built by Google and comes with functions/classes to control the timeline, events, shapes and animations. Also, the framework has full support of sprite sheets (you can collect all images inside a single file).

4. Jo

Jo is an open source mobile application framework that is based on HTML5 . It enables you to create for multiple platforms like webOS, iOS, Android, Symbian, Safari, Chrome and Dashboard Widgets. The framework is small in size, ~8kb, without any dependencies and compatible with many other JS frameworks. Jo is also compatible with PhoneGap and makes possible to create native apps besides web apps.

5. Lungo.js

Lungo.jS is first mobile framework that is includes features of HTML5, CSS3, and JavaScript. Lungo.js helps developers to create iOS, Android, Blackberry and WebOS platform based applications. This framework is designed to take advantage of the features of current mobile devices and it captures events like swipe, tap double tap. It doesn’t use images, everything is available in vector, and you can directly distribute your apps to “Mobile Stores” or in websites.

6. 52 Framework

52 Framework is most popular HTML5-CSS3 based frame work among designers and developers. The support for all modern browsers with IE6 makes this framework most distinctive and useful framework in its category.

7. Junior

Junior is a HTML5 front-end framework for creating mobile apps that look and behave like native. It uses CSS3 transitions for a slick performance, supports swipable carousels and includes various UI components (from Ratchet). The framework uses Zepto (which is nice for jQuery fans as it has a jQuery-like syntax) and has integration with backbone.js views + routers.

8. Sencha Touch

Sencha Touch, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform. Built for enabling world-class user experiences, Sencha Touch is the only framework that enables developers to build powerful apps that work on iOS, Android, BlackBerry, Windows Phone, and more.

9. Gridless

Gridless is an optionated HTML5 CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography. It works on DBY (don’t bore yourself) approach and allows developers to use CSS normalization, beautiful typography, a well organized folder structure, IE bug fixes and other nice tricks for their websites.

10. Cartagen

Cartagen lets you make beautiful, customized maps with a simple stylesheet. Maps are styled with Geographic Style Sheets (GSS), GSS is a scripting language as well making Cartagen an idea framework for loan modification mapping dynamic data. Cartagen is vector mapping, client side HTML 5 framework for rendering maps in native HTML5 applications.

11. Baker

Baker is a HTML5 eBook framework to publish interactive books and magazines on iPad and iPhone using simply open web standards. In order to use the Baker, developer has to design HTML5 pages with a fixed
width of 768 px.

12. Joshfire

Joshfire is an open source multi device development frameworks which assists developers to develop web applications that can run on multiple devices. It uses standards like HTML5 and JavaScript and allows developers to quickly integrate native and dedicated web apps for browsers, Node.JS, desktops, smart phones, smart TVs and connected objects.

13. Sprout Core

Sprout core is an open source HTML5 Framework used to rapidly build up innovative web applications. With sprout care developers can build rich, interactive applications with less code.

14. ReposiveAeon

ResponsiveAeon is a HTML5/CSS3-powered framework for creating responsive layouts very quickly. It has a grid system that is based on 12 columns with 1104px width in total and offers a very easy to understand usage with only 3 basic classes.

15. Foundation

Foundation 3 is built on ZURB’s 14 years of experience at building sites and apps for the Web. It is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself, as well as sites built with it. You can use the Sass or straight CSS version of Foundation.

16. G5 Framework

G5 is lightweight frontend Framework which only includes those features which actually require to build up beautiful websites. It was started as personal project; G5 helps to speed up work flow by reusing the similar and best coding techniques. As G5 states that it includes only those features which are necessary for web development it still holds a bunch of features such as Base CSS, Php active class, smooth scroll to top, base Seo, Sticky Footer, Clean organization etc.

1. 지원하는 브라우저의 종류

웹스토리지는 IE8+, 파이어폭스, 오페라, 크롬, 사파리를 지원합니다.

IE7과 그 이전버젼에서는 지원하지 않습니다.

2. 데이터 저장 객체

클라이언트에 데이터를 저장하기위한 두 종류의 객체가 있습니다.

• localStorage - 시간이 지나도 저장된 데이터가 지워지지 않습니다.

같은 브라우저내에 다른 윈도우창에서도 데이터가 공유됩니다.

• sessionStorage - 하나의 세션의 데이터가 저장됩니다.

server session의 개념과 다릅니다. 해당 윈도우내에서만 데이터가 공유됩니다. 같은 브라우저내의 같은 도메인이라도 윈도우창이 다르면 데이터를 공유하지 않습니다.

3. 스토리지 지원 여부 체크

if ( typeof(Storage) !== "undefined" ) {

//웹 스토리지 지원

} else {

//웹 스토리지 미지원

}

4. 사용법

a-1. sessionStorage.setItem("one", "1");

a-2. sessionStorage.getItem("one");

b-1. sessionStorage.one = "first";

b-2. sessionStorage.one

c-1. sessionStorage[0] = "1000";

c-2. sessionStorage[0]

5. 브라우저별 스토리지 용량

웹 스토리지는 용량이 무한하지 않습니다. 또한 브라우저별로 제한 용량이 다를뿐 아니라 같은 브라우저라도 버젼별로 그 값이 상이합니다.

• iOS - 2.49MB / 2.49MB
• Android 2.2+, 3.1+ - 2.49MB / Unlimited
• Android 3.0 - 2.49MB / 2.49MB
• IE 6, 7 - 지원하지 않음
• IE 8+ - 4.75MB / 4.75MB
• Chrome 4.0 - 지원하지 않음
• Chrome 6+ - 2.49MB / 2.49MB
• Firefox 3.5+ - 4.98MB / Unlimited / (globalStorage - 4.98MB)
• Safari 5+ - 2.49MB / Unlimited

http://diveintohtml5.info/canvas.html#divingin

HTML 5 defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want.

So what does a canvas look like? Nothing, really. A <canvas> element has no content and no border of its own.

40 Best Free HTML5 Tutorials For Web Designing

http://inspiretrends.com/best-free-html5-tutorials/

http://inspiretrends.com/best-free-html5-tutorials/2/

range of mobile devices can be challenging

Growing Thumbnails Portfolio

In this tutorial, Learn making a portfolio with HTML5, jQuery and CSS3 that features an interesting growing effect.

HTML5 Unleashed: Tips, Tricks and Techniques

In this tutorial, you will get basic guidelines, tips about templates

Create a Stylish Contact Form with HTML5 & CSS3

You can learn about create your own stylish contact using HTML5 and CSS3.

Create Vector Masks using the HTML5 Canvas

In this tutorial we will look at how to use the canvas tag and clipping to create images that aren’t so rectangular.

HTML5 File Uploads with jQuery

The tutorial is showing a progress bar, all of which controlled on the client side. Currently, the photos are only stored in a folder on the server, but you could improve it any way you like.

Create a Grid Based Web Design in HTML5 & CSS3

Follow this step by step walkthrough of the making of a sleek website design for an eyewear brand in HTML5 and CSS3.

Designing a Blog with HTML5

In this tutorial, you can learn about designing a blog with HTML5 step by step.

How to Build Cross-Browser HTML5 Forms

In this tutorial, we’re going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.

Implementing HTML5 Drag and Drop

One of the new features in HTML5 is native drag and drop. Surprisingly, Internet Explorer has had support for this since version 5.5; in fact, the HTML5 implementation is based on IE’s support.

Coding a CSS3 & HTML5 One-Page Website Template

We are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scroll To plug-in.

HTML5 and CSS3 Without Guilt

How to Make an HTML5 iPhone App

I’ll show you how to create an offline HTML5 iPhone application. More specifically, I’ll walk you through the process of building a Tetris game.

Design & Code a Cool iPhone App Website in HTML5

In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

Have a Field Day with HTML5 Forms

how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3.

HTML5 Canvas Element Guide

You get a firm fundamental understanding of canvas in preparation for creating something interesting and powerful with this unique HTML5 element.

Bouncing a Ball Around with HTML5 and JavaScript

This guide will explore the use of HTML5′s <canvas> element through a fun example: bouncing a blue ball around.

Blowing up HTML5 video and mapping it into 3D space

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers

Code a Vibrant Professional Web Design with HTML5/CSS3

We will use HTML5 and CSS3, as a proof of concept and as a way for you to learn these upcoming W3C standards through practice. We will also use the 960 Grid System to speed up development time.

Simple Website Layout Tutorial Using HTML 5 and CSS 3

How to Draw with HTML 5 Canvas

Among the set of goodies in the HTML 5 specification is Canvas which is a way to programmatically draw using JavaScript.

The video element

The <video> element is brand new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it.

Building a live news blogging system in php

This tutorial help you for learning of building a live news, blogging system and their functions.

Combining Modern CSS3 and HTML5 Techniques

Just because some techniques don’t work in decade old browsers doesn’t mean that you shouldn’t be learning everything you can!

webOS HTML5 Database Storage Tutorial

If you haven’t been able to find any tutorials on HTML5′s storage capability, This tutorial will help you!

The Official Guide to HTML5 Boilerplate

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

The popup bar was only tested in Chrome and Safari and may not work in other browsers.

An HTML5 Slideshow with Canvas & jQuery

You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics.

Designing Search Boxes with HTML5 and CSS3

Here, with the help of three simple examples, allow me to show how to code search boxes with HTML & CSS and how to spice things up with a bit of Javascript.

Rethinking Forms in HTML5

While there are many changes for the better in the HTML5 specification, there is no better bang for the buck for the data driven website than the transformation of forms.

HTML 5 Tutorial for Web Developers: The Video Element

HTML5 Apps: Positioning with Geolocation

In this tutorial you will learn the geolocation capabilities of HTML5 and the basic principles needed to take advantage of them in your next HTML5 app!

How to Make All Browsers Render HTML5 Correctly — Even IE6!

In this tutorial, we’ll create a common layout using some of HTML 5′s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer.

Coding Up a Web Design Concept into HTML & CSS

The design features a clean grey background, but with splashes of vibrant colour in the header, and throughout the page with links and buttons taking bright colour swatches from the main illustration.

HTML5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me.

HTML5 Canvas Experiment

How to Create a Drop-down Nav Menu

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.

Emergent Web Technologies Spring 2013

Tuesdays, 6:30 PM - 9:20 PM

http://iam.colum.edu/Jon.Petto/classes/ewt/

least.js

Random & Responsive HTML 5, CSS3 Gallery with LazyLoad

http://kamilczujowski.github.io/least/

Least.js creates random and responsive HTML5 and CSS3 image galleries that include Lazyload. Installation and usage is simple, and the end result is quite beautiful.

Image Upload with Preview and Delete

http://stackoverflow.com/questions/10206648/image-upload-with-preview-and-delete/10206834#10206834

모바일에서 브라우저로 파일 업로드 할때 미리보기 기능 구현.

html5 에서 모바일브라우저상의 <input type="file" >을 지원 할때 사용 가능하다.

아래의 Demo가 실행이 되는 브라우저에서는 적용 가능하겠다.

Demo : http://plungjan.name/test/previewjq.html