HTML5
Resources for anything HTML5 related including HTML5 templates.


Material Design Widgets

  • Posted By: Jason Taetsch
  • ...

Material design is a visual language sparked by the design team at Google in an attempt to create a new set of design standards to implement across Google’s many platforms. Material design draws upon solid design principals of the past while incorporating the latest technologies and advancements in HTML and CSS. These material design UI widgets are a perfect starting point for updating the buttons, visualizations and other elements of your next project. The UI widgets are available in PSD format for quick and easy editing.

materialdesign

Flexible Grid System

  • Posted By: Jason Taetsch
  • ...

Grid systems help designers organise the many elements on a webpage by bringing order and structure to complex layouts. Flexible.gs by Dogukan Güven Nomak is a lightweight and flexible grid system designed to work seamlessly within other frameworks like bootstrap or foundation, or incorporated into a custom stylesheet. The Flexible Grid System is based off a customizable 12-column layout  and also includes a number of built-in classes to target the many different device widths found across the modern web. Versions of Flexible.gs are available for both SASS and LESS preprocessors as well as Stylus.

flexiblegs

Svidget.js for SVGs

  • Posted By: Jason Taetsch
  • ...

Scalable vector graphics or SVGs are lightweight, easy to modify and scale in size without losing quality.  For these reasons they can be an ideal choice developers and designers looking to add visual elements and slick functionality without overloading the size of your site. Since SVGs are really just XML objects, they can be edited, manipulated and animated on the fly unlike other graphic formats like .PNG. The team at svidget.js expand on these core features to deliver interactive widgets ready to be embedded on any website.  Svidget.js only creates a framework for the SVG files rather than injecting content to the DOM to avoid conflict with any other libraries or widgets already in use.

svidget

Scroll-to-Top Elevator.js

  • Posted By: Jason Taetsch
  • ...

Scrolling back to the top of a web page has never been a favorite experience for users. After they’ve read through all your content, there’s no reason to force the user to perform the tedious task of scrolling back up to the top menus and content. Though on-page anchor links have been around for years, the team at elevator.js has come up with an old-school scroll-to-top functionality that mimics the experience of riding in an elevator, complete with light-music and sound effects. Rather than jumping to the top, elevator.js smoothly returns the user to the top of the page with a slightly increasing speed and a soothing soundtrack. Elevator.js is a simple stand alone-library that does not require jQuery to incorporate into your next project.

elevator

Select or Die

  • Posted By: Jason Taetsch
  • ...

The design is in the details. Unfortunately designers are often forced to hand over the reigns to the native browser presets for “select” and “option” elements. The Select or Die plugin is a highly configurable jQuery-based option for taking the stylistic reigns back from the clunky browser style rules. Select or Die attaches custom CSS attributes to easily roll your own style rules as you would any other HTML5 element. Additional features make it easy to configure placeholders for the select elements, apply unique styles to different elements and even treat the various options in the drop-down menu as external links to other pages. If you are looking for more control of your design, Select or Die is a great place to start.

selectordie