The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework.

It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability.

Mini PSD Vector Icons is a nice minimal set of beautifully hand-crafted icons. There are 7 icons for Brush, Dreamweaver, Adobe Illustrator, WordPress, Drupal, Code and PayPal.

Licensing

This file is free for personal and commercial use. However, you can not redistribute, sale, re-upload this file. Do not directly use download link at your site, please refer to this post if you want to spread the word.

CSSload is a free online tool to generate pure CSS spinners and loading bars for your Ajax and jQuery projects.

Right now, CSSload features few spinners and loading bars and you can customize those to match your color, animation speed and size.

With the widespread usage of smart phone equipped with all social platforms and small utilities on Android, Apple and other platforms, more and more applications are coming everyday to grab the market. This shift in business domain has been equally responded by the industry as we see several open source initiatives to provide solid platforms for develping mobile applications.

Some of those have already been featured on this blog including iOS Boilerplate, Skeleton and Mobile Boilerplate. However, most of these provide only basic skeleton to build mobile application and do not provide a really comprehensive platform to build, optimize and extend mobile applications but Touchy does it all.

Touchy™ Boilerplate is a starting kit for building mobile web apps. In fact, it is more than a ‘base template’; it goes beyond just an HTML/CSS template, adding performance optimization tools, hardware accelerated animation, device API, fixed positioning and much more so you can really rock the mobile web.

CanvasLoader is a lightweight JavaScript UI library, which uses the HTML5 Canvas element to draw and animate circular preloaders / spinners.

This free tool helps you to create slick preloaders / spinners for your projects.

File input in HTML forms lets users include entire files from their system into a form submission. The files could be text files, image files, or other data.

Today’s quick freebie is File Input PSD showing two states.

Licensing

This file is free for personal and commercial use. However, you can not redistribute, sale, re-upload this file. Do not directly use download link at your site, please refer to this post if you want to spread the word.

When it comes to developing websites or applications for the web, there are 101 ways to speed up your development cycle by embedding ‘ready-made’, free and open source resources in your project. It actually saves a lot of time and effort that you would otherwise spend on tasks that do not related to your core requirements. For instance, I would abhor creating buttons for my application or website for each new project. I would rather generate them instantly using free, online tools like CSSButton.

CSSButton is an online tool for web professionals for creating usable and stunning CSS3 buttons. It is also a learning tool, to help people understand visually how their CSS is going to work out.

You have 3 different options to start from:

• Create from scratch
• Use templates
• Try CSS button generator

The CSS builder will help you style just about any element you’d like to transform into CSS, however it has been tailored to buttons with pseudo classes, transitions, and more.

In our previous post we discussed how JavaScript and other programming languages are evolving to to support the shift of software from desktop to the Web. Sequel to the previous post, today we are discussing the modern approach to web layouts using powerful and dynamic CSS grid systems based on LESS.js. For those who are not familiar with LESS framework, LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. It runs on both the client-side (IE 6+, Webkit, Firefox) and server-side.

The Semantic Grid System is one of many modern frameworks (like Centage!) that allow you to provide CSS based grid layout system. It allows you to set column and gutter widths, choose the number of columns, and switch between pixels and percentages, and achieve responsive layouts, all without any ugly .grid_x classes in your markup. It is powered by LESS.js.

Since the introduction of HTML5, a lot has been changed the way we used to design and build web applications and websites. It has changed the way we used to handle content (text, video, audio, animation etc.) on the web. Web applications built on HTML5 are much more interactive and easy to manage.

Take the example of Mercury, which is a full featured HTML5 WYSIWYG editor. It is more than an ordinary WYSIWYG editor. Mercury transforms an entire page into several editable regions that users can access to edit content in an interactive fashion. With native support for CSS, Mercury allows you to easily provide editing options on a page.

It displays a single toolbar for every region on the page, and uses the HTML5 contentEditable features on block elements, instead of iframes, which allows for CSS to be applied in ways that most other editors can’t handle.

Major Features

• Real time content preview
• Drag images from your desktop to automatically uploaded and insert them
• Insert and edit predefined and reusable bits of markup/code using drag and drop
• Markdown, HTML, and Snippet region types by default

Mercury has been written using CoffeeScript and jQuery for the Javascript portions, and is written on top of Rails 3.1.

Mercury HTML5 WYSIWYG editor supports all browsers that have implemented the complete W3C contentEditable specification.

Whether you’re designing a website or a web application, you’ll need buttons for it. Now, with the help of CSS3, it was never easier to create nice looking CSS3 buttons.

This awesome set of CSS3 buttons uses the simplest possible markup and it uses HTML entities to create the icons.