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:
- How to Change The Browser’s Cursor Using CSS
- Understanding CSS3 Flexbox for Responsive Design
- 15 Responsive HTML5 Frameworks for Developers
- 20 Responsive CSS Frameworks and Boilerplates
- Creating a CSS3 Web Browser Window Inspired by Chrome
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.
Rotating Sunburst Using CSS3 Keyframe Animations
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.
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.
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.
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.
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.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
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.
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.
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.
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.
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.
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.
CSSDeck is a community of talented creative from all over the world that provides HTML5 and CSS3 code snippets, JS demos, creations and experiments.
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.
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.
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.
CSSFlow CSS Snippets
CSSFlow, former WebInterface Lab, provides various CSS code snippets of free UI elements and widgets coded with HTML5, CSS3 and Sass.
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)
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.
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.
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.
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.
This code snippet created by one of the talented members of CodePen includes various styles of checkboxes – 9 unique styles to be exact.
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.
CSS3 Button UI
The Geekeries CSS3 buttons class is a great starting point for designers looking for a quick solution in smaller web layouts.
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.
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.
Responsive Web Design Patterns
A collection of patterns and modules for responsive designs – a detailed level of non-official documentation for mobile web designers. .