CSS and JavaScript tools to take your website to the next level(备用)
2013-05-20 18:37
615 查看
Want to enhance your website with the latest tools available? In this article, I have compiled a bunch of super useful tools to enhance your website and take it to the next level.
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/topcoat.png)
Topcoat is a very neat and clean library of CSS classes specialized in form elements: buttons, checkboxes, sliders, etc. A super easy way to make your website or app look good in minutes.
Demo/Download: http://topcoat.io/
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/countable.png)
As you can guess, countable.js is a JavaScript function to add live paragraph, word and character counting to any HTML element. It is very small and do not rely on any JS framework.
Demo/Download: http://radlikewhoa.github.io/Countable/
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/icheck.png)
Want super-looking checkboxes and radio buttons for your new web app? Then try iCheck, a jQuery plugin which allow you to easily customize radio buttons and checkboxes. iCheck is easy to use and comes with various skins and color schemes.
Demo/Download: http://damirfoy.com/iCheck/
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/navigation.png)
Responsive layouts are very popular on the web right now, and this is definitely a good thing in my opinion. Here is a downloadable and reusable responsive navigation menu, made in CSS only.
Demo/Download: http://valdelama.com/css-responsive-navigation
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/flat.png)
Based on Foundation Framework, Almost Flat UI is a complete HTML/CSS/JS framework to build your site on. It looks really clean and professional. Definitely worth a try!
Demo/Download: http://websymphony.net/almost-flat-ui/
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/chart.png)
Chart.js is a dependency free, lightweight and object-oriented tool to create client side graphs. It features 6 different chart types and is very easy to use.
Demo/Download: http://www.chartjs.org/
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/placeimg.png)
When building websites or apps, you often need placeholder images. This very handy service generates random images at the requested size. Super useful!
Demo/Download: http://placeimg.com/
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/panzoom.png)
jQuery Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+.
Demo/Download: https://github.com/timmywil/jquery.panzoom/
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/scrollbar.png)
If you want to be able to create perfect looking scrollbars, then you should definitely have a look to this tiny jQuery plugin. It helps you to create customized scrollbars with no css change on any original element.
Demo/Download: http://noraesae.github.io/perfect-scrollbar/
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/03/fitvids.png)
A lightweight, easy-to-use jQuery plugin for fluid width video embeds. It was built by was built by Chris Coyier and Paravel.
Demo/Download: http://fitvidsjs.com/
Topcoat
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/topcoat.png)
Topcoat is a very neat and clean library of CSS classes specialized in form elements: buttons, checkboxes, sliders, etc. A super easy way to make your website or app look good in minutes.
Demo/Download: http://topcoat.io/
Countable.js
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/countable.png)
As you can guess, countable.js is a JavaScript function to add live paragraph, word and character counting to any HTML element. It is very small and do not rely on any JS framework.
Demo/Download: http://radlikewhoa.github.io/Countable/
iCheck
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/icheck.png)
Want super-looking checkboxes and radio buttons for your new web app? Then try iCheck, a jQuery plugin which allow you to easily customize radio buttons and checkboxes. iCheck is easy to use and comes with various skins and color schemes.
Demo/Download: http://damirfoy.com/iCheck/
CSS only responsive navigation
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/navigation.png)
Responsive layouts are very popular on the web right now, and this is definitely a good thing in my opinion. Here is a downloadable and reusable responsive navigation menu, made in CSS only.
Demo/Download: http://valdelama.com/css-responsive-navigation
Almost Flat UI
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/flat.png)
Based on Foundation Framework, Almost Flat UI is a complete HTML/CSS/JS framework to build your site on. It looks really clean and professional. Definitely worth a try!
Demo/Download: http://websymphony.net/almost-flat-ui/
Chart.js
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/chart.png)
Chart.js is a dependency free, lightweight and object-oriented tool to create client side graphs. It features 6 different chart types and is very easy to use.
Demo/Download: http://www.chartjs.org/
PlaceIMG
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/placeimg.png)
When building websites or apps, you often need placeholder images. This very handy service generates random images at the requested size. Super useful!
Demo/Download: http://placeimg.com/
jQuery PanZoom
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/panzoom.png)
jQuery Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+.
Demo/Download: https://github.com/timmywil/jquery.panzoom/
Perfect Scrollbar
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/04/scrollbar.png)
If you want to be able to create perfect looking scrollbars, then you should definitely have a look to this tiny jQuery plugin. It helps you to create customized scrollbars with no css change on any original element.
Demo/Download: http://noraesae.github.io/perfect-scrollbar/
FitVids.js
![](http://www.catswhocode.com/blog/wp-content/uploads/2013/03/fitvids.png)
A lightweight, easy-to-use jQuery plugin for fluid width video embeds. It was built by was built by Chris Coyier and Paravel.
Demo/Download: http://fitvidsjs.com/
相关文章推荐
- [jQuery]30+ Brand New jQuery Plugins To Change the Look and Feel of Your Website
- 10 Tips to Push Your Git Skills to the Next Level
- Using JavaScript and CSS to Enhance Your ASP.NET Datagrid
- 【转】[jQuery]30+ Brand New jQuery Plugins To Change the Look and Feel of Your Website
- Knoppix Hacks: Tips and Tools for Using the Linux Live CD to Hack, Repair, and Enjoy Your PC
- 10 Tips to Push Your Git Skills to the Next Level
- [转]The Big List of JavaScript, CSS, and HTML Development Tools, Libraries, Projects, and Books
- Data Collection and Storage We noticed that your app requests the user’s consent to access the ....
- Website for the introduction to Matlab and Java
- [Yii Framework] How to embed the css and images in a module
- Cross Browser CSS Opacity and the JavaScript Fade / Fading Effect(跨浏览器的CSS透明和JavaScript淡入淡出效果)
- Bring Your Charts to Life with HTML5 Canvas and JavaScript
- 87.You want to display the date for the first Mon day of the next month and
- travel the binary tree by level 4 ( from down to top and from left to right every level )
- 海洋工作室——网站建设专家:Creating Multi-Level Navigational Menu with the ASP.NET Repeater Control and CSS Styles
- Creating Mobile Games: Using Java ME Platform to Put the Fun into Your Mobile Device and Cell Phone
- Howto Dynamically Insert Javascript And CSS
- HikariCP 脑火Failed to obtain JDBC Connection: You need to run the CLI build and you need target/classes in your classpath to run.
- Give some advice on how to learn html,css,and javascript for c developers
- 5 Free Tools to Test and Benchmark Your Network Speed