Exploring Software Universe: 2011-02-27

update : Brochure we created using below discussed points, for Postoz - SaaS hosted business process system is accessible at https://s3.amazonaws.com/postoz/postoz-brochure.pdf

In this blog we discusses about creating professional looking product catalog / brochure by leveraging web development skills.

You need,

jQuery (http://jquery.com/) - Cross browser javascript library.
Blue print CSS (http://www.blueprintcss.org/) - Cross browser CSS Framework with grid based layouts, typography.
Cufon (http://cufon.shoqolate.com/) - Javascript frame work for displaying visually interesting fonts by replacing existing texts.
Cufon fonts (http://www.cufonfonts.com/) - Free catalog of fonts to use with Cufon.
Wkhtmltopdf (http://code.google.com/p/wkhtmltopdf/) - Webpage to PDF converter that uses webkit rendering engine.

To outline steps involved, we will create simple brochure.

Create brochure layout with Blue print CSS

if you haven't used Blue print CSS before, have a look at this tutorial

	<html>
	<head>
	<link href="css/screen.css" rel="stylesheet" type="text/css"/>
	<link href="css/ie.css" rel="stylesheet" type="text/css"/>
	<link href="css/print.css" rel="stylesheet" type="text/css"/>

	<style type="text/css">
	.top {
	margin-top: 10px;
	}
	</style>

	<title>Product title - A product of company name</title>
	</head>
	<body>
	<div class="container">
	<div class="span-24 top">
	<div id="logo" class="span-9 colborder"><h1>Product Heading</h1></div>
	<div class="span-9 last">
	<div>product short description</div>
	</div>
	<hr/>
	</div>

	<div class="span-24">
	<div class="span-12">
	<div class="box">
	<div>
	<ul>
	<li class="heading">What is your product?</li>
	</ul>
	</div>
	<div>
	<p>
	something about your product goes here.
	</p>
	</div>
	</div>
	<div class="box">
	<div>
	<ul>
	<li class="heading">Features of your product</li>
	</ul>
	</div>
	<div>
	<p>Feature one</p>

	<p>Feature two</p>
	</div>
	</div>
	</div>


	<div class="span-11">
	<div class="box">
	<div>
	<ul>
	<li class="heading">Tour and Demo</li>
	</ul>
	</div>
	<div>
	<div>
	<p>Tour of your product :<br/>
	<a href="#">www.abcxyz.com/tour</a>
	</p>

	<p>Live demo of your product :<br/>
	<a href="#">www.abcxyz.com/demo</a>
	</p>
	</div>
	</div>
	</div>

	<div class="box">
	<div>
	<ul>
	<li class="heading">Contact</li>
	</ul>
	</div>
	<div>
	Your contact details goes here.
	</div>
	</div>
	</div>
	</div>

	<div class="span-22 box">
	Description about your company goes here.
	</div>
	</div>

	</body>
	</html>

Apply necessary styles

	<style type="text/css">
	.top {
	margin-top: 10px;
	}

	.heading {
	font-weight: bold;
	font-size: 22px;
	text-align: left;
	color: #1788DC;
	margin-bottom: 20px;
	}

	#logo h1 {
	color: #357EC7;
	font-family: 'georgia', 'bitstream vera serif', serif;
	font-size: 35px;
	font-weight: normal;
	letter-spacing: 0px;
	line-height: 1;
	margin: 0;
	padding: 10px;
	}

	body {
	color: #000000;
	font-family: 'lucida grande', 'lucida sans unicade', sans-serif;
	line-height: 1.3;
	font-size: 14px;
	}

	ul li {
	list-style: none outside none;
	margin-left: 0;
	word-wrap: break-word;
	}

	ul {
	padding-left: 0;
	}
	</style>

Download and apply Cufon fonts

For this demo, i used vanilla font from Cufon fonts.

	<script src="js/jquery-1.4.min.js" type="text/javascript"></script>
	<script src="js/cufon-yui.js" type="text/javascript"></script>
	<script src="js/fonts/vanilla.cufonfonts.js" type="text/javascript"></script>
	<script>
	$(document).ready(function() {
	Cufon.replace($(".heading"));
	});
	</script>

Export your webpage as pdf

wkhtmltopdf sample-brochure.html sample-brochure.pdf

view raw wkhtmltopdf.txt hosted with ❤ by GitHub

You can download files associated with this blog entry at github repo : https://github.com/selvan/sample-brochure

update : Brochure we created using above discussed points, for Postoz - SaaS hosted business process system is accessible at https://s3.amazonaws.com/postoz/postoz-brochure.pdf

Exploring Software Universe