Sometimes, creating the original layout for a new web design can be the most tedious and time-consuming part of the process. Defining columns and rows and tables, while necessary, lacks the creative fun that things like logo design and color selection have, and it’s not too surprising to see developers try to skip around the process by reusing old templates. Yet, templates sometimes lack the flexibility required, and then developers are forced to waste time reinventing the wheel, especially when you are trying to design without dependency on images.

Enter Blueprint CSS. From the project description:

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Blueprint CSS isn’t really a framework in the sense that it’s not MVC (model-view-controller) like something like Ruby on Rails, and it doesn’t attempt to dictate the design process. Instead, it’s a superbly flexible template with sensible and sane defaults that conform to design standards. The typography is based on a scale and looks quite appealing by default, making it easier on the eyes to design.

A sample of a website designed with the CSS framework Blueprint.

Everything in Blueprint is based on a 24 column grid, where each column is 30px with 10px between columns. Therefore, you can define a simple two column page with the following code:

<div class="container">
   <div class="span-8 colborder">
      This is the left column
   </div>
   <div class="span-15 last">
      This is the right column
   </div>
</div>

This will create a two-column layout with a left-column of 320px and a right column of 600px, divided by 40px. The span-8 and span-15 classes create sections that span eight and 15 columns, respectively. The colborder class appends a 40px border to the right of the column, and the last class removes the right-most border, allowing the right column to fit perfectly into the grid.

You can easily push and pull columns with the push-x and pull-x, where x is the number of columns. Loud and quiet text can also be created in a snap. If you are interested in trying out Blueprint for a site design, you can download the source CSS and read the wiki for more usage information from the developer website.

Add to Any

Add to Any allows you to fully customize the buttons with CSS. Further, you can reorder and add new services, and track data with Google Analytics support.

Add This

Add This features an independent analytics solution to monitor sharing. It supports over 50 social sites, all of which are customizable.

ShareThis

ShareThis allows you to pick from text, image, or rotating button options, with a customizable header and link colors. You can easily integrate this tool into WordPress, TypePad, and Blogger.

Socialmarker Bookmarking Button

This tool adds social share buttons after the text of each article, and automatically fills in the Title, Link, and Text field.

Onlywire

Onlywire is a little different in that it is an automatic bookmarking tool. It’s nice in that it saves time, but many sites will ban your accounts, and the integration with Digg and Reddit doesn’t really work. Also, Onlywire requires the button to be placed on the website to stay in the program. If you use the button, you can customize title, text, and the url of your submission. There is a WordPress plugin also available.

Bookmark Me Plugin

This is a WordPress plugin inserted via editing the template.

Social Bookmarks Plugin for WordPress

This plugin creates XHTML compliant buttons after each post, with fully customized services. You can choose to exclude specific pages and posts from the plugin if you so choose.

Share it!

This is a JQuery Plugin for the Javascript-inclined. It features the ability to toggle and hide a group of social bookmarking buttons with a cool slide effect.

Sociable

A WordPress plugin with a nice backend that allows you to customize priority and inclusion of services.

SocialMarking

Includes a Google Gadget, buttons, and text links.

I hope these buttons get you started on adding sharing features to your website. If you found it helpful, you should RSS to be the first to get designer and developer resources. Or, keep this page handy by bookmarking it on Delicious.