Cached Commons is a collection of user-contributed javascript libraries that have been cached, optimized, and hosted on Github’s fast CDN.
The main goal is to aggregate the best-of Javascript and CSS libraries for rapid prototyping. It won’t have every javascript library because there’s 1000’s of jQuery Tooltip plugins out there, but only say 3 of them are really good.
You can easily download the libraries to your local project if you’d like, or feel free to directly link to the ones here.
A sprite combines multiple background images into a single image. This is a technique for making web pages faster because it reduces the number of downloads in the page.
Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There’s a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error.
SpriteMe removes the hassles with the click of a button.
- Finds background images
- Groups images into sprites
- Generates the sprite
- Recomputes CSS background-positions
- Injects the sprite into the current page
Primary is a small yet effective open source CSS framework for designers and developers in order to make using CSS as easy as possible. It comes with a collection of 22 ready to use CSS layouts to start your project today.
Previously, Greepit shared an HTML5-CSS3 project template that contains the basic structure for a new HTML5-CSS3 projects.
HTML5 ★ Boilerplate is another awesome HTML5, CSS3 and JavaScript template that can be used as a base html5 template for your next project for a fast, robust and future-proof site.
HTML5 ★ Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed. Its for sure an awesome set of files that a front-end developer can use to get started on a website.
Features
- Cross-browser compatible
- Optimal caching and compression rules for grade-A performance
- Mobile browser optimizations
- Progressive enhancement graceful degradation
HTML5 Reset is a project you can use as a template to start a new HTML5-CSS3 project. The HTML file contains a rudimentary HTML5 document structure, with all the every day stuff like title, header, footer, etc.
It also uses conditional comments to call about half a dozen IE-specific CSS files, as well as a couple popular IE-correcting javascript files.
HTML5 Reset is available as:
- The Bare Bones version is stripped down to the essentials
- The Kitchen Sink version is the version we use when we want the option to remove features, rather than add them.
Atatonic is a Tiny CSS framework with main focus on typography. Atatonic is meant to make your web life easier and is created to provide a stable grid and solid typography.
Grid system in the Atatonic CSS Framework works like any other grid system, but its very lightweight and only about 10 lines of css.
Maki is a tool for web designers that helps the transition from design to HTML / CSS code. Maki lets you overlay design mock-ups in the browser and see the adjustments you need to make, and tweak away until they match.
Maki, for sure, is an effective way to keep developers and designers on the same page from start to finish, ensuring that the final website matches the design layouts clients have approved.
Turbine is a PHP-powered tool that introduces a new way for writing CSS. Its syntax and features are designed to decrease css development time and web developer headache.
Turbine speeds up your CSS development and allows you to build more websites in less time. Just concentrate on things that are more important than tweaking CSS code, like design or content.
Features
- Packing, gzipping and automatic minification of multiple style files
- OOP-like inheritance, extension and templating features
- Fully exensible through a very simple plugin system
- Built-in device-, browser- and OS sniffing
You may have seen the flash content slider over at MLB, Louis Lazaris shared a very nice tutorial on recreating this content slider using jQuery and CSS3.
This CSS3 content slider supports:
- Auto-hide thumbnails
- Navigation controls to view specific slide along-with next / previous button controls
If you’ve ever felt the need to wrap stuff around an irregularly-shaped image using CSS, you may have been somewhat disappointed to find out that it’s forced to wrap around the image’s bounding box, rather than the actual contents of the image.
jQSlickWrap is a jQuery plugin that works on HTML5 Canvas element and enables you to easily and accurately wrap your text around the content of floated images.
It implements a client-side version of the Sliced and Diced Sandbags method of wrapping text around an irregularly-shaped object. In case user’s browser doesn’t support slick text wrapping, it will gracefully fall back to simple wrapping.
