Centage – The Smart and Fluid CSS/LESS Framework

Centage! is five cents in defining a good fluid css framework. Every framework has its shortcomings – as has Centage! too – but it also solves some major issues in existing ones.

Reason for Centage! is purely practical. I started to redesign my own site and wanted to go for a fluid grid, mostly just for the challenge of it. At the same time I had made some tests with Less and although it seemed pretty cool, it was still tricky to develop with command line compiler. When less.js came along, the pieces existed for putting together a next gen fluid framework.

None of the existing fluid frameworks worked as I wanted them to. Fluid 960Grid is an impressive achievement, but what if I want to start my grid from page edge? Or what about nested grids and their gutters? Another wonderful undertaking is Elastic, but it’s dependancy on javascript troubles me.

I have my roots in print design and designing complex grid systems for newspapers. So I wanted the same kind of grid into web as well. Especially nested, percentage width grids are a challenge that simply cannot be addressed with traditional css (because they inherit relative width from parent element).

requirements for a grid system are:

1. It should work acceptably without javascript.
2. It should mimic print grids as accurately as possible.
3. Proportions of columns and gutters should be visually equal at any width.
4. It should add minimum extra markup.
5. No representational markup.
6. Should work on most browsers after IE6. IE6 users can expect trouble anyway.
7. It should be light + simple.

jQuery Plugin: rotate3Di – Flip HTML content in 3D

Rotate3Di is a jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations. CSS3 Transforms are used to create this visual “3D” isometric effect. Supported browsers are WebKit, Safari, Chrome, Firefox 3.5+, IE9 (Platform Preview 7+), and probably Opera. The plugin’s functionality includes: setting or animating HTML content to an arbitrary isometric rotation angle, as well as flipping, unflipping, or toggling the flip state of an object.

jQuery Bubble Popup

“jQuery Bubble Popup” is a plugin to display smart, animated & shadowed, “bubble” popups or tooltips with few lines of code in jQuery. The plugin support HTML5 and it is fully compatible with IE, Firefox, Chrome, Opera and Safari. It needs jQuery v.1.4.2 to run, the fastest and concise JavaScript Library.

MB.menu – Simply a multilevel tree menu

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

Pure CSS GUI icons

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set.

Slides – A Slideshow Plugin for jQuery

Slides is a crazy simple slideshow plugin for jQuery. It’s easy to implement, customize and style. What could be better? With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, auto generated pagination, the list goes on.

Face detection – jQuery Plugin

A jQuery plugin which detects faces in pictures and returns theirs coords. This plugin uses an algorithm by Liu Liu.

Animated Portfolio Gallery with jQuery

Tutorial by codrops: create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay.

LeanBack Player – HTML5 Video Player with Support Subtitle

SyntaxHighlighter

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. To get an idea of what SyntaxHighlighter is capable of, have a look at the demo page.

SyntaxHighlighter is currently used by Apache, Aptana, Mozilla, Yahoo, WordPress, Bug Labs, Freshbooks and others.