Bootstrap is built with Less and was designed to work out of the gate with only modern browsers in mind.

You can use Twitter Bootstrap in one of two ways: just drop the compiled CSS into any new project and start cranking, or run LESS on your site and compile on the fly like a boss.

The package includes fully editable Photoshop (PSD) files, original fonts and previews, everything that you may need in order to customize your set according to your preferences.

Purpose for this javascript interface library is to easily improve user experience in web applications.

• Easy and fun to use
• Highly configurable and customizable
• All components are themable with CSS stylesheets
• With a coherent API and rich documentation

There are couple of components which can be downloaded separately (as a simple .js file) or download the complete library.

Prototype UI simplifies the way UI components are added to modern web applications. It’s still under development, this release is targeted to developers only.

Website: http://www.prototype-ui.com/

Interactions are the behaviors of the user interface. For instance, when a user click a button, an image switches to another, or when a user drags an edge, the viewport expands. Those are interactions. Users are doing their jobs with a computer through various interactions generally.

This Free Interaction Design Tool is useful to try various interactions rapidly in the prototyping phase of your web application.

If you have basic knowledge about HTML and CSS, you can create interactions as you like. JavaScript coding is no longer needed.

Website: http://ixedit.com

Download: http://ixedit.com/download/

This Free JavaScript User Interface toolkit uses progressive rendering and can render 30k+ lists and tables most instantly.

Uki doesn’t want to be a Jack-of-all-trades. It only does layout but it does it well. You won’t find any ajax or data storage layer code here.

UKI is amazingly lighweight JavaScript library and its build is under 30k. UKI supports all major browsers.

Website: http://ukijs.org/

The collection is dual licensed with the MIT license and the GPL, which basically means you can use it for free for both non-commercial and commercial usage as long as you keep the copyright notice in each of Interface’s JavaScript source file.

Website: http://interface.eyecon.ro

Demo: http://interface.eyecon.ro/demos

formArchitect lets you design and edit complex tableless form layouts more quickly and more easily than even simple table based designs.

Some Features

• HTML 4.01 Strict DTD
• Multi Column Form Layouts
• Automatically creates JavaScript Validation
• Cross Browser Compatible
• Free and Unrestricted in Use

Website: http://www.formarchitect.com

Ruby can be installed, including Mac OS X, Windows XP and Linux. Tracks is Open Source, Free and licensed under the GNU GPL.

Application has a very slick interface & offers a high usability with drag’n drops & Ajaxed actions.

Tracks is a multi-user to-do-list application where everyone can have their own tasks.

Items can be categorized, proritized, scheduled & starred (for reaching them easier).

With a chart-supported statistics page, you can see the progress of your tasks, analyze them better like finding out which are your productive days, which task took more then expected & more.

The application has a powerful feed support (text, iCal and RSS). You can subscribe to a list & get status updates for them.

Tracks also makes it possible to getting integrated with other apps. with its API. And, it provides a lightweight interface for mobile phones at http://tarcksurl/mobile/.

Requirements: Ruby on Rails and (MySQL, SQLite or PostgreSQL)

Website:http://www.getontracks.org/

Download:http://www.getontracks.org/downloads/index

Tip 1: Don’t limit your size options

Once upon a time, we were limited to a mere 7 sizes via use of the <font> tag – thankfully current incarnations of CSS grant us much better control, so quite a fine level of control over the size can be had.

Figure 1: Newer methods of specifying sizes in CSS allow for more flexibility when choosing type size. Don’t stick to standard sizes – experiment!

Relative sizes work best- don’t forget your visitors may have a different font size setting to the default, so specifying fixed point or pixel values may make things look awfully strange. ‘Em’ units – so called as 1em is equal to the width of the lowercase ‘m’ character, are one of a few ways to scale your text proportionally. All things being equal, at default settings 1em is the same size as 12 points.

You’re not limited to while numbers, either – 0.8em is a good body font size, typically being rendered at 10pt. You can specify any number you like, and as large as you like – don’t limit yourself to sub-24pt sizes if the design warrants a larger size.

Tip 2: Play with your letter spacing

Letter spacing is perhaps one of the more effective ways to spruce up web type, particularly at larger sizes. It’s just a shame Internet Explorer cripples the finesse that could be available via the letter-spacing CSS property.

Figure 2: Letter spacing can be used to tighten the whitespaces in larger type, or relax the spacing in smaller type. The larger the font, the more you can tweak the letter spacing.

Firefox and other compliant browsers will happily take a precise decimal value, and space the text nicely and continuously at non-integer values, but Internet Explorer (sadly, even the latest IE7) will only allow for broad, rounded-to-neared-pixel-integer figures – which basically means you’re not going to get the spacing you want in IE.

Despite this limitation, letter spacing can be used effectively at larger sizes to really add some zing to an otherwise bland headline or title. As type gets larger, so too does the spaces between the type. This means that large fonts can have unsightly gaps and rivers of whitespace running through the letters. A little negative spacing will close these gaps, and if used with care can look distinctive, in some cases even suitable for replacing prerendered type.

Tip 3: Line height and word spacing, too

It’s not just letter spacing that you can mess around with – word-spacing and line-height can be specified to further tweak the text display.

Word spacing is perhaps less useful and more subtle than letter spacing, but adding a little extra whitespace between words can help somewhat in terms of readability. On longer lines, a little extra word spacing will mean fewer words per line, and thus make it easier for readers to keep track of where they are in the text.

Coupled with line height, you can gain more accurate control over the word density of any given page. I tend to specify line height as a percentage, with about 120-140% being the ‘normal’ default. A little extra (~200%) can make large passages of text a little easier to read, whilst tighter line heights (100% or less) can help with multi-line titles, where larger fonts could result in acre-wide gaps between lines without moderation.

With all the above spacing methods, care must be taken to ensure the effect is subtle – nobody wants to read text that’s squashed into a tiny space, or spread over 3 or 4 times the area that’s required. The default settings are default for a reason – text readability – so any changes made to the spacing should be subtle and should aid readability rather than impairing it.

Tip 4: Try a new slant on an old favorite

As mentioned in my top blog trends post, Times New Roman is used in only 5% of the top 100 blogs. It was Times’ early predominance on the web, being the default font for most browsers, that perhaps dulled its impact somewhat, but despite this, and if used creatively and in a fresh way, Times can have a great impact.

Figure 3: Even fonts that have fallen out of favour due to overuse, such as Times New Roman, can be refreshed with a little creative typography.

Try a non-standard size and a non-standard spacing model (all capitals works great, too) and Times can be a visually interesting and fresh font.

Tip 5: Be bold

‘Bold’ in the sense that you try new and exciting things – not in the typographical ‘bold’ sense. Big fonts, tight spacing, loose spacing, colour, use of first-letter and first-line can all help to set your text apart from typically dull web typography.

The key thing is to experiment, try new things – not at the expense of readability, but in the name of design.

And, if nothing else, the experimentation to find the perfect typographical mix on the web should occupy the time between now and whenever fully flexible, fully supported CSS typography becomes mainstream!

The Jx examples are a set of web pages that illustrate specific Jx components. Simply click on a page in the tree to the left to load the appropriate sample and get started exploring Jx right away.

To Change between Jx skins, simply click the button to expose a list of available skins and select a new skin to see the effect immediately.

Website: http://jxlib.org/