Posts Tagged Css Application

2013 Best Resources and Tools for Web Developers

Responsive Grid System

Responsive Grid System

Simple CSS framework for fast, intuitive development of responsive websites. Built using the ‘Mobile First’ approach, ‘clearfix’ for clearing floats, box-sizing: border-box for adding additional padding to elements

Responsive Grid System ?


Gumby 960 Responsive Grid Framework

Gumby 960 Responsive Grid Framework
Gumby 2 is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed

Gumby 960 Responsive Grid Framework ?


Box CSS Framework

Box CSS Framework

This solution is based on box-sizing: border-box and display:inline-block building principles.

Box CSS Framework ?


Foldy960 Framework

Foldy960 Framework

Foldy960 isn’t aiming to be Yet-Another-CSS-Framework and we hesitate to use the term “Boilerplate”. Foldy is just a little kit and some extra classes to get you going on making your 960.gs design responsive.

Foldy960 Framework ?


Css2Less

Css2Less

A ruby library which convert old CSS stylesheet into LESS dynamic stylesheet.

Css2Less ?


Codeanywhere Code Editor

Codeanywhere Code Editor

Codeanywhere is a code editor in a browser with an integrated ftp client, and all popular web formats are supported (HTML, PHP, JavaScript, CSS, and XML).

Codeanywhere Code Editor ?


Responsive IE6

Responsive IE6

Responsive IE6 ?


Dirty Markup

Dirty Markup

DirtyMarkup combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code

Dirty Markup ?


SnipSave

SnipSave

A simple and elegant code snippet tool for developers. Quickly and easily save pieces of code for reference and use later on. All of your code snippets are stored in one place, accessible from anywhere.

SnipSave ?


RWD Calculator

RWD Calculator

Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

RWD Calculator ?


The Responsinator

The Responsinator

The Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices. It does not precisely replicate how it will look, for accurate testing always test on the real devices.

The Responsinator ?


Timeline JS

Timeline JS

TimelineJS can pull in media from different sources. It has built in support for: Twitter, Flickr, Google Maps, YouTube, Vimeo, Dailymotion, Wikipedia, SoundCloud and more media types in the future.

Timeline JS ?


CSSO (CSS Optimizer)

CSSO (CSS Optimizer)

CSSO is a a CSS minimizer.

CSSO (CSS Optimizer) ?


Graphene

Graphene

Graphene is a realtime dashboard & graphing toolkit based on D3 and Backbone.

Graphene ?


Crossfilter

Crossfilter

Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser.

Crossfilter ?


CanJS

CanJS

CanJS is a MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy

CanJS ?


Fixie

Fixie

Fixie.js is an open source tool that automatically adds filler content to HTML documents.

Fixie ?


Foresight.js

Foresight.js

Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images.

Foresight.js ?


Webshims Library

Webshims Library

Webshims lib is a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable HTML5 features.

Webshims Library ?


dhtmlxSpreadsheet

dhtmlxSpreadsheet

dhtmlxSpreadsheet is an open source spreadsheet widget written in JavaScript and PHP that allows you to quickly add an Excel-like, editable data table on a web page. It is also available as a plugin for WP, Joomla, etc.

dhtmlxSpreadsheet ?


heatmap.js

heatmap.js

Heatmap.js is an open source JavaScript library that can be used for generating realtime heatmaps. It uses the power and flexibility of the HTML5 canvas element to draw heatmaps based on your data

heatmap.js ?


Kartograph

Kartograph

Kartograph is a simple and lightweight framework for building interactive map applications without Google Maps or any other mapping service. It was created with the needs of designers and data journalists in mind.

Kartograph ?


sigma.js

sigma.js

sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element.

sigma.js ?


Grunt

Grunt

Grunt is a task-based command line build tool for JavaScript projects.

Grunt ?


Live Scratchpad

Live Scratchpad

Evaluate your JavaScript functions in real-time _while_ editing.

Live Scratchpad ?


jPages

jPages

jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load.

jPages ?


dgrid

dgrid

A next-generation grid component that takes full advantage of modern browsers and object stores.

dgrid ?


SpritePad

SpritePad

With SpritePad you can create your CSS sprites within seconds

SpritePad ?


smoke.js

smoke.js

A framework-agnostic styled alert system for javascript.

smoke.js ?


Keymaster

Keymaster

Keymaster is a simple micro-library for defining and dispatching keyboard shortcuts.

Keymaster ?


Leaflet

Leaflet

Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps

Leaflet ?


stroll.js

stroll.js

A collection of CSS list scroll effects. Works in browsers with support for CSS 3D transforms including a special touch-enabled mode for iOS & Android 4.x.

stroll.js ?


Hammer.js

Hammer.js

Hammer.js is a JavaScript library for multi-touch gestures, supporting: tap, double tap, hold, drag, and transform.

Hammer.js ?


skrollr

skrollr

Skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position.

skrollr ?


Style Tiles

Style Tiles

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

Style Tiles ?

 


KineticJS

KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

KineticJS ?


Cutter.js

Cutter.js

Cutter.js truncates HTML code to limit its length.

Cutter.js ?


Socialite.js

Socialite.js

Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event!

Socialite.js ?


Opera Mobile Emulator

Opera Mobile Emulator

Opera Mobile Emulator ?


Morris.js

Morris.js

Good-looking charts shouldn’t be difficult

Morris.js ?


dynamo.js

dynamo.js

A dead-simple way to generate dynamic bits of HTML and add subtle effects to your content.

dynamo.js ?

 

 


URI.js

URI.js

URI.js ?


Retina.js

Retina.js

retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays

Retina.js ?


jq-idealforms

jq-idealforms

Ideal Forms is the ultimate framework for building and validating responsive HTML5 forms.

jq-idealforms ?


Spiffing CSS

Spiffing CSS

Spiffing allows you to write your CSS and stylesheets in conformance to proper British English (also known as correct English) grammar and spelling regulations.

Spiffing CSS ?

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →

Best and important jQuery Plugins, Every Web Developer / Designer must try it

Scrolling

jQuery Waypoints

Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

screenshot

skrollr

Parallax scrolling for the masses. Skrollr helps with all kinds of different scrolling effects including color shifts, transforms and more.

screenshot

DataTables

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

screenshot

arbor.js

A graph visualization library using web workers and jQuery

screenshot

Layout

Wookmark jQuery Plugin

A dynamic column grid.

screenshot

jQuery Masonry

A dynamic layout plugin for jQuery The flip-side of CSS floats

screenshot

Isotope

Isotope: An exquisite jQuery plugin for magical layouts

screenshot

FitVids.JS

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

screenshot

gridster.js

Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns.

screenshot

Freetile.js

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout.
screenshot

Text

jQuery TextExt Plugin

TextExt’s modular design allows you easily turn a standard HTML text input into a wide range of modern, tailored to your needs input field without bloating your source code

screenshot

Jeditable

Edit In Place Plugin For jQuery

screenshot

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

screenshot

Cool UI

jQuery Knob demo

Nice, downward compatible, touchable, jQuery dial

screenshot

noty – A jQuery Notification Plugin

Noty is a jQuery plugin that makes it easy to create alert, success, error, warning, information and confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue.

screenshot

PageSlide

A jQuery plugin which slides a webpage over to reveal an additional interaction pane

screenshot

jQuery Collapse

This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure.

screenshot

Avgrund

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations

screenshot

jQuery One Page Navigation

Smooth scrolling navigation and animation for single page sites. Super simple, incredibly handy.

screenshot

jqPagination

jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application.

screenshot

jQuery Joyride Feature Tour Plugin

Joyride is extremely flexible and lets you take control of how people interact with your tour. We programmed it to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images. Now let’s see just how easy it is to take your first ride without getting the fuzz involved.

screenshot

Tooltips

jQuery PowerTip

PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience.

screenshot

tipsy

Tipsy is a jQuery plugin for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.

screenshot

Slideshows, Images & Sliders

jQuery Slider Shock

The most complete responsive jQuery / WordPress slider.

screenshot

Backstretch

a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element

screenshot

jQuery Anystretch

Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element. The image will stretch to fit the page/element, and will automatically resize as the window size changes.

screenshot

jQuery Lightbox

A simple lightbox based on prototype and scriptaculous.

screenshot

FlexSlider 2

An awesome, fully responsive jQuery slider toolkit.

screenshot

ColorBox

A lightweight customizable lightbox plugin for jQuery

screenshot

WOW Slider

WOW Slider is a responsive jQuery image slider with amazing visual effects (Rotate, Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear) and tons of professionally made templates.

screenshot

Miscellaneous

Timeago

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps

screenshot

jQuery Validation

The jQuery Validation Plugin provides validation for your existing forms.

screenshot

jQuery File Upload Demo

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.

screenshot

jQuery Instagram

A simple jQuery plugin to show a list of Instagram photos.

screenshot


MotionCAPTCHA

MotionCAPTCHA is a jQuery CAPTCHA plugin, based on the HTML5 Canvas requiring users to sketch the shape they see in the canvas in order to submit a form.

screenshot

jQuery Transit

Super-smooth CSS transitions & transformations for jQuery

screenshot

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →

Helpful Tools for Web developers – every web developer must try it

Web Development will take more time to develop a website. so i like to help web developers to do t heir job in easiest and fastest way. i hope this article will help to every web developers even for web designer also

 

Bland Text Generator – This handy tool helps you create dummy text for all your layout needs

 

 

Adobe BrowserLab is a browser compatibility service that provides designers exact renderings of their pages on all major web browsers

 

CSS Typeset is an online CSS generator for the text.

 

Font comparer – Just type in a few words and see how it will look like in different fonts.

 

SpriteBox – SpriteBox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image.

 

CopyPaste Character – Great and simple tool for copy and paste web special characters.

 

CSSWrap – A pretty cool CSS text to path generator.

 

PunyPNG – PunyPNG is an impage compressor for designers and developers. It can reduces the file size of your images without any loss of quality.

 

Pingdom – Pingdom test the load time of your website, analyze it and find bottlenecks.

 

Loads.in – Loads.in calculate the loading time of your website.

 

I hope you will enjoy this post, please share your comments…

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →

.htaccess code for web site speed optimization

# Enable GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</ifmodule>
# Expires Headers – 2678400s = 31 days
<ifmodule mod_expires.c>
  ExpiresActive On
  ExpiresDefault “access plus 1 seconds”
  ExpiresByType text/html “access plus 0 seconds”
  ExpiresByType image/gif “access plus 2678400 seconds”
  ExpiresByType image/jpeg “access plus 2678400 seconds”
  ExpiresByType image/png “access plus 2678400 seconds”
  ExpiresByType text/css “access plus 518400 seconds”
  ExpiresByType text/javascript “access plus 2678400 seconds”
  ExpiresByType application/x-javascript “access plus 2678400 seconds”
</ifmodule>
# Cache Headers
<ifmodule mod_headers.c>
  # Cache specified files for 31 days
  <filesmatch “\.(ico|flv|jpg|jpeg|png|gif|css|swf)$”>
  Header set Cache-Control “max-age=2678400, public”
  </filesmatch>
  # Don’t cache HTML
  <filesmatch “\.(html|htm)$”>
  Header set Cache-Control “max-age=0, private, must-revalidate”
  </filesmatch>
  # Cache PDFs for a day
  <filesmatch “\.(pdf)$”>
  Header set Cache-Control “max-age=86400, public”
  </filesmatch>
  # Cache Javascripts for 31 days
  <filesmatch “\.(js)$”>
  Header set Cache-Control “max-age=2678400, private”
  </filesmatch>
</ifmodule>

Other tips to optimize your website using .htaccess snippets

Force trailing slash

Prevent Image hotlinking

Redirect mobile devices

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →