Feb
Better Responsive Data Tables
Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
While working on a responsive site or app, Responsive Data Tables are critical and there are many approaches available but nothing worked for me. Few of them are listed:
- http://css-tricks.com/responsive-data-tables/
- http://elvery.net/demo/responsive-tables/
- http://themergency.com/footable/
- http://mobifreaks.com/coding/responsive-data-tables-jquery/
Some of them rearranges the data, some hides the columns and some gives freedom to have all the data with a scrollbar or some simply just don’t look good and hard to read when viewed on smaller screens. So I decided to work on my own version.

Better Responsive Data Tables is my version of responsive data tables, I divide every table row into a separate data block and rearranges the information.
The code has no license, free to use, attribution not required but appreciated.
Categories:
Tags:
Tags: Responsive
Jan
268 Free Sleek Vector Icons (Webfont) For Twitter Bootstrap: Elusive Icons
Elusive Icons is a collection of 268 free vector icons focused for Twitter Bootstrap.
It’s actually a webfont that can be used with any of your projects. Bootstrap-based, Foundation-based or even your custom projects. It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other “attribution” claws.
![]()
Categories:
Tags:
Tags: Webfont
Jul
Rapid Web App Development Kit: Groundwork
Groundwork uses best practice to create a foundation for building web applications. Promoting an OOCSS approach with it’s powerful abstraction classes as well as module pattern scaffolding for JavaScript.

With these powerful classes you can quickly build slick interfaces while writing a lot less code. Bare-bones sample module pattern to keep your JS nicely organised. Bootstrapped with jQuery, but vanilla enough to adapt to your preferred library.
Categories:
Tags:
Tags: CSS, Javascript
Jul
Make A Pie Chart Using HTML5 Canvas Element: Easy Pie Chart
Easy pie chart is a lightweight jQuery plugin that uses HTML5 canvas element to render and animate simple pie charts for single values. These chars are highly customizable and very easy to implement.
You can pass number of options to the initialize function to set a custom behavior and look for the plugin.

Categories:
Jul
All About The Keyboard – Handling Keyboard Shortcuts In JavaScript: Mousetrap
Mousetrap is a simple library for handling keyboard shortcuts in Javascript. Mousetrap is a standalone library with no external dependencies. It weighs in at around 1.5kb minified and gzipped.
It has support for keypress, keydown, and keyup events on specific keys, keyboard combinations, or key sequences.

Categories:
Tags:
Tags: Javascript, mouse
Jun
Front End Development Kit For Building Themes and Website Templates: Pondasee
Pondasee is NOT a CSS framework, it is only our front-end development starter kit combined with the power of SCSS & Compass to build theme and website templates. If you want to use this project as your starting point, you need to know basic knowledge of Compass and Sass.
Pondasee is made to help front-end or developer to accelerate their work-flow in making web application. Use Pondasee, it will be perfect for your starting point.

Pondasee made with Compass dan SCSS language. Nested rules, variables, mixins, selector inheritance in Scss/Sass makes coding CSS faster, more efficient and your stylesheets easier to organize and maintain.
Categories:
May
Simple HTML CSS DropDown Menu with jQuery: ddSlick
ddSlick is a free light weight jQuery plugin that allows you to create a custom HTML CSS dropdown menu with images and description.

Major Features
- Adds images and description to dropdown menu
- Uses JSON to populate the dropdown options
- Uses minimum CSS and no external stylesheets to download
- Supports callback functions on selection
- Works as good even without images or description
Categories:
May
Create Responsive Image Maps With jQuery rwdImageMaps
rwdImageMaps is a jQuery plugin for creating Responsive Image Maps. It allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize.

Categories:
Tags:
Tags: jQuery, Responsive
May
Password Strength and Quality Check Meter: Complexify jQuery Plugin
Complexify is a jQuery plugin for checking password strength and quality. It aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons.

Complexify supports Unicode and will add appropriate complexity for the size of character set included in a password.
It’s a client-side validation and author recommends implementing a check for the minimum length on the server, but plans to have a complementary server-side library that will enable developers to have a consistent policy set up throughout their service.
Categories:
May
Easy HTML Table Styling: Tablecloth.js
Either you’re redesigning a large site or working on a completely new one… styling html tables is typically tedious and time-consuming. If you’d rather spend your valuable time making the other elements of your site pretty, use Tablecloth.js to do the heavy lifting.
Tablecloth.js is a CSS and JS bootstrap to easily style and manipulate html data tables along with some simple customizations.

Categories:
Tags:
Tags: CSS, Html, Javascript






