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.
A set of small, responsive CSS modules that you can use in every web project
Popular responsive front-end framework
Sleek, intuitive, and powerful front-end framework for faster and easier web development
Boilerplate for Responsive, Mobile-Friendly Development
Makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features
CSS3 pseudo-class and attribute selectors for IE 6-8
Enables HTML5 features in older browsers
Lets you use only unprefixed CSS properties everywhere
Enables responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under
- CSS Reset
Resets the styling of all HTML elements to a consistent baseline
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 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.