This downlaodable pack of responsive CSS3 pricing tables is a free and ready to use. Modern, awesome and clean design, flat or fancy styled. Smooth hover transitions, featured column(s) and the ability to add pure CSS ribbons as well. For a easy customization all SASS files are included.
It comes with several settings and color skins. Just play with the different configurations on the demo page.
You will find some example pricing tables markup's on the demo page which is located in the root directory (demo.html).
You need 3 CSS files to get the final result of your pricing table. First the core Stylesheet which is named pricing-table.css. It is located in the css directory inside the download package (css/pricing-table.css).
The 2nd file you need is the settings stylesheet. There are some different setting styles located in the settings folder inside css directory (css/settings/settings-XXX.css). Just choose the one you like.
Last but not least the color style. Several color skins are stored in the directory colors (css/colors/color-XXX.css). Pick your favorite colors here.
All CSS classes comes with prefix pt- to avoid problems with your existing page styles.
To easily and comfortable create your own setting and/or color stylesheet file, you'll find some additional SASS files in assets/sass.
First you have to include three additional CSS files inside the head-tag of your HTML file. Now you have to choose one CSS file for the setting and another one for the colors to get a flexible and individual configuration of your pricing table.
There is a little JavaScript file, which is neccessary for the right positon of the table header, to include too. If your project/website doesn't already use the jQuery library, you have to include it too. I use the current version 1.10.2 (IE7/IE8). Just look at the example below.
After all the stylesheets and JavaScripts are included it's time for the HTML markup. The best way to start is to copy one of the pricing table example from the demo page.
To get all these thing work you have to define two main container first, you can use any block-element like div, section or article. All following elements of the pricing table has to be inside these containers pt-container and pt-wrapper.
The pricing tables are build like a small grid system, each data table in it's single column. These pricing tables come with two possible grid systems, a 16 column grid which is the default one, and a 12 column grid. To use the 12 column grid, just add the class pt-grid-12 to the main grid container pt-container.
...
Now you are prepared to set the columns inside the pt-container and the pt-wrapper. Create a div-container for each column with the class pt-col-X, where X is the size of the column (e.g. pt-col-1, pt-col-2, pt-col-6 or maybe pt-col-8). Make sure that the number of all the columns fits the size of its grid, 16 or 12.
...
...
...
...
...
...
...
...
With adding the class pt-iterate-horizontal to the main container (pt-container), the colors of all content types will be alternate horizontally.
...
Each column is waiting for its content now. Therefore you just have to create an unordered list (ul) with the class pt-inner. For the list items (li) inside this list you can choose between some different content types. Just add one of these classes to each list element: pt-head, pt-shoutout, pt-image, pt-body, pt-description or pt-foot. It's not necessary to use all of them, just use the ones you really need. Also the order is freely selectable.
Please make sure that all lists (pt-inner) has the same structure and the same number of elements. Otherwise the different columns doesn't look similar and their heights will become different sizes.
The default alignment of the content inside a list item is centered. With an additional class (pt-align-left or pt-align-left) you can easily change the alignment of each list item manually to left or right.
...
For a heading column, you can use as many as you like, you need an easy and quite similar markup as for the content. Make sure that the parent list gets the class pt-data-inner instead of pt-inner.
To create a featured column you just have to add the class pt-featured to the list (pt-inner). You can use as many featured columns as you like.
Just create an additional list item with the class pt-ribbon inside your content list (pt-inner). To finish the ribbon item, there needs to be a div with class pt-ribbon-title as content like in the example below.
If you want some other settings or colors as the predefined ones, you need some CSS coding skills of course. Believe me, it's not that difficult.
Copy one of the default CSS files, e.g. css/settings/settings-default.css for new cutomized settings or css/colors/color-default.css for your own color skin, name it as you like and change margins, paddings and/or colors manually.
If you are familiar with SASS and compass you can easily create your own custom styles for these tables. Nearly everything (background colors, text colors, border colors, margins, etc.) is configurated via SASS variables. This of course is much more comfortable than edit the CSS files manually.
Just copy one of the default files, e.g. assets/sass/settings/settings-default.scss for new cutomized settings or assets/sass/colors/color-default.scss for your own color skin, name it as you like and change the variables to your specific needs and create the CSS file(s). Done.
If you want to use the pricing tables in older Internet Explorers (IE7/IE8), not all things of the pricing tables will unfortunately work here (no support for rounded corners, gradients, shadows and animations).
The pricing tables even look much better in these old browsers when you use conditional comments to apply classes to the body tag. That's a very popular method which you can find on html5boilerplate. This page uses it also. Just add the following to your HTML head:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
Following browser are supported: