Here’s a collection of useful open source CSS resources to add in your toolbox that will surely make you busy for a while. Try to incorporate these code fragments in your workflow and let’s assess whether it’s worth adding in your resources.

You might want to take a look at the following related articles:

Dont forget to subscribe to our RSS-feed and follow us on Twitter – for recent updates.

Bear CSS

Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.
Bear CSS
View Source

Rotating Sunburst Using CSS3 Keyframe Animations

In this tutorial, you will learn how to create a rotating sunburst using CSS3 keyframe animations only – without the help of JavaScript and any animation or HTML5 and CSS3 tools.
Rotating Sunburst Using CSS3 Keyframe Animations
View Source

Google+ UI Buttons

This is an easy to implement framework of Google+ styled buttons, icon buttons & dropdown menu buttons that look and work great in web applications.
Google+ UI Buttons
View Source

Profound Grid System for Fixed and Fluid layouts

A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.
Profound Grid System for Fixed and Fluid layouts
View Source

Creating a CSS3 Web Browser Window Inspired by Chrome

In this tutorial, you will learn how to create a web browser inspired by Google Chrome. Learn how to make a CSS3 web browser window through a step-by-step CSS tutorial.
Creating a CSS3 Web Browser Window Inspired by Chrome
View Source

CSS3 Pictogram Buttons

This is a set of 43 button with three different styles and six different colors and using entypo pictogram for replacing the images.
CSS3 Pictogram Buttons
View Source

Ivory Framework

A simple, flexible, powerful and fully responsive grid based front-end web framework that makes your web development faster and easier. It takes you all the way from 1200px on down to 320px.
Ivory Framework
View Source

Normalize.css

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
Normalize.css
View Source

Pondasee – Front-end Starter Kit

Pondasee is made to help front-end or developer to accelerate their work-flow in making web application. Use Pondasee, it will be perfect for your starting point.
Pondasee - Front-end Starter Kit
View Source

Workless – A Classy HTML5, CSS3 Framework

A clean & classy HTML5, CSS3 framework that helps you to get your project up and running as fast as possible and helps prevent repetitive tasks.
Workless - A Classy HTML5, CSS3 Framework
View Source

Sosa Icon Font

Sosa includes the 120+ icons which can be downloaded .ttf .eot .svg & .woff files in case you need to use this icon font via @font-face.
Sosa Icon Font
View Source

520 Grid System

520 Grid System is 520px wide including 16px left and right margin around container. It is based on 12 grids with 16px gutters with it; 12 is nice number that can be divided with 2, 3, 4 or 6 to get inline columns with equal width.
520 Grid System
View Source

Centurion – A CSS Web Framework

Built using SASS and CSS3 media queries, Centurion is a responsive web framework that scales with your device. No longer do you need to worry about the screen size of an iPhone or an Android tablet since Centurion does the work for you.
Centurion - A CSS Web Framework
View Source

Print.css

You may have noticed a degree of tongue-in-cheek humour with print.css. This is not intended to be used blindly, rather it exists to raise awareness of lazy print CSS development.
Print.css
View Source

CSSDeck

CSSDeck is a community of talented creative from all over the world that provides HTML5 and CSS3 code snippets, JS demos, creations and experiments.
CSSDeck
View Source

GitHub-Style Sliding Links

Links to long branch names now have their text visually truncated, and upon hover, the text animates to its full value. The CSS to accomplish this task is fairly simple, and this resource will show you how to make this happen.
GitHub-Style Sliding Links
View Source

One% CSS Grid – 12 Columns Fluid CSS Grid System

One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearanging your layout for each platform separatelly. One% CSS Grid will do all this for you.
One% CSS Grid - 12 Columns Fluid CSS Grid System
View Source

Animate.css

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Animate.css
View Source

CSSFlow CSS Snippets

CSSFlow, former WebInterface Lab, provides various CSS code snippets of free UI elements and widgets coded with HTML5, CSS3 and Sass.
WebInterface Lab CSS Snippets
View Source

34 Responsive Grid System

34Grid is a Responsive Grid System based on “equally distributed columns” layout basis. In contrast to other great grid systems (@see bottom of page), 34Grid provides equally distributed columns for each row. (and also column complements for inequal distributions)
34 Responsive Grid System
View Source

Makisu 3D Menu Dropdown

With its unique dropdown menu navigation style, you’ll surely catch the attention of your viewers. From its opening to closing effects, it has a great, smooth animation.
Makisu 3D Menu Dropdown
View Source

Create Polaroid Image With CSS

This tutorial will help you create an old-fashioned polaroid photograph, along with image captions and possible rotation as well.
Create Polaroid Image With CSS
View Source

Animated Web Banners With CSS3

This tutorial will help you build your own advertising banners with CSS3 animations that work in all standards-compliant browsers.
Animated Web Banners With CSS3
View Source

320 and Up

LESS and Sass have transformed the way we write CSS. ‘320 and Up’ is built with LESS and CSS includes our trusted mixins and variables. If you’re not ready for LESS, don’t worry, use the plain ol’ CSS version.
320 and Up
View Source

CSS3 Checkboxes

This code snippet created by one of the talented members of CodePen includes various styles of checkboxes – 9 unique styles to be exact.
CSS3 Checkboxes
View Source

1140 CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
1140 CSS Grid
View Source

CSS3 Button UI

The Geekeries CSS3 buttons class is a great starting point for designers looking for a quick solution in smaller web layouts.
CSS3 Button UI
View Source

SpritePad – Create and Edit CSS Sprites

With SpritePad you can create your CSS sprites within seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.
SpritePad - Create and Edit CSS Sprites
View Source

CSS-Only Responsive Layout with Smooth Transitions

A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a “smooth scrolling” effect.
CSS-Only Responsive Layout with Smooth Transitions
View Source

Responsive Web Design Patterns

A collection of patterns and modules for responsive designs – a detailed level of non-official documentation for mobile web designers. .
Responsive Web Design Patterns
View Source

Microsoft PowerPoint Presentation Templates