Skip to content

Instantly share code, notes, and snippets.

@crowcoder

crowcoder/Invoice

Created September 4, 2014 23:39
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save crowcoder/c4ac49ba30048262db8c to your computer and use it in GitHub Desktop.
Save crowcoder/c4ac49ba30048262db8c to your computer and use it in GitHub Desktop.
Download ZIP
CSS/HTML only report sample implemented as a simple Invoice
Raw
Invoice
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Invoice</title>
<style media="screen">
body {
font-family: 'Segoe UI','Microsoft Sans Serif',sans-serif;
}
/*
These next two styles are apparently the modern way to clear a float. This allows the logo
and the word "Invoice" to remain above the From and To sections. Inserting an empty div
between them with clear:both also works but is bad style.
Reference:
http://stackoverflow.com/questions/490184/what-is-the-best-way-to-clear-the-css-style-float
*/
header:before, header:after {
content: " ";
display: table;
}
header:after {
clear: both;
}
.invoiceNbr {
font-size: 40px;
margin-right: 30px;
margin-top: 30px;
float: right;
}
.logo {
float: left;
}
.from {
float: left;
}
.to {
float: right;
}
.fromto {
border-style: solid;
border-width: 1px;
border-color: #e8e5e5;
border-radius: 5px;
margin: 20px;
min-width: 200px;
}
.fromtocontent {
margin: 10px;
margin-right: 15px;
}
.panel {
background-color: #e8e5e5;
padding: 7px;
}
.items {
clear: both;
display: table;
padding: 20px;
}
/* Factor out common styles for all of the "col-" classes.*/
div[class^="col-"] {
display: table-cell;
padding: 7px;
}
/*for clarity name column styles by the percentage of width */
.col-1-10 {
width: 10%;
}
.col-1-52 {
width: 52%;
}
.row {
display: table-row;
page-break-inside: avoid;
}
</style>
<!-- These styles are exactly like the screen styles except they use points (pt) as units
of measure instead of pixels (px) -->
<style media="print">
body {
font-family: 'Segoe UI','Microsoft Sans Serif',sans-serif;
}
header:before, header:after {
content: " ";
display: table;
}
header:after {
clear: both;
}
.invoiceNbr {
font-size: 30pt;
margin-right: 30pt;
margin-top: 30pt;
float: right;
}
.logo {
float: left;
}
.from {
float: left;
}
.to {
float: right;
}
.fromto {
border-style: solid;
border-width: 1pt;
border-color: #e8e5e5;
border-radius: 5pt;
margin: 20pt;
min-width: 200pt;
}
.fromtocontent {
margin: 10pt;
margin-right: 15pt;
}
.panel {
background-color: #e8e5e5;
padding: 7pt;
}
.items {
clear: both;
display: table;
padding: 20pt;
}
div[class^="col-"] {
display: table-cell;
padding: 7pt;
}
.col-1-10 {
width: 10%;
}
.col-1-52 {
width: 52%;
}
.row {
display: table-row;
page-break-inside: avoid;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="../images/genericlogo.jpg" alt="generic business logo" height="181" width="167" />
</div>
<div class="invoiceNbr">
Invoice 00014
<br />
9/1/2014
</div>
</header>
<div class="fromto from">
<div class="panel">FROM:</div>
<div class="fromtocontent">
<span>Robert Crowley</span><br />
<span>123 My St.</span><br />
<span>Portland ME, 04101</span><br />
</div>
</div>
<div class="fromto to">
<div class="panel">TO:</div>
<div class="fromtocontent">
<span>Someone</span><br />
<span>123 Street St.</span><br />
<span>Portland ME, 04101</span>
</div>
</div>
<section class="items">
<!-- your favorite templating/data-binding library would come in handy here to generate these rows dynamically !-->
<div class="row">
<div class="col-1-10 panel">
Date
</div>
<div class="col-1-52 panel">
Description
</div>
<div class="col-1-10 panel">
Units
</div>
<div class="col-1-10 panel">
Rate
</div>
<div class="col-1-10 panel">
Sub Total
</div>
</div>
<div class="row">
<div class="col-1-10">
8/30/2014
</div>
<div class="col-1-52">
Mares eat oats and does eat oats and little lambs eat ivy.
</div>
<div class="col-1-10">
12
</div>
<div class="col-1-10">
25
</div>
<div class="col-1-10">
$300.00
</div>
</div>
<div class="row">
<div class="col-1-10">
9/1/2014
</div>
<div class="col-1-52">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel massa erat. Suspendisse sit amet placerat felis. Sed consequat semper leo sed ultrices. Morbi dignissim ligula vel tellus congue, ut ornare massa egestas. Nulla ut rutrum felis. Pellentesque imperdiet, mi quis mollis placerat, urna lacus porta turpis, sit amet scelerisque purus neque et libero. Etiam in rutrum purus, ac fringilla diam. Etiam sed tortor justo. Nulla est massa, cursus sed eleifend consectetur, aliquam semper ligula. Vivamus non tellus id quam semper consequat. Morbi eget euismod mi. Nulla quis blandit est. Sed eleifend massa vel nisl ornare, sed vulputate arcu dictum. Cras pulvinar eros sit amet est rutrum sollicitudin. Morbi vitae diam congue, commodo nunc vel, tristique lacus.
</div>
<div class="col-1-10">
12
</div>
<div class="col-1-10">
25
</div>
<div class="col-1-10">
$300.00
</div>
</div>
<div class="row">
<div class="col-1-10">
9/3/2014
</div>
<div class="col-1-52">
Morbi eget euismod mi. Nulla quis blandit est. Sed eleifend massa vel nisl ornare, sed vulputate arcu dictum. Cras pulvinar eros sit amet est rutrum sollicitudin. Morbi vitae diam congue, commodo nunc vel, tristique lacus.
</div>
<div class="col-1-10">
12
</div>
<div class="col-1-10">
25
</div>
<div class="col-1-10">
$300.00
</div>
</div>
<div class="row panel">
<div class="col-1-10">
</div>
<div class="col-1-52">
</div>
<div class="col-1-10">
</div>
<div class="col-1-10">
Pay this amount:
</div>
<div class="col-1-10">
$900.00
</div>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment