Advertise here with BSA

When creating/designing a web page, we either start with the HTML, build the structure and style it later or style-while-structuring.

If you design with the 1st approach and bored of creating a CSS file with copy-pasting all those class + id names, here is a quick solution:

Bear CSS is a free-to-use web application that generates a stylesheet with all the elements, ids and classes from a given HTML file.

The app is mostly useful for projects with a pretty long HTML and it would be better if Bear CSS had asked which items to include inside the stylesheet just after the upload -feature request : )-.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

When designing websites, images-to-be-used usually doesn't exist at first as it is the layout that matters the most.

However, the sizes for the images are usually pre-set and inserting some placeholder images help us better seeing/analyzing the layout.

Rather than creating these placeholder images manually, there are free to use services which can automate the process and save us time.

Here is a list of 8 free placeholder image services for instant dummy images:

Flickholdr

As the name tells it, Flickrholdr fetches images from the huge database of Flickr.

Besides the size of the images, it is possible to mention tags in the URL which is great for using related images in each spot.

Placehold.it

The service is full-featured with the ability to mention sizes, image format (.gif, .jpg, .png) and can also display text.

The size of the images generated are displayed on them as well.

lorempixum

lorempixum is an awesome free service where you can generate images in any size and almost in any category (like sports, food, people, etc.).

You can also select to get color or grayscale photos.

{placekitten}

Placekitten is thematic placeholder service that can display any size of kitten images.

There is also a jQuery plugin for dynamically changing any or all of your images to placeholder kittens with just a single line of code.

Dynamic Dummy Image Generator

DummyImage.com is a placeholder generator with a huge set of customization options including size, colors, text, multiple file types and preset sizes.

And, it is an open source script.

nosrc.net

A simple generator where you can only define the width and height. Also,  the source of the script is shared as well.

FPOImg.com

Again a simple service where you can mention a text to be displayed besides the sizes.

IpsumImage

IpsumImage is a Google App Engine hosted, open source placeholder service (built with Python).

It is possible to customize the sizes, background-foreground colors and text to be displayed.

lowersrc

The service follows a different approach than others and requires a JavaScript to be installed and works without defining "image sources" but simply adding a specific class to each.

Other than sizes, colors and text, you can also set whether the image will be rectangle or a circle.

Bonus! – flickrBomb (a jQuery plugin)

A simple and smart solution for getting images of any size from Flickr.

Just insert this jQuery plugin to your web pages and call the image in aformat like:

<img src="flickr://Kevin Bacon" width="175px" height="175px">


and get an image of the mentioned size + subject.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

There are various CSS frameworks which offer a grid system, a style reset, basic typography, form styling & more.

But, if you only need a lightweight grid framework to build the skeleton of your website, take a look at the 1Kb CSS Grid.

It supports both fluid grids besides the fixed-width ones and nested rows can be created.

The website of the framework provides a generator to customize the grid & download the CSS easily.

Also, Usability Post has a very detailed introduction to the 1Kb CSS Grid in 3 steps. To dig the details, make sure you check them:

• Introduction
• Using The Grid For Templating
• The Details (nested rows, fluid grids..)

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Grid System Generator is a website that asks for grid width, number of columns, margin-left/right & creates a fixed grid system with valid xhtml/css.

Besides the CSS framework, a .PNG background file is created as well to help in prototyping and design.

The generator is based on 960.gs & displays already created grids which can be found here.

You can also find instructions on using the generator & links to resources about grid systems.

P.S. Another 960.gs based grid generator can be found here.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Sample / test data is an effective way to test web projects & applications. Other than meaningless data, real names, addresses, zip codes can make the whole testing stage easier.

WebResourcesDepot have collected some nice free test data generators which you may find useful:

GenerateData

GenerateData is a free, open source script written in JavaScript, PHP and MySQL that lets you quickly generate large volumes of custom data in a variety of formats for use in testing software, populating databases.

Some features:

• (JS-enabled) browser-friendly.
• Many data types available: names, phone numbers, email addresses, cities, states, provinces, counties, dates, street addresses, number ranges, alphanumeric strings, lorem ipsum text and more.
• Option to generate data in XML, Excel, HTML, CSV or SQL.
• Country specific data (state / province / county) for Canada, US, Netherlands and UK.

DBMonster

DBMonster is a tool that generates random test data and inserts it into SQL database.

CSV Data Generator

This is a Ruby based free test data generator.

Datagenerator

Datagenerator is a library and GUI for generating rule based test data for various databases like Mysql, Firebird, Interbase, MSSQL, Oracle, SQLite and PostgreSQL.

dgMaster

Data generator tool which supports many data types (primitive data types,but also names,addresses,post codes,etc.) and generates data in various formats (text,xml,db).It provides a GUI and is extensible by means of plugging-in new data-generator classes.

Spawner Data Generator

Spawner is a generator of sample/test data for databases. It can be configured to output delimited text or SQL insert statements. It can also insert directly into a MySQL 5.x database. Includes many field types, most of which are configurable.

Test Dictionary

A Java interface that quickly returns random proper names, terms and connectors. Useful for populating realistic test data.

Fresh Trash Generator

This is a Java utility package for generate random test data.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Site visitors, sometimes, have a different route of browsing a website rather than expected. Or, they may not have enough time to see what the website owner expects to be seen in a website.

In these circumstances, site tours can be very helpful for showing a website how you want them to see.

Amberjack, which is an open source website tour generation library, enables web developers to create nice looking site tours so easily.

How to use Amberjack?

Amberjack has a site tour generation wizard which creates the sample code that must be installed. After inserting that code into your site’s HTML template, right before the </body> tag, and filling the information that will be shown in every page, you’re done.

This way the Amberjack javascript files are hosted on the Amberjack server. But javascript files can also be uploaded and called from your website.

There are already some skins for the site tour info box but it is possible to update them with some css editing.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Advertise here with BSA

Website Contact Form Generator utility enables you to create form-to-email scripts for your ASP, PHP or Perl web site with no programming skills needed.

It is possible to define all variables of a contact form including input types, javascript validations, subject & to-from addresses of the e-mail that will be sent when the contact form is filled.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)