Useful JavaScript And jQuery Tools, Libraries, Plugins

Advertisement

The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, analyzed, curated and feature latest useful resources for your convenience, so you can use them right away or save them for future reference.

Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use HTML5, JavaScript, or JavaScript-libraries as well. Thanks to all featured designers and developers for inspiring, hard work.

CSS Techniques

Rotational Sliders1
Eric Meyer shares six of his animated transforms that are capable of sliding around to a particular extent with non-centered transform origins.

Rotational Sliders2

Generating Organic Randomness with Prime Numbers and CSS3
At first, you may be wondering why the heck is Alex Walker talking about cicada’s and Web design. Once taking a closer look, a sort of connection between the two evolves and a ‘cicada principle’ is born.

The Cicada Principle and Why It Matters to Web Designers4

CSS3 3D Hologram5
Being inspired by holographic effects that can be achieved with HTML/CSS, Hakim El Hattab has developed his own 3D box which alters perspective depending on device orientation. Note that this requires a webkit browser and has only been tested on iPhone. Also make sure to visit more of Hakim’s CSS/HTML5 experiments6.

Hakim / CSS3 3D Hologram7

Checkerboard, striped & other background patterns with CSS3 gradients8
You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more. Also, check out Lea’s CSS3 Patterns Gallery</a.

Checkerboard, striped & other background patterns with CSS3 gradients9

CSS3 Keyboard10
Click in the box and start typing on your computer’s keyboard. Cleverly developed by Dustin Cartwright and Dustin Hoffman. You’ve got to respect the amount of time and effort which went into producing this demo.

Keyboard11

CSS3 Progress Bars12
A couple of nice progress bars created by Chris Coyier that use no images — just CSS3 fancies. In browsers that do not support CSS3, these progress bars will look more simplified.

CSS3 Progress Bars | CSS-Tricks13

Hover on “Everything But”14
A tutorial by Chris Coyier which shows us how easy adding a hover state to an element can be. In this case, the hover state is applied to everything but the element actually being hovered over.

Hover on “Everything But”15

Creating a Sphere With 3D CSS16
With CSS3’s 3D trans­forms it’s possible to cre­ate a sphere-like object, albeit with many elements. Paul Hayes shares his version of a 3D CSS sphere (works in the latest Safari and iOS) and provides us with the coding needed.

Creating a sphere with 3D CSS17

CSS3 Planetarium18
This demo highlights leading edge CSS3 and HTML5 features that Mozilla Firefox and the open web community push into modern Web browsers.

Firefox 4 Demos: Awesome CSS3 Planetarium19

Natural Object-Rotation with CSS3 3D20
A tutorial by Dirk Weber that teaches us how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. By adding some Javascript, we can make the object freely rotatable in 3D space. And as we will enhance our Javascript with some touch-interactivity, the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad.

Natural Object-Rotation with CSS3 3D21

CSS Drop-Shadows Without Images22
Nicolas Gallagher shares presents his CSS drop-shadows without any images.

CSS drop-shadows without images23

Incrementable Length Values in Text Fields24
Lea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it.

Incrementable length values in text fields25

Beveled Corners & Negative Border-Radius with CSS3 Gradients26
Beveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10.

Beveled corners & negative border-radius with CSS3 gradients27

Flexible Height Vertical Centering With CSS, Beyond IE728
Roger Johansson shares his thoughts on how to improve centering an element both horizontally and vertically with the display:table alternative.

Flexible height vertical centering with CSS, beyond IE729

Coding up a semantic, lean timeline30
This article tells you how to create a semantic lean timeline.

Coding up a semantic, lean timeline31

CSS Border Tricks with Collapsed Boxes32
These border tricks tricks will help you to display content outside of the content box, over borders, without the use of images, CSS3 gradients or extraneous markup.

CSS Border Tricks with Collapsed Boxes33

Quick Tip: Nonintrusive CSS Text Gradients34
Jeffrey Way shows some ways for creating pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.

Quick Tip: Nonintrusive CSS Text Gradients35

Bokeh with CSS3 Gradients36
Divya Manian uses the CSS gradients and shows the results of his work on a project which uses a bunch of circles as a decorative background.

Bokeh with CSS3 Gradients37

Different Transitions for Hover On / Hover Off38
Chris Coyier tries to acchieve “different transitions on mouseenter and mouseleave”, but he isn’t using JavaScript here; we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates.

Different Transitions for Hover On / Hover Off39

Styling children based on their number, with CSS340
Lea Verou shows how to style children of elements based on their total number (that is, their total count).

Styling children based on their number, with CSS341

CSS Modal42
Using CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more special. The problem: when you hit the “Back”-button after the modal has popped up and was closed, you’ll see the modal again. But maybe you’ll come with a way to fix it?

CSS Modal43

Rotating Feature Boxes44
The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation.

Rotating Feature Boxes45

When and How to Visually Hide Content46
Visually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). Other exaples about using the Visually Hide Content are shown in this article.

When and How to Visually Hide Content47

How to avoid common CSS3 mistakes48
The new features of CSS3 bring with them complexity and new things for us to screw up. This article will help keep us in check as we start using these new features.

How to avoid common CSS3 mistakes | Feature | .net magazine49

Introduction to CSS Escape Sequences50
Escape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules. In this article Mert Tol shows how to use these sequences.

Introduction to CSS Escape Sequences | Mert TOL51

Wrapping Long URLs and Text Content with CSS52
To wrap long URLs, strings of text, and other content, you can just apply a carefully crafted chunk of CSS code to any block-level element .

CSS53

CSS Generated Content54
Trevor Davis shows on some examples what you can do with the CSS generated content.

My New Best Friend: CSS Generated Content | Viget Inspire55

Controlling width with CSS3 box-sizing56
An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not. It makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.

Controlling width with CSS3 box-sizing57

Revisit Hardboiled CSS3 Media Queries58
Shi Chuan takes a close look at boilerplates and helps us understand the math we need to tweak the width required for a good resolution to any particular device.

iPad Orientation CSS59
Keith Chu revises Cloud Four’s work and finds a way to alleviate extra HTTP requests, not iPad-specific as well as lack of reusability. In this post, he shares with us his proposed revision to the iPad orientation CSS.

CSS Value Lengths, Times, Frequencies and Angles60
In this article the authors go over all the math type units that can be applied as property values in CSS.

CSS Tools

320 and up61
‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

320 and up62

CSS3 Generator – By Eric Hoffman and Peter Funk63
This generator was proudly designed by Eric Hoffman and coded by Peter Funk.

CSS3 Generator - By Eric Hoffman and Peter Funk64

CSS Pattern Generator65
Patternify is a simple pattern generator that enables you to not only build your patterns online, but export them with the base64 code, so you don’t even need an image file anymore. Just include the code in your CSS and you’re ready to go. Created by Sacha Greif.

CSS Pattern Generator66

Griddle.it – Web page alignment made easy67
A clean and simple way to help align your layouts. No complex grid frameworks necessary.Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

Griddle.it - Web page alignment made easy68

The 1140px Grid: Fluid down to mobile69
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

The 1140px Grid: Fluid down to mobile70

Fighting the @font-face FOUT71
Paul Irish’s 2011 update for the @font-face FOUT issue. Good news: Firefox 4 has no FOUT, IE9 does, and FOUT-b-GONE72 will help you out with that.

FOUT-b-gone73

CSS3 Github Buttons74
CSS3 Buttons is a simple framework for creating good-looking GitHub style button links.

CSS3 Buttons | Simple CSS3 framework for creating GitHub style button links75

CSS3 Facebook Buttons76
CSS3 Facebook Buttons

CSS3 Facebook Buttons77

Minimee78
On the Internets, speed is everything – which means that when it comes to CSS & Javascript files, size DOES matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files svelte.

Adapt.js - Adaptive CSS79

Live.js80
one script closer to designing in the browser.

Adapt.js - Adaptive CSS81

Bootstrap.less82
Bootstrap is a pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.

Adapt.js - Adaptive CSS83

Animatable: Create CSS3 animations and advertising for Webkit browsers84
Animatable is the easy way to create CSS3 animations and advertising for Webkit browsers on any platform or device — including Android, BlackBerry, iOS and WebOS.

Animatable | Create CSS3 animations and advertising for Webkit browsers85

Ceaser: CSS Easing Animation Tool86
Ceaser is an CSS Easing Animation Tool.

Ceaser - CSS Easing Animation Tool87

Shower88
This is provided without warranty, guarantee, or much in the way of explanation.

Shower89

CSS Pivot90
This tool allows you to add CSS styles to any website, and share (and adjust) the result with a short link.

CSS Pivot91

Roots WordPress Theme92
Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.

Roots WordPress Theme93

Free Online CSS3 Typeset Style Generator94
An advanced generator of CSS buttons; the tools allows you to define font and color variations, shadows, borders, corners etc.

Free Online CSS3 Typeset Style Generator95

CSSPrefixer96
You hate writing vendor prefixes for all browsers? The CSSPrefixer does it for you.

CSSPrefixer97

Type-a-file98
This tool will give your Web typography a head start. Type-a-file is essentially a small collection of CSS stylesheets with heavy focus on rich and beautiful typography. The tool uses Typekit to preview the stylesheets, so if you have a Typekit-account, you could purchase the font license and have exact the same typography on your website.

Type-a-file99

A Best Practice Baseline for Your Mobile Web App100
Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

HTML5boilerplate101

Code Beautifier102
This tool allows you to format, clean up and optimize your stylesheets.

Adapt.js - Adaptive CSS103

Markup Generator104
Markup Generator is a simple tool created for HTML/CSS coders that are tired of writing boring frame code at the very beginning of slicing work.

Adapt.js - Adaptive CSS105

CSS Sprite Generator106
This tool allows you to create and maintain your CSS sprites.

Adapt.js - Adaptive CSS107

Respond108
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Adapt.js – Adaptive CSS109
Adapt.js simply checks the browser width, and serves only the CSS that is needed, when it is needed.

Firmin, a JavaScript animation library using CSS transforms and transitions110
Firmin is a JavaScript animation library that uses CSS transforms and transitions to create smooth, hardware-accelerated animations.

Command-line CSS spriting111
The author shows, how to create CSS sprites from the command line alone.

Last Click

Code Standards112
This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.

Code Standards113

How to Manage CSS Explosion114
A very useful thread on StackOverflow on how to keep CSS files organized and clean.

How to Manage CSS Explosion115

(vf) (ik)

Footnotes

  1. 1 http://meyerweb.com/eric/css/tests/css3-trans-an/transform-sliders.html
  2. 2 http://meyerweb.com/eric/css/tests/css3-trans-an/transform-sliders.html
  3. 3 http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/
  4. 4 http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/
  5. 5 http://hakim.se/experiments/css3-hologram
  6. 6 http://hakim.se/experiments
  7. 7 http://hakim.se/experiments/css3-hologram
  8. 8 http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
  9. 9 http://leaverou.me/css3patterns/
  10. 10 http://dl.dropbox.com/u/921159/Keyboard/page.html#
  11. 11 http://dl.dropbox.com/u/921159/Keyboard/page.html#
  12. 12 http://css-tricks.com/css3-progress-bars/
  13. 13 http://css-tricks.com/css3-progress-bars/
  14. 14 http://css-tricks.com/hover-on-everything-but/
  15. 15 http://css-tricks.com/hover-on-everything-but/
  16. 16 http://www.paulrhayes.com/2011-02/creating-a-sphere-with-3d-css/
  17. 17 http://www.paulrhayes.com/2011-02/creating-a-sphere-with-3d-css/
  18. 18 http://hacks.mozilla.org/2011/03/css3-planetarium/
  19. 19 http://hacks.mozilla.org/2011/03/css3-planetarium/
  20. 20 http://www.eleqtriq.com/2010/11/natural-object-rotation-with-css3-3d/
  21. 21 http://www.eleqtriq.com/2010/11/natural-object-rotation-with-css3-3d/
  22. 22 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  23. 23 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  24. 24 http://leaverou.me/2011/02/incrementable-length-values-in-text-fields/
  25. 25 http://leaverou.me/2011/02/incrementable-length-values-in-text-fields/
  26. 26 http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
  27. 27 http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
  28. 28 http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/
  29. 29 http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/
  30. 30 http://csswizardry.com/2011/03/coding-up-a-semantic-lean-timeline/
  31. 31 http://csswizardry.com/2011/03/coding-up-a-semantic-lean-timeline/
  32. 32 http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes
  33. 33 http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes
  34. 34 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-nonintrusive-css-text-gradients/
  35. 35 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-nonintrusive-css-text-gradients/
  36. 36 http://nimbupani.com/bokeh-with-css3-gradients.html
  37. 37 http://nimbupani.com/bokeh-with-css3-gradients.html
  38. 38 http://css-tricks.com/different-transitions-for-hover-on-hover-off/
  39. 39 http://css-tricks.com/different-transitions-for-hover-on-hover-off/
  40. 40 http://leaverou.me/2011/01/styling-children-based-on-their-number-with-css3/
  41. 41 http://leaverou.me/2011/01/styling-children-based-on-their-number-with-css3/
  42. 42 http://www.paulrhayes.com/2011-03/css-modal/
  43. 43 http://www.paulrhayes.com/2011-03/css-modal/
  44. 44 http://css-tricks.com/rotating-feature-boxes/
  45. 45 http://css-tricks.com/rotating-feature-boxes/
  46. 46 http://designfestival.com/when-and-how-to-visually-hide-content/
  47. 47 http://designfestival.com/when-and-how-to-visually-hide-content/
  48. 48 http://www.netmagazine.com/features/how-avoid-common-css3-mistakes
  49. 49 http://www.netmagazine.com/features/how-avoid-common-css3-mistakes
  50. 50 http://www.merttol.com/articles/web/code/introduction-to-css-escape-sequences.html
  51. 51 http://www.merttol.com/articles/web/code/introduction-to-css-escape-sequences.html
  52. 52 http://perishablepress.com/press/2010/06/01/wrapping-content/
  53. 53 http://perishablepress.com/press/2010/06/01/wrapping-content/
  54. 54 http://www.viget.com/inspire/css-generated-content/
  55. 55 http://www.viget.com/inspire/css-generated-content/
  56. 56 http://www.456bereastreet.com/archive/201104/controlling_width_with_css3_box-sizing/
  57. 57 http://www.456bereastreet.com/archive/201104/controlling_width_with_css3_box-sizing/
  58. 58 http://www.blog.highub.com/mobile-2/revisit-hardboiled-css3-media-queries/
  59. 59 http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised
  60. 60 http://www.standardista.com/css3/css-values-lengths-times-frequenc-angles
  61. 61 http://stuffandnonsense.co.uk/projects/320andup/
  62. 62 http://stuffandnonsense.co.uk/projects/320andup/
  63. 63 http://www.css3.me/
  64. 64 http://www.css3.me/
  65. 65 http://www.patternify.com/
  66. 66 http://www.patternify.com/
  67. 67 http://griddle.it/
  68. 68 http://griddle.it/
  69. 69 http://cssgrid.net/
  70. 70 http://cssgrid.net/
  71. 71 http://paulirish.com/2009/fighting-the-font-face-fout/#update2011
  72. 72 http://www.extensis.com/en/WebINK/fout-b-gone/
  73. 73 http://www.extensis.com/en/WebINK/fout-b-gone/
  74. 74 http://css3buttons.michaelhenriksen.dk/
  75. 75 http://css3buttons.michaelhenriksen.dk/
  76. 76 http://nicolasgallagher.com/lab/css3-facebook-buttons/
  77. 77 http://nicolasgallagher.com/lab/css3-facebook-buttons/
  78. 78 http://johndwells.com/software/minimee
  79. 79 http://johndwells.com/software/minimee
  80. 80 http://livejs.com/
  81. 81 http://livejs.com/
  82. 82 http://markdotto.com/bootstrap/
  83. 83 http://markdotto.com/bootstrap/
  84. 84 http://animatable.com/
  85. 85 http://animatable.com/
  86. 86 http://matthewlein.com/ceaser/
  87. 87 http://matthewlein.com/ceaser/
  88. 88 http://pepelsbey.github.com/shower/#Cover
  89. 89 http://pepelsbey.github.com/shower/#Cover
  90. 90 http://www.csspivot.com/
  91. 91 http://www.csspivot.com/
  92. 92 http://www.rootstheme.com/
  93. 93 http://www.rootstheme.com/
  94. 94 http://www.sciweavers.org/i2style
  95. 95 http://www.sciweavers.org/i2style
  96. 96 http://cssprefixer.appspot.com/
  97. 97 http://cssprefixer.appspot.com/
  98. 98 http://type-a-file.com/
  99. 99 http://type-a-file.com/
  100. 100 http://html5boilerplate.com/mobile/
  101. 101 http://html5boilerplate.com/mobile/
  102. 102 http://codebeautifier.com/
  103. 103 http://codebeautifier.com/
  104. 104 http://lab.xms.pl/markup-generator/
  105. 105 http://lab.xms.pl/markup-generator/
  106. 106 http://spritegen.website-performance.org/
  107. 107 http://spritegen.website-performance.org/
  108. 108 https://github.com/scottjehl/Respond
  109. 109 http://adapt.960.gs/
  110. 110 http://extralogical.net/projects/firmin/
  111. 111 http://www.phpied.com/command-line-css-spriting/
  112. 112 http://na.isobar.com/standards/
  113. 113 http://na.isobar.com/standards/
  114. 114 http://stackoverflow.com/questions/2253110/how-to-manage-css-explosion
  115. 115 http://stackoverflow.com/questions/2253110/how-to-manage-css-explosion

↑ Back to top Tweet itShare on Facebook

Soh Tanaka, based in Los Angeles, CA, is a passionate front-end developer and designer who recently launched a CSS Gallery called Design Bombs. He specializes in CSS driven web design with an emphasis on usability and search engine optimization. For more front-end Web development tutorials, check out his Web design blog.

Advertising
  1. 1

    Marcin Dziewulski

    April 7, 2011 7:05 am

    I would like to suggest MobilyMap plugin: http://playground.mobily.pl/jquery/mobily-map.html – jQuery plugin that can create a Google Maps-like, draggable interface from any image. Cheers!

    0
    • 2

      I just searched the entire post for a map script and didn’t see any so thanks for posting this.

      0
  2. 3

    Sean McCambridge

    April 7, 2011 7:14 am

    Great post. I’m going to bookmark this so I remember where to find these js tools. With so many choices, I’d love to see some interviews with prominent js developers to see what they’re using at the moment individually.

    0
  3. 4

    Nice roundup ;) I’ve been using Highcharts recently and would advise to anyone in need for simple yet great looking data visualizations.
    Here’s are some things we did with Highcharts:
    http://show.askia.com/askiavistashowcase/HighCharts.aspx
    http://show.askia.com/AskiaVistaShowCase/dashboard.aspx

    Lettering.js also looks real nice ;)

    0
  4. 6

    You know you’re good, but I think you guys are simply amazing. Keep pushing us into better web developments with your libraries, designs, tips and tricks.

    Kind regards,
    VirtualFlavius

    0
  5. 7

    Joseph McCullough

    April 7, 2011 7:52 am

    I’m surprised JSHint isn’t on here.

    0
  6. 8

    Thanks!
    But I also used this list http://tobundle.com/PS15b

    0
  7. 9

    Regarding the poll question (more roundups like this in the future?) I say yes, but only if this sample is representative of what’s to come. Everything in this roundup is either best of breed or new+compelling+innovative. No jQuery Slider roundups, please. ;-)

    0
  8. 10

    I’m a JS junkie so this list is something I’m going to keep in mind. Thank you!

    0
  9. 11

    Absolutely fantastic post

    0
  10. 12

    Minimee is an ExpressionEngine add-on only. To use it elsewhere you’d have to rip out the included, third-party libraries and repurpose them. Perhaps worth mentioning.

    0
  11. 14

    Elf M. Sternberg

    April 7, 2011 11:03 am

    Hey, no love for ProcessingJS? I mean, seriously, is there anything John Resig can’t do?

    0
    • 15

      processing-js is mint. Definitely worth checking out! I’d love to see more developers take advantage of this library for animations inside a design, like the header on processing-js’ website.

      0
  12. 16

    Lettering.js is an incredibly useful script. Works great when you need to kern a typographical logo.

    0
  13. 17

    Awesome post could spend all night looking through them. Definitely want to find some projects to use some of these!

    0
  14. 18

    Nothing at all for Mootools, such a shame ;)

    0
  15. 19

    amazing collection,
    i’m looking for a js framework to do some calculation or simple maths, any idea ?

    0
  16. 22

    nice list, i fall in love with popcorn.js ;)

    0
  17. 23

    Love these libraries so much. Very useful. Thanks SM!

    0
  18. 24

    Good collections. Now I know where to look for JS libraries :)
    Nice work!!!

    0
  19. 25

    These kind off posts are the most usefull too me. Thanks SM

    0
  20. 26

    Amazing collection, must bookmarked for every developer. many thanks

    0
  21. 27

    Best article ever on SmashingMagazine !!!

    I was waiting for this kind of articles since years !!!

    0
  22. 28

    Thank`s for great article :)

    0
  23. 29

    Great list, thanks for the hard work compiling it.

    Maybe it’s just my age, but I do find these lists a bit overwhelming. There’s just too much good stuff out there.

    Maybe it would feel less overwhelming if there was a table of contents at the top? Perhaps get a little sausage.js action on the go too? I’m not sure what the answer is, however I do have a tendency to abandon reading posts like this — as good as they are.

    Cheers,
    Paul

    0
  24. 30

    wonderful list of plugins and js stuff.. :)

    0
  25. 31

    The idea of Less makes me feel very nervous, to say the least. Why? Because JavaScript is the layer for behaviour, and CSS is the layer for presentation. Less looks to be putting presentation functionality into the wrong layer.

    Why is this a problem? Two main reasons. 1) It’s violating the separation of concerns, which could lead to confusion down the line when some future designer comes into a project and can’t find the presentation data in the CSS because it’s actually implemented in JavaScript. 2) A JavaScript error in some other script on your page could break the presentation that depends on Less, leaving your page looking anything from rather odd to completely broken, depending on how dependant on Less your design is. And that’s saying nothing for web crawlers, non-visual browsers and other user agents that don’t know JavaScript or have it turned off.

    While it would be nice if CSS was more featureful (though it does support some limited variables as of more recent versions such as counters) I still feel using JavaScript to fill the gaps isn’t the way to go.

    0
  26. 32

    Wellington Villegas

    April 8, 2011 5:22 am

    Everytime i get amazing tools here.

    Thanks Smashing Magazine

    0
  27. 33

    Two other tools that have helped me tremendously:

    This JS gives you the ability to write specific CSS code for each operating system and each browser.
    http://rafael.adm.br/css_browser_selector/

    corrects standards deficiencies in IE:
    http://dean.edwards.name/

    0
  28. 34

    You might want to revise your list and remove the april fools jokes *cough* JavaScript Library Boilerplate *cough*

    0
  29. 35

    Awesome set of libraries and plugins. Thanks for sharing.

    0
  30. 36

    Neat Post … Bookmarked . Keep em coming SM .

    0
  31. 37

    Hunter Hastings

    April 9, 2011 10:20 am

    Fantastic post full of quality stuff.

    HighCharts is a great inclusion. I just started using them the other day for some projects. Clean, powerful, and all around aweosme.

    0
  32. 38

    What’s wrong with jQuery and Javascript, and writing your own code?

    It seems like half my business these days is cleaning up sites built by other developers, who each use some different framework that I have to decipher in order to unbreak the mess they made. The work might be half my business, but it seems to eat up 80% of my time.

    I don’t feel like there is anything I can’t do with jQuery and some time and energy. Is our industry just so overloaded with a lack of creative problem solvers that all of these are necessary?

    I am sure I was probably of the same mind when jQuery was new – at least new to me. But it is so widely in use, and exists on user’s computers via the various CDN hosts that it exists already on most people’s computers these days, which cuts down on load time and speed of site, as well as server load and http requests for the client’s web server.

    Sites like this shove dozens upon dozens of articles at us about how to improve speed, and how adding our fun little gizmos to sites don’t improve overall user experience and decrease the usability of a site, then follow up with articles like these that drive people in the complete opposite direction.

    Ages ago, some wizened old fool said “Too many cooks spoil the soup”. This axiom holds true still in the technology world.

    0
  33. 39

    Great List!

    I would like to recommend jQuery Smart Autocomplete (http://laktek.com/2011/03/03/introducing-jquery-smart-autocomplete/) plugin to this list.

    Creating sophisticated, custom auto complete fields have become easy with this plugin.

    0
  34. 40

    Simply WOW.Great compilation. Thanks!

    0
  35. 41

    Someone knows about a good or similar implementation for LightBox in jQuery?

    Thanks!

    0
  36. 42

    good article, i like it. thank you very much . hoho

    0
  37. 43

    Very nice round up! Some tools are really great.

    You might also want to include dhtmlx library in your next round up:
    http://dhtmlx.com

    Although it’s not very spread out, they have a good set of JavaScript ui widgets, and a very powerful datagrid.

    0
  38. 44

    Another great new resource is the Vanity jQuery Toolset it has a great amount of really useful jQuery plugins.

    0
  39. 45

    I think you forgot Mootools..

    0
  40. 46

    good collection and sharing, thanks. One more site to suggest: jquery.malsup.com.

    0
  41. 47

    Not able to get Highcharts to work for me yet but it seems very interesting and useful
    Thanks for sharing!

    0
  42. 48

    great job !!!!

    0
  43. 49

    Hum… The Javascript Library Boilerplate is a joke, right?

    0
  44. 50

    Shai Ben-Yehuda

    April 22, 2011 7:17 am

    Please add jBart to the list (http://www.artwaresoft.com).
    jBart is a visual jquery toolkit.

    Javascript libraries are too limiting, they force their HTML and API. In too many cases they are not flexible enough to be used.
    jQuery is different. It does not force any html on the developer and does not have closed data API. This is the reason it is so popular.

    Like jQuery, jBart does not force its html or data structures on you.
    You start with your xml data and build the widgets as a view/editor of your data. You can replace/inject html and javascript at any level.

    jBart is very useful to build complex interactive e-commerce search boxes and interactive product galleries with complex filtering.
    Look at interactive smashingmagazine search box (with images) done with jBart, and goto ‘Customize’ to see how it was developed:
    http://www.artwaresoft.com/#?smallpage=runtime?page=widget?node=bart_sample.yaron__Smashing_Magazine

    0
  45. 51

    I am glad I came across your blog today as it will now be part of my daily reading. Thanks for sharing this interesting article.

    0
  46. 52

    Thanks for sharing good work…

    0
  47. 53

    Really surprised head.js isn’t on this list.

    http://headjs.com

    0
  48. 54

    thanks, really interesting article, probably you spent a lot of time harvesting that tools out there

    0
  49. 55

    hey can you make a google chrome browser plugin that add the ability to pie an image or advertisement. like pie in the face plugin. (image or advertisement gets pied in the face sorta thing). and it can stay there till you leave the page or go away after a small time. Be able to adjust the duration of the pie aswell.

    0
  50. 56

    Thanks for sharing
    good work…

    0
  51. 57

    jQuery Waypoints is great, except for the bug on iOS devices.
    If you reload a scrolled page with Waypoints implemented it doesn’t fire an event. So if you fade in your content it will just stay invisible after such reload – till the next scroll event. I found no fix for that on the net, so made my own one.
    I detect iOS devices. Once detected, I fire all the Waypoints events on page load. That fixes the bug on mobile and keeps the Waypoints working on desktop.

    The code itself is:

    jQuery(document).ready(function(){

    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
    if (isiPad || isiPhone) {
    // here I fire the events
    }
    });

    0

↑ Back to top