As a developer of web-applications, I am a strong advocate of re-usability of code; either in the form of smart programing practices (such as object-oriented programing) or as development frameworks. These days, almost all dimensions of programing (from architecture to user interface development) for web applications are based on strong development frameworks.

Since this post relates to HTML and CSS frameworks only, I will limit the discussion to this scope. A CSS framework is an easy way to cut down development time. It also provides a solid foundation to build projects, and easily use and manage customized grid, sensible typography, useful plugins, and all the power of a CSS stylesheet.

Greepit has featured many CSS Frameworks previously, here is a quick round of those:

• CSS Framework For Cross-Device Layouts: Less Framework 2
• Framework To Develop Web Based Forms – Formee
• Create A Web Project Framework In Seconds: InstantCSSCode
• deploy*: Easily Create Your Web Project Framework
• Open Source W3C Compliant CSS Framework – MarkerCSS
• Open Source CSS Framework to Create Modern & Flexible Layouts
• Emastic – CSS Framework
• Fluid 960 Grid System Templates
• SenCSs: A CSS Framework For All But Not The Layout
• Rapid Prototyping With Flexible CSS Framework: EZ-CSS
• CSS Framework For Cross-Device Layouts: Less Framework 2
• CSS Framework To Kick-Off Your Project Today: Primary
• Atatonic: A CSS Framework Focused On Typography
• 1140px Wide Fluid CSS Framework: 1140 Grid
• CSS Framework For Rapid Prototyping: FEM CSS Framework
• Create Elastic, Fixed and Liquid Layouts: Elastic CSS Framework

• A Powerful Framework with HTML5 & CSS3 – 52Framework
• Professional Base Template For HTML5-CSS3 Projects: HTML5 ★ Boilerplate
• Goodness Baked For HTML5-CSS3 Projects: HTML5 Reset
• HTML5 and CSS3 – Tools, Resources & Frameworks

We agree that CSS frameworks have advantages for accessibility, as well as providing the ability to tailor a page or site to different target devices. Furthermore, devices not able to understand the styling still display the content.

The popularity of CSS as a design tool has increased exponentially and is now regarded as the premier skill for website design. Having said that, here goes another list of frameworks that you can use to build web-based projects quickly and efficiently.

Read the rest of this entry »

TableKit is a collection of easy to implement HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.

TableKit allows you to easily create sortable, resizable and editable HTML tables by using CSS class overloading to tell the system how to handle a table.

Formee is a framework to help you develop and customize web based forms. Formee helps users to save their time they spent on aligning fields and calculating margins and paddings in a quest for a perfect web form.

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.

Web Forms Features

• Customizable and flexible
• Accessible and usable
• Cross browser and W3C compatible web forms

EZ-CSS is a free, lightweight and flexible CSS Framework for complex table-less layouts and rapid prototyping. EZ-CSS lets you apply any width you want to containers and gutters.

Features

• has a very small footprint (only 915 bytes) for a fast download time
• facilitates deep nesting
• allows you create multiple columns of any width, with or without a gutter
• is framework agnostic (it integrates well with any other style sheet)
• prevents rounding issues and rounding errors
• creates self-clearing containers (every box will contain floats)
• prevents collapsing margin across all containers

EZ-CSS offers a version for rapid prototyping in which the concept is the same, but markup and CSS rules differ.

Growl4Rails is an open source javascript component that provides the UI for growl-like notifications in your Rails web application. You have control over the duration and max number of growls to show.

Requirements: Rails 2.1+, Prototype 1.6+, Scriptaculous 1.7+

Website: http://github.com/jfiorato/growl4rails/tree/master

Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases.

Read the rest of this entry »

Prototip is based on Prototype javascript framework.

Website: http://www.nickstakenburg.com/projects/prototip2/

JSXGraph is a cross-browser library for interactive geometry, function plotting, graphs, and data visualization in a web browser. It is implemented completely in JavaScript and uses SVG and VML.

Some Features:

• Easy to embed
• Small footprint: only about 55 kB (embedded in a web page).
• No plugins are required!

Read the rest of this entry »

PrototypeXtensions is a JavaScript library based on the frameworks Prototype.js and Script.aculo.us. The objective of this library is to provide an extension “low level” composed of useful methods and basic components, and components “high level”, more dedicated to the user interface.

Currently, it has 3 components:

• Core extension: class, cookie, event management & time calculations.
• History: easy “set/get” parameter on hash of URL, observe the hash of URL & more.
• Tabs: show / hide, select, Ajax / iframe.

Website: http://www.prototypextensions.com

JSValidate is a form validator that utilizes aspects of prototype and scriptaculous to bring you a simple to execute, non-intrusive javascript form validator.

It validates:

• Numbers
• Letters
• Required fields
• E-mail Address
• Credit card number format
• US zip code, phone number & state codes

Website: http://www.jsvalidate.com/

Demo: http://www.jsvalidate.com/demo/