Compile to HTML/CSS/JavaScript

A list of upcoming programming languages that replace HTML/CSS/JavaScript -

1. Elm (gos.i, homepage) The Elm programming language aims to make web development more pleasant. Elm is a type-safe, functional reactive language that compiles to HTML, CSS, and JavaScript. Elm's major distinguishing features are support for reactive programming and its focus on graphical user interfaces. Elm is also call-by-value and strongly / statically typed with type inference. The language features mentioned above help catch errors in your code at compile time, but there are some errors that are external to your code, such as browser incompatabilities. By using HTML, CSS, and JavaScript as an assembly language, Elm can avoid some of these problems.
2. mobl (gos.i, homepage) mobl is a new free and open source language designed specially to speed up building mobile applications. Using modern HTML5 technologies, mobl offers you a concise language to build native-feeling web apps in a jiff; great (Eclipse) IDE support (such as as-you-type error reporting, code completion and reference resolving); a rapid save and test cycle. No more lengthy compilations, the mobl IDE compiles your modules whenever you save, ready to be tested in the mobile browser.
3. fun (gos.i, homepage) A declarative programming language for realtime web applications.

Compile to JavaScript

1. CoffeeScript (gos.i, homepage) CoffeeScript is a little language that compiles into JavaScript. Underneath all of those embarrassing braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. The golden rule of CoffeeScript is: “It's just JavaScript”. The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.
2. LiveScript (gos.i, homepage) LiveScript is a language which compiles down to JavaScript. It is a fork of Coco which is in turn derived from CoffeeScript. Like those two it has a relatively straightforward mapping to JavaScript. LiveScript is Coco but much more compatible with CoffeeScript, more functional, and more feature rich. LiveScript aims for increased expressiveness and code beauty. While adding features to assist in functional style programming, LiveScript also deeply supports imperative and object oriented programming, and has an optional class system with inheritance, calls to super, and more.
3. Coco (gos.i, homepage) Coco is a CoffeeScript dialect that aims to be more radical and practical. On its way to hide JavaScript's bad parts, CoffeeScript has accumulated own quirks: horrible variable scope, awkward ranges, confusing and/or pointless keywords, verbose file extension, and so on. Coco tries to amend them, entwining good parts of both.
4. IcedCoffeeScript (gos.i, homepage) IcedCoffeeScript is a superset of CoffeeScript. The iced interpreter is a drop-in replacement for the standard coffee interpreter; it will interpret almost all existing CoffeeScript programs. IcedCoffeeScript (ICS) adds two new keywords: await and defer. These additions simply and powerfully streamline asynchronous control flow, both on the server and on the browser. Say goodbye to callback pyramids; say adios to massive code rewrites when synchronization requirements change slightly. Say hello to clean, readable, maintainable control flow for network and asynchronous operations! The golden rule of CoffeeScript was: “It's just JavaScript”. ICS is doing something deeper. It's selectively running code through a continuation-passing style conversion. Original-style CoffeeScript will compile as before, but code using the new ICS features will be less recognizable. Still, the compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings.
5. haXe (gos.i, homepage) haXe (pronounced as hex) is an open source programming language. While most other languages are bound to their own platform (Java to the JVM, C# to .Net, ActionScript to the Flash Player), haXe is a multiplatform language.
6. Opa (gos.i, homepage) Opa is a new generation of web development platform that lets you write distributed web applications using a single technology. Opa is concise, simple, concurrent, dynamically distributed, and secure.
7. Dart (gos.i, homepage) Dart is a new class-based programming language for creating structured web applications. Developed with the goals of simplicity, efficiency, and scalability, the Dart language combines powerful new language features with familiar language constructs into a clear, readable syntax.
8. LLJS (gos.i, homepage) LLJS (formerly known as *JS) is a typed dialect of JavaScript that offers a C-like type system with manual memory management. It compiles to JavaScript and lets you write memory-efficient and GC pause-free code less painfully, in short, LLJS is the bastard child of JavaScript and C. LLJS is early research prototype work, so don't expect anything rock solid just yet. The research goal here is to explore low-level statically typed features in a high-level dynamically typed language. Think of it as inline assembly in C, or the unsafe keyword in C#. It's not pretty, but it gets the job done.
9. heap.coffee (gos.i, homepage) heap.coffee is a dialect of CoffeeScript that offers a C-like type system with manual memory management. It compiles to JavaScript and lets you write memory-efficient and GC pause-free code less painfully. heap.coffee, like its relative *JS, is early research prototype work, so don't expect anything rock solid just yet. The research goal here is to explore low-level statically typed features in a high-level dynamically typed language.
10. Google Web Toolkit (gos.i, homepage) Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. GWT is used by many products at Google, including Google Wave and the new version of AdWords. It's open source, completely free, and used by thousands of developers around the world.
11. Roy (gos.i, homepage) Roy is an experimental programming language that targets JavaScript. It tries to meld JavaScript semantics with some features common in static functional languages.
12. JS11 (gos.i, homepage) JS11 takes incomplete code and transforms it back into JavaScript. It's smart enough to add in various bits of redundant syntax, and can also transform some common errors and handy shortcuts into working JavaScript code. JS11 is a hybrid dialect that strives for greater readability and programmer effectiveness, whilst maintaining line-number parity with JavaScript. It consists of a language specification and a compiler module. JS11 adds some nice-to-have features that people often use in JavaScript but have to write out the long way. This includes things like default argument values, named parameters in function calls, a nice way to create private variable scopes, and easy numbered loops.
13. Kaffeine (gos.i, homepage) Kaffeine is a set of extensions to the Javascript syntax that attempt to make it nicer to use. It compiles directly into javascript that is very similar, readable and line for line equivalent to the input (you can beautify if you like).
14. Jack (gos.i, homepage) Jack is a new language in development that gets translated to pure JavaScript and runs on top of nodeJS.
15. PogoScript (gos.i, homepage) PogoScript is a programming language that emphasises readability, is friendly to domain specific languages and compiles to regular JavaScript.
16. moescript (gos.i, homepage) Moe is a new, not-very-little Javascript-targeted language written in JavaScript. Its features are inspired by Scala, Python, Haskell and Coffee. It is aimed to deal with common troubles in JavaScript development. Moe has neatly crafted grammar so that most JavaScript development will be simplified.
17. JavaScript++ (gos.i, homepage) JavaScript++ provides the same familiar C-style language syntax of JavaScript and brings modern language features such as classes; block scoping and constants; pluggable type systems and type safety; packages and modules; comprehensive standard libraries; enhanced regular expressions and PCRE; and more to JavaScript with almost no learning curve through an extended ES3 grammar. JavaScript++ compiles to ES3-compatible JavaScript. JavaScript++ incorporates features from Python, Perl, Java/C#, ES4, Harmony, Haskell, and more while incorporating its own unique features. The driving philosophy behind JavaScript++ is productivity, and it will make everything from small scripts to large applications easier and faster to write. Take the mundane out of your JavaScript code with JavaScript++!
18. JSX (gos.i, homepage) JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers. JSX performs optimization while compiling the source code to JavaScript. The generated code runs faster than an equivalent code written directly in JavaScript. The gain may vary, but even the optimized JavaScript libraries like Box2D becomes faster when ported to JSX (we are observing 4% to 27% increase in performance). In contrast to JavaScript, JSX is statically-typed and mostly type-safe. The quality of applications becomes higher when being developed using JSX, since many errors will be caught during the compilation process. It also offers debugging features at the compiler level as well. JSX offers a solid class system much like the Java programming language, freeing the developers from working with the too-primitive prototype-based inheritance system provided by JavaScript. Expressions and Statements are mostly equal to JavaScript, so it is easy to for JavaScript programmers to start using JSX.
19. mochiscript (gos.i, homepage) Mochiscript is a superset of the JavaScript language that adds more Object-Oriented features such as: methods, inheritance, mixins, etc… What this means is that Mochiscript IS Javascript. Mochiscript currently supports Ruby on Rails 3.1 (via asset pipeline) and Node.js.
20. Pygmy (gos.i, homepage) Pygmy is a dynamic language that compiles to Javascript, designed to be readable but concise enough to be competitive in code golf.
21. Pit (gos.i, homepage) PIT is F# to Javascript compiler that leverages the beauty of F# and also JavaScript.
22. WebSharper (gos.i, homepage) WebSharper is an HTML5-centric web framework that lets you create web and mobile JavaScript apps complete with a server-side backend using a single language, F#. WebSharper is designed to boost your productivity. Reduce complexity with a single language on the client and the server, enjoy code completion in Visual Studio®, and benefit from type inference and other great features of F#.
23. Amber (gos.i, homepage) Amber is an implementation of the Smalltalk-80 language. It is designed to make client-side development faster and easier. It allows developers to write client-side heavy web applications in Smalltalk. Amber includes an integrated development environment with a class browser, workspace, transcript, object inspector and debugger. Amber is written in itself, including the parser and compiler, and compiles into efficient JavaScript, mapping one-to-one with the JS equivalent.
24. Haste (gos.i, homepage) A compiler to generate Javascript code from Haskell.
25. ghcjs (gos.i, homepage) ghcjs is a Haskell to Javascript translator. It aims to provide solution to compile modern Haskell libraries to Javascript files and use them in Ajax applications or develop entire Ajax application in Haskell
26. Outlet (gos.i, homepage) Outlet is a programming language. It is Lisp-like in nature and compiles to JavaScript.
27. SibilantJS (gos.i, homepage) Sibilant is a language that is parsed by javascript and compiles to javascript. Sibilant is inspired by lisp and follows many lisp conventions, although it is still relatively close to the underlying javascript. Sibilant is entirely written in sibilant and can recompile itself.
28. Scriptjure (gos.i, homepage) Scriptjure is a Clojure library for generating javascript from Clojure forms. Its primary goal is to make it simple to embed “glue” javascript in Clojure webapps. Generated Scriptjure javascript is intended to be readable. At the moment, Scriptjure is very simple, but is still under active development.
29. clojurescript (gos.i, homepage) ClojureScript is a new compiler for Clojure that targets JavaScript. It is designed to emit JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler.
30. BiwaScheme (gos.i, homepage) BiwaScheme is a Scheme interpreter written in JavaScript.
31. JSIL (gos.i, homepage) JSIL is a compiler that transforms .NET applications and libraries from their native executable format - CIL bytecode - into standards-compliant, cross-browser JavaScript. You can take this JavaScript and run it in a web browser or any other modern JavaScript runtime. Unlike other cross-compiler tools targeting JavaScript, JSIL produces readable, easy-to-debug JavaScript that resembles the code a developer might write by hand, while still maintaining the behavior and structure of the original .NET code. Because JSIL transforms bytecode, it can support most .NET-based languages - C# to JavaScript and VB.NET to JavaScript work right out of the box.
32. Doppio (gos.i, homepage) Doppio is a project to get Java running in the browser without any plug-ins. Right now it comprises a fairly complete VM and an implementation of the javap bytecode disassembler. (Doppio is also the Italian word for 'double', and is another name for a double espresso). Doppio started out as the mid-term project for a Graduate Systems Seminar. It has since taken on a life of its own, and is complete enough to run implementations of GNU Diff, LZW compression, and the Java 4 compiler.
33. Skulpt (gos.i, homepage) Skulpt is an entirely in-browser implementation of Python. No preprocessing, plugins, or server-side support required, just write Python and reload.
34. Pyjs (gos.i, homepage) Pyjs is a port of Google Web Toolkit to Python, and thus enables the development of Rich Media AJAX applications in Python, with no need for special browser plugins. Pyjs contains a stand-alone python-to-javascript compiler, and also a Widget Set API that looks very similar to Desktop Widget Set APIs (such as PyQT4 or PyGTK2). Pyjs also contains a Desktop Widget Set version, running as pure python, with three useable Desktop ports available. With web-engine technology at it's core, HTML, CSS, plugins and other related features work out-of-the-box.
35. Objective-J (gos.i, homepage) Objective-J is a new programming language based on Objective-C. It is a superset of JavaScript, which means that any valid JavaScript code is also valid Objective-J code. Anyone familiar with JavaScript and object-oriented programming concepts, classical inheritance in particular, should have no difficulty learning Objective-J.
36. Opal (gos.i, homepage) Opal is a ruby to javascript compiler. Opal aims to take ruby files and generate efficient javascript that maintains rubys features. Opal will, by default, generate fast and efficient code in preference to keeping all ruby features. Opal comes with an implementation of the ruby corelib, written in ruby, that uses a bundled runtime (written in javascript) that tie all the features together. Whenever possible Opal bridges to native javascript features under the hood. The Opal gem includes the compiler used to convert ruby sources into javascript.
37. Red (gos.i, homepage) Red takes the Ruby you write and turns it into JavaScript for your browser. The all-new Red is a Ruby-to-JavaScript transliterator backed by a custom ruby.js library designed to let your code run in the browser exactly the way Ruby would run on your machine. The JavaScript output is optimized to contain only the fraction of the ruby.js source library needed to run your code. What does this mean for today’s Ruby developer? Simple. You don't need to learn JavaScript.

jquery event bind delegate live on 비교분석

http://youtu.be/CafBcWxssgc

SmartStart – Responsive HTML5 Template

SmartStart is a simple and clean but still professional template suitable for any business or portfolio, and it’s created by using the latest HTML5 and CSS3 techniques. With a responsive design it is easily usable with any device (Desktop, tablet, mobile phone…), without removing any content!

MORE INFO | DEMO – by Themeforest (Premium Template)

Projection – Responsive HTML5 Template

Projection is fully responsive template with minimal and elegant look. Projection includes top quality HTML5 and CSS3 code.

MORE INFO | DEMO – by Themeforest (Premium Template)

Viva – Responsive HTML Template

Viva is a simple and clean template suitable for any business or portfolio site, created with last HTML5 and CSS3 techniques. Fully responsive design for any device.

MORE INFO | DEMO – by Mojo Themes (Premium Template)

Simplex – Responsive HTML5 Template

Simplex is a clean, simple and responsive HTML5 template suitable for digital agencies and studios. Simplex is using HTML5 and CSS3 with mobile devices in mind. Simplex will automatically adjust its size on various devices ensuring a pleasant experiment for all visitors.

MORE INFO | DEMO – by Themeforest (Premium Template)

Mentor Premium Responsive Business HTML5 Template

Mentor is a fully responsive premium HTML template suitable for any kind of business or corporate use. Mentor is built upon the responsive Twitter Bootstrap framework, and therefore the template supports all of this framework’s built in components & plugins. The Mentor template is bursting with custom features, including a bespoke responsive slider plugin, an intelligent responsive carousel plugin and a custom developed mobile friendly lightbox plugin.

MORE INFO | DEMO – by Themeforest (Premium Template)

Magnolia – A Responsive HTML5 Template

Show off your work with this easy-to-customize and fully featured Site Template. When purchasing this theme, you will receive a detailed help file along with additional features like Unlimited color schemes and a Fully Responsive Layout.

MORE INFO | DEMO – by Mojo Themes (Premium Template)

OptimaSales – Responsive HTML5/CSS3 Template

OptimaSales is responsive, pixel perfect, clean and multipurpose HTML-template. It can be used like corporate site and site to present different sort of application for IT companies, webdevelopers and other companies. This theme was created by using the latest HTML5 and CSS3 techniques and Built on Skeleton grid system (12 cols). With a responsive design it is suitable for any device (desktop, tablet, mobile phone). OptimaSales is appropriate theme to any sort of your ideas, as it has 16 HTML pages, such as how it works page, coming soon page, portfolio (2, 3, 4 cols), pricing tables. It’s easy to customize to your needs.

MORE INFO | DEMO – by Themeforest (Premium Template)

Perspective – Responsive HTML5 Template

“Perspective” is a template suitable for all type of business. It comes with a lot of HTML Shortcodes, jquery plugins (tabs, accordion, sliders…) and with ability to edit the design very easy. Changing only a few lines of code you can give a new look to your template. Modern design with HTML5 and CSS3 power inside! It is compatible with all major browsers, so don’t worry is cross-browser and also responsive, this means that the content will be visible and readable on all devices starting from mobile to computer.

MORE INFO | DEMO – by Themeforest (Premium Template)

Raflesia – Responsive HTML Business Template

Raflesia is an elegant responsive business HTML template. There are 5 color options ( Purple, Blue, Red, Black, and Orange ). 3 Font Options ( Terminal Dosis, Georgia, and Cabin Condensed ). With responsive layout, this template can be accessed well in old mobile phone ( resolution : 240 x 320px ).

MORE INFO | DEMO – by Mojo Themes (Premium Template)

Bromo – Premium Responsive Business HTML5 Template

Bromo is a clean, modern and Powerful Professional Premium HTML + CSS template suitable for small or large businesses. Bromo also comes with 22 page templates showcasing all the design flexibility your theme has to offer, including Columns, Pricing Tables, Toggle Box, Button Styles, multiple Div layouts and much more.

MORE INFO | DEMO – by Themeforest (Premium Template)

Weiss – Responsive HTML5 Template

This clean, responsive HTML5 template is ideal for a wide range of uses!

MORE INFO | DEMO – by Themeforest (Premium Template)

Niarra – Creative Responsive HTML5 Template

This one features a creative design by 50 that’s totally responsive and available in two different skins. Custom built lightbox, fullscreen gallery, HTML5 Video and Audio, Niarra meets all your creative needs.

MORE INFO | DEMO – by Themeforest (Premium Template)

Portefeuille – Responsive HTML5 & CSS3 Template

Portefeuille (Portfolio) is a Responsive HTML5 and CSS3 Template, capable of supporting Retina Display images and is packed with shortcodes and even its own framework. The theme consists of Lightbox functionality, Google Fonts & Maps and comes with over 20 page templates. – This theme is also built on a 16 column grid system to ensure maximum responsive capabilities. The Aspirebook framework supports both fluid and responsive functionalities.

MORE INFO | DEMO – by Mojo Themes (Premium Template)

Energetic – Responsive HTML5 Template

Energetic is clean and professional template suitable for business / portfolio / hosting websites etc. Its created using the latest technologies like HTML5 and CSS3 . With a responsive design it is compatible on any devices like tablet, iPad, iPhone, and Android Phones too.

MORE INFO | DEMO – by Themeforest (Premium Template)

BeautyMind – Responsive HTML5 Template

Beauty Mind is a simple and clean professional template suitable for any business or portfolio. Template created by using the latest HTML5 and CSS3 techniques. Beauty Mind has a fully responsive layout. It is easily usable with any device desktop, tablet, mobile phone. It looks beautiful on any device!

MORE INFO | DEMO – by Themeforest (Premium Template)

SmartIT Responsive HTML5/CSS3 Template

SmartIT Responsive HTML5 /CSS3 Template best suites for small or large IT companies websites. It can be also used for any type of business with it’s own gallery. It looks perfect on both wide screens and on portable devices.

MORE INFO | DEMO – by Themeforest (Premium Template)

Box Two – Responsive Single Page HTML5 Template

Box Two is a brand new Responsive Single Page HTML5 Template developed exclusively for MOJO Marketplace. It’s perfect for business or a personal users. It’s incredibly powerful, flexible, fun and easy to use!

MORE INFO | DEMO – by Mojo Themes (Premium Template)

Smashing – Responsive HTML5 Template

Smashing is an extremly flexible and really good looking theme, built with the latest technologies. It included an amazing parallax slider, a filterable portfolio and a working contact form.

MORE INFO | DEMO – by Themeforest (Premium Template)

Canopus – Responsive HTML5 Template

Canopus is a responsive HTML5 portfolio suitable for portfolio and businesses. It’s built with Web Design best practices like Microformats. Compatible with iPad, iPhone and other devices.

MORE INFO | DEMO – by Themeforest (Premium Template)

Blablabla Responsive HTML5 Template

Simple, clean and modern design. This template is ideal for setting up any mutlipurpose site, either it is a business related site or a personal page.

MORE INFO | DEMO – by Mojo Themes (Premium Template)

Impromptu – Responsive HTML5 Template

Impromptu is a classy, responsive HTML5 template perfect for any business, portfolio or blog.

MORE INFO | DEMO – by Themeforest (Premium Template)

Moderna Responsive HTML5 Template

Moderna is responsive and clean HTML template which is suited for both professional business sites and creative personal portfolio. Moderna comes with two skins – boxed and stretched of which every has ten color styles. Boxed version comes with 15 patterns, to give you countless options in organizing and managing your contents.

MORE INFO | DEMO – by Themeforest (Premium Template)

CorporatePixels – Responsive HTML5 Template

CorporatePixels is an awesome Simple yet Responsive Corporate HTML5 Template which could be suitable for almost all kinds of business. You can use it as Business template, Your personal portfolio or even a Blog. It’s comes with valid well written code, pricing table, working contact form and much more.

MORE INFO | DEMO – by Themeforest (Premium Template)

Estancia – Responsive HTML 5 Theme

Estancia is a Responsive HTML 5 template for businesses or creative professionals. It uses a Responsive Framework so it’s compatible with all mobile devices. Estancia is designed for a wide range of websites including creative, personal blogs, small business and corporate websites. It comes with several home page options including the amazing Revolution Slider. Estancia includes over 20 HTML pages, with virtually endless customization possibilities. Also includes a functioning out of the box contact form.

MORE INFO | DEMO – by Themeforest (Premium Template)

Magazine HTML5 Responsive Template

WP-Magazine is a clean and minimalist. It is suitable for a personal, blog, news and magazine websites. The HTML was coded with “Wordpress Theme” in mind so it is very easy to use for creating WordPress theme.

MORE INFO | DEMO – by Themeforest (Premium Template)

Responsy – Responsive HTML5 Portfolio

Responsy is a responsive html5 template suitable for personal portfolios or creative agencies. Responsy has been coded in HTML5 & CSS3 and jQuery. It has a solid flexible responsive layout that scales from 320px to 1170px.

MORE INFO | DEMO – by Themeforest (Premium Template)

Hipster: Retro Responsive HTML5 Template

Hipster is the perfect template for any personal or business website! Hipster’s fully responsive design looks great no matter what device you’re viewing it on, desktop, tablet, mobile phone, etc. Customize your site with over 30 backgrounds patterns (see the demo), full screen rotating background images, and 2 page layout styles (full width or boxed).

MORE INFO | DEMO – by Themeforest (Premium Template)

Popular – Responsive HTML5 Them

Popular is a agency and corporate theme. Its simple and clean HTML5 & CSS3 Template. Its a full responsive theme built with Bootstrap.

MORE INFO | DEMO – by Themeforest (Premium Template)

LittleSquare – Responsive HTML5 Theme

LittleSquare its a agency and corporate theme. Its simple and clean HTML5 & CSS3 Template. Its a full responsive theme build with Bootstrap.

MORE INFO | DEMO – by Themeforest (Premium Template)

Phenomenal – Responsive HTML5 Theme

Phenomenal its a agency and corporate theme. Its simple and clean HTML5 & CSS3 Template. Its a full responsive theme and its build with Bootstrap.

MORE INFO | DEMO – by Themeforest (Premium Template)

Mustach – Responsive Html5 Theme

Mustach template is a simple style and with many options can be used either for a small business as a personal portfolio, for its style and functionality make it a comprehensive template for your project, with the benefits that is optimized for viewing in iPhone and iPhone, with responsive scales to the size of the screen where you are viewing.

MORE INFO | DEMO – by Themeforest (Premium Template)

Construct – Responsive HTML5/CSS3 Template

Construct is a multi-purpose template that is loaded with options, and is fully responsive (try resizing your browser). It contains a total of 59 HTML pages! The clean, modern design can be used for any type of website; business, corporate, portfolio, products, etc, and with the unique layout options it provides, your possibilities are endless.

MORE INFO | DEMO – by Themeforest (Premium Template)

Alexx – Multipurpose HTML5 Theme

Alexx is multipurpose responsive and clean HTML5 theme. It is based on 960 GS by Nathan Smith which is included in a shape of a layer in PSD files which are also included in the download file.

MORE INFO | DEMO – by Themeforest (Premium Template)

White Noise – HTML5 Template

Show off your work with this easy-to-customize and fully featured Site Template. When purchasing this template, you will receive a detailed help file along with additional options like choosing between Unlimited color schemes and a light and dark live preview.

MORE INFO | DEMO – by Themeforest (Premium Template)

Sterling – HTML5 Responsive Web Template

Sterling is a fully Responsive Website Template built on a highly intelligent framework. It’s the perfect template for everyone in need of a professional online presence. Whether your an HTML pro or just a beginner, you’ll have absolutely no problems at all working with this website template.

MORE INFO | DEMO – by Themeforest (Premium Template)

Quickr – Responsive HTML 5 Premium Template

Quickr is a premium responsive HTML5 / CSS3 which uses the best practices of latest technologies and is compatible with all mobile devices. Quickr is suitable for wide range of websites, from personal blogs to small business and corporate websites. 6 Sliders (2 of which -responsive), Audio/Video posts, pricing tables and numerous jQuery enhancements are just a small part of what the template offers.

MORE INFO | DEMO – by Themeforest (Premium Template)

TryMee – Premium Responsive HTML5 Template

TryMee is an embodiment of versatile corporate template for any web site creation. Simplicity, from which you can change practically everything in this template, is stunning! Set up color for all elements of the site via CSS and create your own unique design!

MORE INFO | DEMO – by Themeforest (Premium Template)

Politician Responsive HTML5/CSS3 Template

Politician Responsive HTML5 /CSS3 Template uses a great deal of white/dark space to create a clean feel to this site. The elements of this web design are nicely spaced out to create a clean overall design. The light/dark background and elegant typography combines to make a very fresh design. This website is far from minimal, yet uses very clean edges, accentuated by the contrasts between content areas and backgrounds to create a highly clean web experience.

MORE INFO | DEMO – by Themeforest (Premium Template)

REWORK – Responsive HTML5/CSS3 Template

REWORK is a responsive HTML5 / CSS3 template for business, software or blog site. This is a flexible and multipurpose, modern and sleek site template, suited for any situations. With a responsive design it is ready to look stunning on any device – from a widescreen monitor to a mobile phone.

MORE INFO | DEMO – by Themeforest (Premium Template)

templateSTARTER – Responsive HTML5/CSS3 Template

templateSTARTER is a minimal and elegant fully responsive premium HTML5 template suitable for business or portfolio websites but also for any other type of project. It is built upon the responsive Twitter Bootstrap framework and it supports all of framework’s built in components & plugins. Beside that there are many other custom features built in like 3 different sliders, powerful Ajax portfolio, working Ajax contact form with validation, custom pricing tables and more.

MORE INFO | DEMO – by Themeforest (Premium Template)

Goldenway – Premium Responsive HTML5 Template

Goldenway HTML template bursts with rich functionality combined with a clean and classy-looking design. Its responsive layout was specially developed to suit the most various needs. Even more, the Goldenway WP theme has pricing tables and featured block included! Goldenway is provided with a rich collection of shortcodes for columns, tabs, info boxes, buttons, various audio and video players, media etc.

MORE INFO | DEMO – by Themeforest (Premium Template)

Powerful – Responsive, Retina-ready HTML5 template

Powerful is a responsive template with retina support, perfect for a business or portfolio site. It’s clean, well coded and includes loads of awesome features such as a slider, filterable portfolio and an icon font with over 200 icons. The template comes in six different colors(and 10 different templates), and by editing a single line of code, you can change the whole color scheme to any color you’d like.

MORE INFO | DEMO – by Themeforest (Premium Template)

Free Responsive HTML5 Template

Accentbox

A magazine/blog responsive HTML5 template with two columns and a content side bar.

MORE INFO | DEMO – by HTML5xCSS3 (Free Template)

Liquid Gem

Liquid Gem is a responsive HTML5 and CSS3 template that can be used for gallery and portfolio websites.

MORE INFO | DEMO – by HTML5xCSS3 (Free Template)

Modus

Responsive is the new wave of web design! Grab a copy of this great HTML 5 Template for free. Use it on blog, portfolio showcase or business portfolio.

MORE INFO | DEMO – by Luis Zuno (Free Template)

Designa Responsive

If you are looking for a clean and minimalist HTML5 template for a responsive website design, Designa is an ideal theme for you. It has as three-column layout and different pages to display your contents.

MORE INFO | DEMO – by HTML5xCSS3 (Free Template)

Folder Template

Folder is a responsive HTML 5 template that adapts to any devices and browser sizes. Perfect for creatives showcase and business. Its retro and minimal design gives importance to the content and gives a friendly air to the visitors.

MORE INFO | DEMO – by Luis Zuno (Free Template)

ResponsiveEve

ResponsiveEve is a business and magazine theme with 2-columns and a content sidebar. It is coded in HTML5 and CSS3.

MORE INFO | DEMO – by HTML5xCSS3 (Free Template)

It Fits – Free HTML5 CSS3 Responsive Template

Its an HTML5 CSS3 Responsive Template, with 5 pages excluding 404 page. This template has something not just merely HTML5 new tags, it’s coded using WAI-ARIA roles for enhanced quality. Uses very less images, taking benefits from CSS3 features.

MORE INFO | DEMO – by CSS Junction (Free Template)

Zeni

Zeni works great for creative’s portfolio, blog and corporative and business sites.

MORE INFO | DEMO – by Luis Zuno (Free Template)

Vintage Template

Retro style portfolio / showcase blog template with a retro style touch.

MORE INFO | DEMO – by Luis Zuno (Free Template)

FreshIdeas HTML5 and CSS3 Template

Freshideas is a 2-column HTML5 and CSS3 template with a clean and simple style. The black and white motif with just a pop of yellow color is very attractive.

MORE INFO | DEMO – by Free HTML5 Templates

Responsive Brownie

Responsive Brownie is a beautiful HTML5 and CSS3 template for business and portfolio.

MORE INFO | DEMO – by HTML5xCSS3 (Free Template)

HTML5 게임 - http://cocos2d-javascript.org/

30+ High Performing HTML5 Templates for Web Design

SmartStart – Responsive HTML5 Template – MORE INFO

This is a professional theme with a clean and simple attitude. It is designed for portfolio or business websites. SmartStart has been crafted with the latest CSS3 and HTML5 techniques. It will easily adjust to any browsing device, including mobile phones and tablets, because of its responsive feature. You can also get this template in the WordPress version.

Perspective – Responsive HTML5 Template – MORE INFO

Perspective is a template that is ideal for all kinds of business websites. It is packed with plenty of HTML shortcodes and jQuery plugins like accordion, sliders and tabs. The design is responsive, and it can be edited easily.

Agora HTML5 Template – MORE INFO

This is a nice HTML5 template that is ideal for showcasing fashion, studios and creative. It can be customized easily with 13 pages and powerful full screen gallery that can showcase big sized works on the homepage directly. The customization process can be enhanced by the Serif and Sans Serif styles that are included with the template. In addition, the themes is mobile friendly.

VividPhoto HTML5 and CSS3 Template (free) – MORE INFO

VividPhoto is a stunning photography HTML5 and CSS3 template that is designed to showcase a portfolio of images.

Vega HTML5 Responsive Template – MÒRE INFO

Vega is a HTML5 template that is dynamic, stylish and creative. It is easy to customize and user friendly. Vega is a great way of showcasing your media.

Popular – Responsive HTML5 Theme – MORE INFO

This template was designed with HTML5 and CSS3, and has a corporate and agency appearance. It’s fully responsive feature is created with Bootstrap.

Royale’ Creative HTML5 Template – MORE INFO

This is a creative template that can enhance your video or photography showcase. The complete page template set will provide the possibility to showcase your work and brand in a professional and refined manner.

Minimalism HTML5 and CSS3 Template (free) – MORE INFO

Minimalism is an HTML5 and CSS3 template that is minimal and beautiful in its simplicity. Combines multiple-column groupings and newspaper style column.

Harmony – Multipurpose HTML5 Template – MORE INFO

Harmony is packed with easy to use and built in features that will make user experience an exciting, pleasant and intuitive one. The package includes 4 Home page sliders , 16 color schemes, a working contact form with validation and more. IT is not responsive though.

Chromatron HTML5 Admin Backend – MORE INFO

This is a professional and simple HTML5 template that can be used for both desktop and mobile devices. Chromatron has a lot of features and build in jQuery. There are 4 default colors available, each packed with popular and basic user interface widgets.

Folder (free) – MORE INFO

Folder is a free HTML5 portfolio theme with responsive design.

Neutron – HTML5 Templat – MORE INFO

This HTML5 template is modern and clean. It is great for any portfolio or business website. It has jQuery features available and 12 page templates.

Retro – HTML5 Template – MORE INFO

This is a modern and clean template that is best suited for business or portfolio websites. Easy and fast to set up, Retro also has a WordPress version.

NeoArts (free) – MORE INFO

NeoArts is a modern and elegant web template designed for Design/Studio websites. All-in-One page with an animated theme.

Qreator – Corporate HTML5 template – MORE INFO

Almost anything can be changed in this template. You can make your own creative design and set up color for all site elements using CSS. It includes 5 preset Home page layouts, Google webfont directory support (320+ Fonts) and more.

Limitless – Multipurpose HTML5 Template – MORE INFO

Limitless HTML5 template is packed full of user friendly features and plenty of PSD and HTML files. Limitless was designed with SEO in mind.

Responsive Brownie (Free) Html5 Template – MORE INFO

An awesome free, responsive HTML5 template aimed at businesses and portfolios.

Simplex – Responsive HTML5 Template – MORE INFO

Clean, responsive and simple would be the perfect words to describe Simplex HTML5 template. Simplex has been designed with mobile devices in consideration and is well suited for studios and digital agencies. The template will adjust its size automatically on different devices, ensuring a nice experience for every visitor.

Projection – Responsive HTML5 Template – MORE INFO

This template is entirely responsive and designed with an elegant and minimal look. The package includes CSS3 and HTML5 codes.

Manifest – Premium HTML5 Template – MORE INFO

Manifest is a HTML5 template that is very flexible and clean. It has a minimalist and modern design that is ideal for galleries, creative blogs, portfolios and other types of websites. The package includes 6 predefined skins to customize your website easily.

Muro (free) HTML5 Template – MORE INFO

Muro is a brilliantly designed web template that comes with 3 different skins, 7 page layouts as well as jQuery functionality.

Energetic – Responsive HTML5 Template – MORE INFO

This is a professional and clean template that is ideal for portfolio, business and hosting websites. It has a responsive design that was created with HTML5 and CSS3, making it compatible with all kinds of devices including iPhone, iPad and Androids.

White Noise – HTML5 Template – MORE INFO

This template is easy to customize and full of features. Show off your work with this easy-to-customize and fully featured Site Template.

Basix – Premium HTML5 Template – MORE INFO

This theme is easy to customize and use. Basix is a minimal HTML 5 template that is full of features like unlimited colors, jQuery, 960 grid system and working contact form. The portfolio section is filtered using Isotope. In addition, this theme is also well documented, with a lot of shortcodes and features for creating your own pages.

Moderna Responsive HTML5 Template – MORE INFO

A clean and responsive HTML5 template. Moderna is ideal for both creative personal portfolio and professional business websites. The theme has two skins, which are stretched and boxed. The boxed version has 15 patterns so that you can have unlimited options in managing and organizing your contents.

LEFT HTML5 Theme (free) – MORE INFO

LEFT web template is designed in HTML5 and offers more than 6 page layouts with a unique skin system.

Weiss – Responsive HTML5 Template – MORE INFO

If you are looking for a responsive and clean theme that is suitable for a wide variety of uses, Weiss HTML5 template would be a great choice.

Canopus – Responsive HTML5 Template – MORE INFO

This is a responsive HTML5 template that is ideal for business and portfolio websites. It was created using the best web design practices such as Microformats. Canopus is ideal for iPhone, iPad and other mobile devices.

Oreva Business HTML5 Template – MORE INFO

Oreva is very minimal and clean HTML5 business template that can be used for all kinds of personal and business websites. The template has 2 color variations that can fulfill all the requirements of modern web development.

Impromptu – Responsive HTML5 Template – MORE INFO

Classy and responsive, Impromptu HTML5 template is perfect for portfolio blog or business websites.

Magazine HTML5 Responsive Template – MORE INFO

This minimalist and clean HTML5 template was created for WordPress. It is ideal for blogs, magazine, personal and news websites.

Responsy – Responsive HTML5 Portfolio – MORE INFO

This responsive HTML5 template is most suited for creative agency and portfolio websites. The solid responsive layout is flexible and can scale down from 1170 pixels to 320 pixels.

Mustach – Responsive Html5 Theme – MORE INFO

‘

Simple yet packed with a lot of options, Mustach can be used for personal portfolio and small business sites. The template comes with a clean and neat code, making it easy to understand when making variations in the template.

20 New Essential jQuery Plugins

Latest jQuery Plugins and scripts for web designers and developers. Today I selected 20 essential jQuery plugins, sliders, image galleries, slideshow plugins, jQuery navigation menus, interactive maps, mobile interfaces , accordion menus, tooltips plugins and many other useful jQuery scripts collected in one place.

jQuery plugin are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we will found some good ones for you.

You may be interested in the following modern trends related articles as well.

• 25+ Latest jQuery Plugins
• 25 Excellent Free Fonts For Designers
• 36 Inspiring Examples Of Web Designs 2012
• 55 Remarkable Examples Of Typography Design

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.

Don’t forget to  subscribe to our RSS-feed and  follow us on Twitter — for recent updates and follow me on Google+ 

20 New jQuery Plugins

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. (via jquery.com)

jQuery Lightweight Tooltip Plugin :Tooltipster

Tooltipster is a lightweight jQuery plugin that enables you to easily create clean, HTML5 validated tooltips. The plugin is small-in-size (4.8kb minified), works fast and can be customized with ease.

Its look can be changed with CSS (theme support) and the position of the arrow, following the mouse, delay/period of the appearance can all be defined.

Website: http://calebjacob.com/tooltipster/

RoyalSlider – Professional Image Gallery and Responsive Content jQuery Slider Plugin

Royal Slider is a professional touch-enabled jQuery plugin for displaying any HTML content (images, videos, text..) inside a slider interface and comes with awesome features.

The slider focuses on providing great user experience on every desktop and mobile device.

The slider is very customizable with 50+ options, 4 skins with PSD files, 9 pre-built templates (and more coming) and full CSS styling.

Compatibility: All Modern Browsers
Website: http://dimsemenov.com/plugins/royal-slider/
Demo: http://dimsemenov.com/plugins/royal-slider/templates/

Cross-Browser JavaScript Drag & Drop File Uploader: FileDrop

FileDrop is a JavaScript cross-browser class for quickly creating drag & drop and AJAX (multiple) file uploader interfaces.

The class doesn’t require any JavaScript frameworks and works cross-browser, including IE6 (with iFrame fallback).

Compatibility: All Modern Browsers
Website: http://proger.i-forge.net/FileDrop_%E2%80%93_cross-browser_JavaScript_Drag_-amp_Drop_file_upload/7CC

Really Simple Slideshow: A Flexible Larger Slider jQuery Plugin

Really Simple Slideshow is a flexible jQuery plugin for creating image sliders of any kind. Images are loaded dynamically as each one is required, allowing for larger slideshows without having to pre-load lots of images.

The plugin converts any list of images into a slideshow, it can display captions with each slide, include links and there are multiple transition effects.

Compatibility: All Modern Browsers
Website: http://reallysimpleworks.com/slideshow/
Download:https://github.com/reallysimple/Really-Simple-Slideshow

Responsive jQuery Slider: iView Slider

iView Slider is a responsive jQuery image slider plugin with animated captions, for featuring any type of content (images, HTML, video). Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

The plugin has support for responsive layouts down to mobile and it works well with touch interfaces.

Slider has 35 built-in transition effects which is completely compatible with all major browsers (including ie6 to ie9, Firefox, Chrome, Opera, Safari) and mobile platforms like iOS / Android.

Requirements: jQuery & Raphael
Website: http://iprodev.com/2012/07/iview/
Demo:http://iprodev.com/iview/

Lightweight Framework For Mobile Web Apps: Sidetap

Sidetap is a lightweight framework for mobile web apps (2kb minified, gzipped).

The framework actually focuses on providing a flexible side-navigation similar to the one we know from Facebook’s mobile app, and, once the navigation part is solved, it is pretty easy to build a simple mobile web app.

Lightweight Sidetap only weighs 2k when minifyied and gzipped!

Device Support Sidetap aims to always deliver the best possible experience for all devices by starting with a basic experience and progressively enhancing it for more capable devices.

Less Decisions to Make By embracing convention over configuration, Sidetap lets you start building your mobile interfaces right away.

Simple Sidetap provides a flexible foundation for navigating between content panels on mobile devices using an easy-to-use syntax.

Requirements: jQuery or Zepto.js
Compatibility: All Modern Browsers
Website: http://sidetap.it/
Demo:http://sidetap.it/demo/stonehenge/index.html
Download:https://github.com/harvesthq/Sidetap

Javascript Slideshow For Flickr Images :Flickrshow

Flickrshow is a simple JavaScript slideshow for Flickr images.

The JavaScript slideshow doesn’t require any development expertise but, if jQuery is detected, it can function like any other jQuery plugin.

It has the ability to display images of a specific user, set, group, gallery and/or tags.

The number of images to be shown “per page”, autoplay being on/off, user control being on/off and the interval between each item can all be defined.

Website: http://www.flickrshow.co.uk/
Download: https://github.com/beseku/javascript.flickrshow

HTML Generator for jQuery Mobile Framework: jqmPhp

jqmPhp is an open source HTML code generator for jQuery mobile framework, the project that aims to simplify using jQuery Mobile with PHP.

jqmPhp is a package of PHP classes that facilitates the creation HTML files for use with jQuery Mobile Framework. All classes in the jqmPhp package can be converted to string and printed with an echo function.

Website: http://www.jqmphp.com/
Download: http://code.google.com/p/jqmphp/downloads/list

UI Notifications Framework: Backbone.Notifier

Backbone.Notifier is a powerful UI notifications framework for displaying and controlling UI notifications.

It is built on top of jQuery, Backbone.js + Underscore.js and has many cool features like a 3D module or animations support.

The notifications can be displayed on the top or in the middle, modal notifications exist and it is possible to set custom styles via CSS + JS API.

Requirements: jQuery, Backbone.js and Underscore.js
Compatibility: All Major Browsers
Website: http://e-w.co.il/backbone.notifier/
Download: https://github.com/ewebdev/backbone.notifier/

Easiest Google Maps Integration With GMaps.js

GMaps.js, is a jQuery plugin, allows Google Maps integration in a easiest way. Google Maps, like any other Google product is already easy-to-use and their API is not that complicated to work with.

Besides adding a standard map of a specific location, we can define the zoom level, add markers, get the location of a user (HTML5 geolocation), define routes, draw polylines and more with only few lines of code.

Requirements: jQuery
Website: http://hpneo.github.com/gmaps/
Demo:http://hpneo.github.com/gmaps/examples.html
Download:https://github.com/HPNeo/gmaps

Chronoline.js : JavaScript Library For Display Graphical Timeline Of Events

Chronoline.js is a JavaScript library for creating a chronological graphical timeline of events.

The timeline is is displayed horizontally, list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and events placed on it can be any days long and details about the events are shown in a tooltip when hovered.

Requirements: Raphael.js, jQuery, jQuery qTip2 plugin
Compatibility: All Modern Browsers
Website: http://stoicloofah.github.com/chronoline.js/

JavaScript WYSIWYG Editor With Drag ‘n’ Drop : Redactor

Redactor is a free JavaScript WYSIWYG editor with drag ‘n’ drop images and files on the web. Redactor powered by jQuery its have clear interface.

It auto-converts textarea fields into an editor and the editor is capable of all the major actions (text-styling, adding image/file/video/tables/lists).

Compatibility: All Modern Browsers
Website: http://redactorjs.com/
Demo: http://redactorjs.com/examples/

Awesome Scrolling Effects jQuery Plugin: SuperScrollorama

I m sure you not forget the previous version “Scrollorama“, the popular jQuery plugin creating scrolling effects in scrolling of web pages.

There is now a superior version named SuperScrollorama by the same developer which offers more and complicated animations.

It makes use of the feature-rich TweenMax and the Greensock Tweening Engine (make sure you check its license before using) for accomplishing the effects.

Compatibility: All Modern Browsers
Website: http://johnpolacek.github.com/superscrollorama/
Download:https://github.com/johnpolacek/superscrollorama

Drop Down Menus With Images jQuery Plugin :ddSlick

ddSlick, a free lightweight jQuery plugin for creating drop down menus (list menus) with images and description, list-menus with a better look and more information.

It works as a drop-down menu where we can use images and description besides a simple text.

Compatibility: All Modern Browsers
Website: http://designwithpc.com/Plugins/ddSlick

Awesome jQuery Calendar :jQuery Verbose Calendar

jQuery Verbose Calendar is an awesome jquery plugin created by John Patrick Given (software developer & interface designer), The jQuery plugin creating a calendar that shows the whole months and days of a year at the same time and you can also change month and year.

When its loaded, it auto-scrolls to “today date” and displays the day names when hovered to any date in a tooltip.

Requirements jQuery + Tipsy & jQuery.ScrollTo plugins
Compatibility All Major Browsers
Website: http://iamjpg.github.com/jQuery-Verbose-Calendar/
Download; https://github.com/iamjpg/jQuery-Verbose-Calendar

Vector Maps With jQuery, Vector Graphic Maps for Modern Browsers :JQVMAP

JQVMap is a jQuery plugin for render vector graphic maps by using SVG for modern browsers and VML for the rest.

It is a heavily modified version of another plugin, jVectorMap, and comes withready-to-use maps of “world, USA, Europe and Germany”.

There are several customization options for beautifying the maps including colors, borders or their opacity.

Maps can have zooming enabled or not, show tooltips of data when hovered and there is callback for clicks.

Compatibility: All Modern Browsers
Website: http://jqvmap.com/
Download: https://github.com/manifestinteractive/jqvmap

jCS Media Library (jCSML) For Creating Cross-Browser Animation

jCS Media Library (jCSML) is powered by jQuery and it is specifically designed for creating cross-browser animation and be able to run them everywhere without having to tweak anything for individual browsers or platforms.

jCSML create flash-quality animations can be built that will run from IE7 all the way to the iPad/iPhone without changing a single line of code. It can produce highly effective animations using the jCSML scripting construct. The animations can also be easily packaged up and sold like .SWF files.

JCSML works everywhere like IE7 browsers, android Or an iPad/iPhone.

Requirement: jQuery & jQuery easing library
Compatibility: All Major Browsers
Website: http://jcsml.com/
Demo: http://jcsml.com/pageshell.html?root=Tutorials&target=Starship#
Download: http://www.jcsml.com/pageshell.html?root=PurchasePages&target=PurchasePage&TOCEnabled=FALSE

minjs: Lightweight JavaScript Components

minjs is a collection of independent JavaScript components, built on jQuery, that aims to accomplish a specific job with lightweight code.

minjs stays out of your way. It does not dictate how you to design your UI. It tries to make no assumptions about the layout of the HTML or CSS it’s running in.

Currently, there are 3 components: minform, longtable and dtcal.

minform brings cross-browser compatibility to HTML5 form enhancements(for attributes: placeholder, required and autofocus).

Compatibility: All Major Browsers
Website: http://www.minjs.com/

Real Shadow: jQuery Plugin For Mouse-Sensitive & Realistic Shadows

Real Shadow is a simple-yet-effective jQuery plugin for mouse-sensitive & creating realistic shadow effects for any HTML element.

With a simple function, it works by targeting any number of elements and manipulating the value of box-shadow CSS property for the elements in accordance with the mouse position.

So, the shadow’s location and size is determined by the element’s distance to the mouse pointer which ends up in a cool effect.

Compatibility: All Modern Browsers
Website: http://indamix.github.com/real-shadow/
Download: https://github.com/Indamix/real-shadow/

MiniJs: A Suite Of jQuery Plugins Written In CoffeeScript

Matthieu Aussaguel a web developer working at Envoto, releasing MiniJs plugins.

MiniJs is a free and open source suite of jQuery plugins that are written in CoffeeScript.

The plugins are perfect for everyday-use and include: slider, tooltip, notification, Twitter feed and counter (new ones are on the way).

They are all built with simplicity in mind and very easy-to-use with only few important parameters.

Compatibility: All Major Browsers
Website: http://minijs.com/
Download: https://github.com/minijs

jPages: Awesome JavaScript Pagination Plugin

jPages is a client-side JavaScript pagination plugin (jQuery plugin) with have lots of features like keyboard + scroll navigation, auto page turn, delayed display and a customizable navigation panel and also integration with Animate.css and Lazy Load.

The plugin is very unobtrusive and it won’t apply any extra styles to the items you are paginating. It will only create and insert the links inside the element(s) you are applying the plugin to, in order to turn them into navigation panel(s).

Any number of pagination elements can be inserted into the same page and they can be positioned with ease.

Compatibility: All Major Browsers
Website: http://luis-almeida.github.com/jPages/
Demo: http://luis-almeida.github.com/jPages/defaults.html
Download: https://github.com/luis-almeida/jPages

15 Online HTML5 Tools for Web Designers

by Andy on October 10, 2012

Online HTML5 tools are quite useful for web designers who wants to forge ahead of the competition, and have more satisfied clients. It is of course important to follow developments and keep an eye on new tools that emerge.

HTML5 is the new version of the markup language HTML that has been used for presenting and structuring online contents since the early 90s. It is an internet core technology that was proposed originally by Opera Software. If you want to learn more of it’s background and history these HTML5 infographics can help you. HTML has been standing in the shadow of other frameworks like Flash and IE, but the word is, that this is going to change with the arrival of HTML5. As of today, HTML5 is still being developed, but believe me, it is here to stay.

HTML5 has opened a window of opportunities for web designers. Online web design tools based on HTML5 makes it easier to incorporate audio, video, drag and drop, fonts, animations and graphics into web pages. HTML5 also helps web designers build mobile friendly website themes to ensure excellent user-experience when surfing the Internet on mobile devices. However, since such tools are fairly new, some people may still be unaware of their true potentials. Also, some web designers still want to use Flash and other popular framework as their primary tool set.

Below, I have listed 10 useful online HTML5 tools. They can provide developers and web designers with manoeuvrability in making websites more convenient, productive and attractive.

Moqups – HTML5 App For Creating Wireframes

Moqups is a HTML5 web app for creating wireframes, mockups or UI concepts. You can go to their blog and read more about this highly popular project.

Fontdragr – Online Font Testing Tool

If you are a designer, you might find it difficult to choose a decent font. However, using this online font testing tool can make the process much easier. You can view any font you want in a webpage without changing its CSS or HTML code.

Liveweave – HTML5, CSS3 & JavaScript Playground

Liveweave is a new playground for developers and designers to test HTML, CSS and Javascript. Liveweave editor has built-in context-sensitive autocompletion for HTML4/HTML5 and CSS2/CSS3, that makes life a lot easier.

Adobe Edge Animate

Edge Animate will allow you to create animated and interactive web contents. It has an easy to use and intuitive interface, precise control, broad reach and more.

HTML KickStart

HTML KickStart is not really a tool, it is a set of HTML5, CSS, and jQuery building blocks for website development. It includes files, layouts, and elements that will give you a headstart and save you hours on your projects.

Stitches – An HTML5 Sprite Sheet Generator

Stitches is a really easy-to-use HTML5 sprite sheet generator. Simply drag and drop image files onto the app, click “Generate” and your sprite and stylesheet will be good to go. Currently compatible only with the latest version of Firefox and Chrome.

Create – Web Editing Interface

Create is a new web editing interface that uses a browser-based HTML5 environment for managing your content. It can be adapted for use with virtually any content management backend.

SpriteBox Online HTML5 Tool

These days, compressing images seems to be the rage. By placing your photos in a Sprite, you can increase the rate of your loading times as well as image transitions. Online Sprite Box Tool will aid in designing photos into sprites with the use of HTML5, CSS3 and jQuery.

Online Velocity Sketch Tool

This unique HTML 5 online canvas drawing tool can make creative, strange looking creations. Use this HTML5 tool to come up with something really awesome for your designs.

On/Off Flipswitch HTML5/CSS3 Generator

A beautifully designed and super-easy-to-use tool for generating your own HTML5/CSS3 “On and Off” flipswitches with optional animated transitions.

Online SVG to HTML5 Canvas Tool

Most vector art packages such as Inkscape and Illustrator can export SVG or Scalable Vector Graphics elements. This tool will allow you to convert SVG files into its HTML 5 canvas equivalent.

Online 3D Sketch Tool

This sketch tool uses the capability of HTML canvas in creating 3D drawing. The tool will allow you to draw with dashed lines and vibrate your drawing. You can also rotate the 3D canvas by dragging with the cursor horizontally while pressing down the Space Bar.

Online Pattern Generator Tool

This is an online tool that can be quite useful for creating header and page backgrounds. Designers can even use the tool to create heading backgrounds. The tool will allow you to try out any pattern you want in just a few seconds.

Online XRay Tool

Online XRay Tool allows designers to quickly view the details of various page elements that are present in any webpage with just a few clicks of the mouse. Just drag the website bookmarklet into your own book bookmarks, go to the webpage you like to analyze, click on the XRay bookmark and then click on any element of the page. The tool can take care of HTML5 elements like canvas and give you the design data you need.

Online HTML5 Audio Maker Tool

Among the best features of HTML5 is the introduction of the audio tag. This tool will help designers get familiar with the newest audio features being offered by HTML5. Even more interesting is the fact that designers can play, not just with audio, but also with video integration using this HTML5 online tool.

Group Discussion!

Please tell us what you think of these HTML5 tools by adding your comments below. And please, if you have considerable experience with an online HTML 5 tool not included in my list, let me know about it. You are also welcome to share this article to your friends and colleagues.

How to Turn jQuery Accordion into CSS3 Accordion

http://css.dzone.com/articles/how-turn-jquery-accordion-css3

Have you ever used ordinary accordion plugins in your projects? I would believe so! Most of them use javascript to work (or jQuery). Usually we use such plugins (accordions) to build a promo with images, a little photo gallery, or in case we have to build an advertisement with a list of product features. We did some research and came to the conclusion that sometimes we don’t need to use any script in order to build accordions. We can just use the power of CSS3. We can handle the OnClick event and use custom animation.

download sources

I prepared three versions with accordions. For the first demonstration we use jQuery to build an accordion. I selected liteAccordion jQuery plugin (http://nicolahibbert.com/demo/liteAccordion/) as an accordion plugin for out test purposes. See how it works:

Live Demo

That’s all, our own CSS3-based accordion is complete! You can check it in action:

CSS3 accordion demo

But that’s not all for today, as a bonus, I prepared a third demo for you with an animated accordion.

animated accordion demo

In order to do it I recommend disable onclick behavior, and apply new animation:

Conclusion

Now that is all for today. We have just created three different demos: the first one with jQuery, the second and the third – with pure CSS3. I hope that you like it. Good luck!