40 Essential CSS Templates, Resources and Downloads

Every web developer should have in their toolbox a collection of CSS tools and resources like the ones outlined in this article. A set of techniques that you rely on and that are always at the ready to cover any possible eventuality.
You will find not a selection of the latest innovative CSS techniques (there are some) in this article, merely a collection of tools, resources and downloads that can be used by web designers for solutions to everyday CSS design and coding solutions.

The resources below have been split into four categories: CSS Download Packages (all of the CSS resources offer multiple variations of each technique), Downloadable CSS Tools (the resources within this category offers specialized templates), Web, Mobile & Form Frameworks (+ tools and templates to help you get started with each); Feature-Rich and Outstanding Mobile & Web Templates and finally, a selection of tools to help with cross browser compatibility.

We don’t presume that this is an ultimate collection, merely a selection of resources we have found to be indispensable. We are positive we have missed a few, and would love to hear about the tools and resources you rely upon.

Within this category, all of the CSS resources offer multiple variations of each technique (forms, tables, rounded corners…), all within their download packages. Quite often you will find that each variant is based on the same markup with only the CSS changing. These resources are all worth bookmarking.

Five ROUNDED CORNERS Techniques

Five ROUNDED CORNERS Techniques
As well as a detailed video tutorial, here you will also find FIVE different downloadable techniques for creating rounded corners, each each having its own advantages and disadvantages.
Five ROUNDED CORNERS Techniques →View Demo →

5 Uniquely Coded Web Form Styles

5 Uniquely Coded Web Form Styles
From CSS Globe, here you download 5 uniquely designed and coded web form styles.
5 Uniquely Coded Web Form Styles →View the Demo →

Formy CSS Framework – 4 Downloadable Forms

Formy CSS Framework - 4 Demo Forms
Within the Formy CSS Frameworks download package, you will find FOUR (3 horizontal variants and 1 vertical form example) accessible CSS form styles which interacts in the simplest and natural way with HTML form.
Formy CSS Framework – 4 Demo Forms →

8 Different Ways to Style your HTML lists with CSS

8 Different Ways to Style your HTML lists with CSS
This article takes a look at styling regular lists by showing 8 different ways to beautifully style your HTML lists with CSS. All of the lists are downloadable in a single package.
>8 Different Ways to Style your HTML lists with CSS →View the Demo →

10 CSS Table Designs

10 CSS Table Designs
A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you TEN of the most easily implemented CSS table designs. All ten of the table styles are available as a single download.
10 CSS Table Designs →View the Demo →

5 CSS3 Tables Styles

5 CSS3 Tables Styles
This article will show you how to use some neat CSS3 properties to beautify your tables. All FIVE CSS3 table styles are aviable within the source download.
5 CSS3 Tables Styles →View the Demo →

23 Pagination Styles

23 Pagination Styles
With over 20 different pagination styles available, this page is a an awesome resource. And yes, all styles are downloadable.
23 Pagination Styles →View the Demo →

6 Blockquote Examples

6 Blockquote Examples
Here you will fin SIX downloadable CSS blockquote examples, varying in style from the classy to the modern and from the fun to the fancy. Great resource.
6 Blockquote Examples →View the Demo →

12 CSS-only Menus

12 CSS-only Menus
Here is a set of CSS-only menus for your website – no images, no JavaScript. The markup for the menus is always the same with 12 different stylesheets for their appearance. You can download them all in a single package.
12 CSS-only Menus →View the Demo →

15 CSS3 Buttons

15 CSS3 Buttons
This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possible markup. All available within the download.
15 CSS3Buttons →View the Demo →

3 CSS Image Maps Variants

3 CSS Image Maps Variants
Within this download package you will a find a basic world map image map example, an example with hover states and, finally, an example with tooltips.
3 CSS Image Maps Variants →View the Demo →

25 CSS Drop-Down Menus

25 CSS Drop-Down Menus
This CSS Drop-Down Menu Framework offers 25 downloadable menus. As well as some generic menus (vertical, horizontal, mega-menu…), you will also find some menu examples from popular websites, like Flickr, Adobe, Nividia and Vimeo.
25 CSS Drop-Down Menus →View the Demo →

40 CSS Layouts

40 CSS Layouts
The main goal of the article has been to get the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility. The result is a set of 40 layouts, all available to download individually or you can download all 40 layouts in a single download package.
40 CSS Layouts →View the Demo →

100+ HTML Email Templates

100+ free HTML email templates
This is the ultimate in email template resource. With over 100 templates, all designed by prominent designers, this is a must bookmark.
100+ HTML Email Templates →

The resources within this category offers specialised templates and source code downloads that go far beyond any typical CSS resource. These downloads are fantastic for learning purposes.

CSS3 Button Generator (Source Files)

CSS3 Button Maker/Generator (Source Files)
Docs & Demo →

SlickMap CSS

SlickMap CSS - A Visual Sitemapping Tool for Web Developers
Docs & Demo →

Pure CSS Timeline

Pure CSS Timeline
Docs & Demo →

Typographic Work Planner

Typographic Work Planner
Docs & Demo →

CSS Elastic Calendar

CSS Elastic Calendar
Docs & Demo →

Web Form with Field Hints (CSS3)

Web Form with Field Hints (CSS3)
Docs & Demo →

Editable/Printable Invoice

Editable/Printable Invoice
Docs & Demo →

CSS Stacked Bar Graphs

CSS Stacked Bar Graphs
Docs & Demo →

Animated Price Grid (CSS3)

Animated Price Grid Using (CSS3)
Docs & Demo →

Sexy Tooltips

Sexy Tooltips with Just CSS
Docs & Demo →

Fluid Grid System

Fluid Grid System
The Fluid Grid system is a web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.
Fluid Grid System →View the Demo →

Fluid 960 Grid System Templates

Fluid 960 Grid System Templates
Stephen Bau had been looking for a means of rapidly developing interactive prototypes for his site designs. He has built a library of commonly used HTML elements, combining these with CSS for typography and layout.
He finally created the Fluid 960 Grid System Templates (960 pixel fixed width, 12-column fluid width and 16-column fluid width) which have been built upon the work of the 960 Grid System using effects from the Mootools JavaScript library.
Fluid 960 Grid System Templates →Fluid 960 Grid System →

Blueprint CSS Framework + Template Source

Blueprint CSS Framework + Template Source
Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and you’ll be able to download the demo application that uses Blueprint to get a better idea of how to effectively and quickly with the framework.
Blueprint CSS Framework + Template Source →View the Demo →

The 1KB CSS Grid

The 1KB CSS Grid
Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System), with its main mission to be lightweight. The basic configuration is a 12 column grid system spread out over 960 pixels. Each column is 60 pixels wide with a 20 pixel gutter in between.
The 1KB CSS Grid →View the Demo →

The Grid 960 Prototype Framework Template

The Grid 960 Prototype Framework Template
This article explains the basics of Grid 960, from planning the grid for a design to actually coding the prototype. The sample design (downloadable) will exploit most capabilities of the Grid 960 giving you a firm knowledge base to work on and help you come to grips with the 960gs.
The Grid 960 Prototype Framework Template →View the Demo →

Easy Front-End Framework

Easy Front-End Framework
Easy is more than a CSS framework designed for building layouts. It includes built-in (jQuery powered) interactive functions that are so easy to use that you really don't have to know first thing about JavaScript. It also includes a library of preformatted and precoded CSS/HTML content blocks that you can simply paste into your master template. With a way of file organization it allow you to easily create your own content blocks.
Easy Front-End Framework →View the Demo →

iWebKit – Make a quality iPhone Website or Webapp

iWebKit – Make a quality iPhone Website or Webapp
iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp. The kit is accessible to anyone even people without any html knowledge and is simple to understand thanks to the included tutorials. In a couple of minutes you will have created a full and professional looking web app. iWebKit is a great tool because it is very easy to use, extremely fast, compatible & extendable.
iWebKit – Make a quality iPhone Website or Webapp →View the Demo →

Formee – Fresh baked forms for your websites!

Formee - Fresh baked forms for your websites!
Formee works with the technique provided by Fluid 960 Grid System to compose the form's layout, allowing total flexibility to put it in any website or web system.
The form has a structure built around percentage widths, thus allowing its inclusion in any project, adapting to the space available. Formee has its structural code independent of the style codes, facilitating the complete customization and manteinance of the form.
The form has been built with care to preserve web standards and their semantic values, working with the smallest possible amount of tags and according to the W3C rules.
Formee – Fresh baked forms for your websites! →View the Demo →

All of these web/mobile layouts go above and beyond what most CSS templates can offer. Not all are feature-rich, but do they do all offer something unique and all have beautifully crafted markup.

Landscape/Portrait iPad CSS Layout

iPad CSS Layout with Landscape/Portrait Orientation Modes
Docs & Demo →

Multi-Column CSS Liquid Layouts

Perfect Multi-Column CSS Liquid Layouts (iPhone Compatible)
Docs & Demo →

A Vertically Fluid Layout

SuperStretch! – A Vertically Fluid Layout Using CSS
Docs & Demo →

One Page Portfolio (HTML5 and CSS3)

Backwards Compatible, One Page Portfolio (HTML5 and CSS3)
Docs & Demo →

Template With HTML 5 And CSS3

Elegant Website Template With HTML 5 And CSS3
Docs & Demo →

Flexible, Mobile-First Layouts

Flexible, Mobile-First Layouts with CSS3
Docs & Demo →

CSS Templates for Fireworks

Prebuilt CSS Templates for Fireworks CS4
Docs & Demo →

Resume Template

Resume Template by thingsthatarebrown.com
Docs & Demo →

CSS3 PIE: CSS3 decorations for IE

CSS3 PIE: CSS3 decorations for IE
3 Pie (download) is a set of CSS “behaviors” that can be attached to any CSS file by way of the behavior element in order to add rendering support to Internet Explorer 6, 7 or 8 for the more popular CSS3 rendering features: border-radius; box-shadow; border-image; multiple background images; linear-gradient as background image.
CSS3 PIE: CSS3 decorations for IE →

CSS3 Please! The Cross-Browser CSS3 Rule Generator

CSS3 Please! The Cross-Browser CSS3 Rule Generator
CSS3, Please! is a small utility that allows you to edit the document in real-time and create your own personalised cross browser CSS3 rule.
CSS3 Please! The Cross-Browser CSS3 Rule Generator →

FindMeByIP – CSS3 Properties

FindMeByIP - CSS3 Properties
FindMeByIP – CSS3 Properties →

Author: (646 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments