Which plugins should I use in my web project?Welche Plugins sollte ich in meinem Webprojekt nutzen?

Each and every day I browse through the internet to find new useful scripts or CSS files which might make our lives easier when creating websites. The amount of different scripts and plugins out there is just tremendous and it becomes more and more difficult and confusing to actually know which ones to use in your project. In this blog post I will give you an overview over the most important and useful plugins and scripts (the list will be extended by time). In a second step I will then try to show you an example setup of plugins and scripts that you can use in your web project.

CSS Frameworks

• PureCSS
  A set of small, responsive CSS modules that you can use in every web project
• Foundation
  Popular responsive front-end framework
• Bootstrap
  Sleek, intuitive, and powerful front-end framework for faster and easier web development
• Skeleton
  Boilerplate for Responsive, Mobile-Friendly Development

Modernizing scripts

• Modernizr
  JavaScript library that detects HTML5 and CSS3 features in the user’s browser
• CSS3Pie
  Makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features
• Selectivizr
  CSS3 pseudo-class and attribute selectors for IE 6-8
• HTML5Shiv
  Enables HTML5 features in older browsers
• PrefixFree
  Lets you use only unprefixed CSS properties everywhere
• Respond.js
  Enables responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under

Performance-improving scripts

• Minify
  Combines, minifies, and caches JavaScript and CSS files on demand to speed up page loads.

CSS Resets

• CSS Reset
  Resets the styling of all HTML elements to a consistent baseline
• Normalize.css
  A modern, HTML5-ready alternative to CSS resets

This list contains only the mostly used scripts, there are however a lot more scripts and plugins which I did not put into the list. Nevertheless already now it is quite difficult to decide which scripts to use in your project.

Now I would like to show you my personal preference of scripts and plugins that I use in almost every web project. You can try my setup and tell me what you think about it. In this example setup we will assume that our goal is to build a responsive HTML5 website with cross-browser support.

The most important question is whether to use a CSS Framework and if so which one. Ecspecially for beginners and people who are not really into CSS a framework can be helpful. For further information on whether to use a framework or not check out Chris Coyier´s article “What Are The Benefits of Using a CSS Framework?“. I personally like using PureCSS by Yahoo! because it is light and you can download only the parts you need (forms, grids, buttons, tables, menus). Using the Skin Builder you can create your very own look by generating custom skin CSS. PureCSS already comes with Normalize.css so we don´t need to think about resetting our CSS.

In order to be able to detect what features a browser does support or does not support we use Modernizr. When downloading Modernizr be sure to have checked “html5shiv” and “Media Queries”. That way Modernizr already comes with HTML5 feature support for IE and Media Query support and we don´t need to include those scripts seperately. If you would like to use CSS3 features in your web project be sure to check the required features in the CSS3 section of the Modernizr download page.

We have included only one script and one CSS file so far and have already taken care of the CSS Reset, the HTML5 support for IE, Media Queries and CSS3 support. Now there is one more script that I find very useful but it is up to your project whether you are using lots of CSS3 features or not. The script I am talking about is PrefixFree, a plugin that let´s you use CSS3 features without having to write all the prefixes for different browsers manually. So instead of writing -moz-box-shadow, -webkit-box-shadow and box-shadow you would only need to write box-shadow. If you are using lots of CSS3 features then using this script might save you time and help you create much better readable CSS rules.

In order to save resources you could use a Minifier like Minify.js which combines, minifies, and caches JavaScript and CSS files on demand or simply use the online tools CSS Minifier to minify your CSS and JS Compress to minify and combine your JS files.

In conclusion it depends on your personal taste and the requirements for the web project whether and which scripts and framework to use. I would be happy to hear about your preferences. However if you don´t really know what to use try using the plugins and tools I just talked about and tell me what you think.

As well as the two minifier tools CSS Minifier and JS Compress