Responsive Pricing Tables - PHP to HTML5/CSS3 Generator. 25+ Predefined HTML5&CSS3 Pricing Tables

Easy to install HTML5 + CSS3 Responsive Pricing Tables. 65+ predefined pricing tables and 7 color themes.

Responsive HTML5 & CSS3, suitable for every screen, from mobile, tablet or desktop. You can extend and customize provided tables by choosing fonts, colors, spaces and generate the new CSS and HTML.

What you get?

• 65+ pricing tables (more to come soon!)
• 7 table types with multiple customizable themes
• SCSS source files
• Pure CSS! NO Images, NO Javascript!
• Using Google Fonts!
• Separate themes
• HTML code for each pricing table in separate files
• DEMO page where you have all the pricing tables listed + quick installation instructions
• Very detailed DOCUMENTATION page with every step you need to make to install the pricing tables or create new tables based on your needs

Quick Start Guide

After you download the project, locate the project archive on your computer. Unzip the project zip file. In the unzipped directory project you will find the demos and documentation files. Also you will have the assets directory with the already generated CSS files, the php compiler tool, project sources and the generated tables in separate html files.

To list all the generated pricing tables, open demos.html. There you can find very slim steps to quickly install the tables. For more detailed instructions please use documentation.html. If you have any questions, please let us know. We are here to help you!

WATCH VIDEO PREVIEW TO SEE ALL GENERATED PRICING TABLES AND THE DOCUMENTATION

Project Structure

assets/css/components – fonts and grid CSS definitions assets/css/themes – animations and themes CSS definitions compiler – php compiler tool that will help you generate bulk tables src/assets/scss - source files where you can easily change colors, fonts or spacings src/tables - html source code for every generated or predefined pricing table demos.html - demo page for predefined pricing tables documentation.html – refer to this page for more instructions about how you can import current pricing tables or generate new ones

You don’t have a clue what’s HTML or CSS?

We created for you a DEMO page from where you just need to copy some lines into your page and you have the pricing tables ready to use.

Are you familiar with HTML and CSS?

Use our documentation page and customize your CSS files. We provide CSS variables for each pricing table that can be easily changed to meet your project color scheme, fonts or spacings. We followed the Bootstrap/Tailwind design pattern and implemented a grid system, a files structure that can be easily followed and customized.

Are you an intermediate designer?

For you we have provided the SCSS files for the project. Pricing tables’ CSS can be generated with the SASS tools directly from our SCSS files. Change everything you need to meet your client needs.

You heard about PHP and ran some scripts?

Generate new pricing tables in bulk! We provide a config.php file where you can add new tables combinations, then run a simple PHP script that will generate a new DEMO page with all new pricing tables combinations.

FAQ

How can I quickly import one table?

• Open demos.html
• Scroll and select a table you like
• Click on the green “How to install this table?” button
• You will see the instructions about how to include the CSS files and the HTML code
• If you want to have different number of items in the pricing table do not forget to change the ‘data-plans=”4”’ setting (eg: this table has 4 items predefined)

I know how to work with CSS. How can I customize my tables?

• Open assets/css/component/fonts.css
• Import desired font (or if you already have a font family skip this step) 
• Update the .font-lato definition with your desired font family 
• Open assets/css/component/theme-{n}.css ({n} would be the theme assigned to your favourite table – this can be found in the demo.html for every predefined table) 
• In the body section you will see all the colors used in that theme, just need to update them and the changes will be reflected into your selected table

I would like to update the CSS from SCSS files.

• Go to src/assets/scss and select the file you want to update
• Update your CSS definitions
• Use a SASS tool to compile the file
• The compiled SCSS file are located in the assets folder having the same structure

I want to generate more tables in bulk using PHP!

• The PHP compiler is located in the compiler directory
• First open compiler/config.php file and check the vars: $plans defines the items content and the $tables has the base configuration for every table
• Change $plans text or add more $tables items
• Execute php compiler/demos.php > demos_test.html ( Important: the demos.php uses sass command to compile SCSS files and generate HTML & CSS files for every pricing table + the final demos.html page)
• Open demos_test.html and you’ll see your latest changes
• Enjoy!

=========================================

As you can see, we provided tools for every level of experience with web development and design. If you just start an website on your own and you don’t have a clue about design and web programming or if you are an experienced developer, we can help you and save lot of time and money!  

Changelog

2023-09-19 - v1.1.1
- Improved existing tables color schemes!
- Updated the documentation to reflect the changes

2023-09-18 - v1.1
- Restructured the themes files for better customizations
- Added more color combinations
- Added new tables
- Updated the documentation to reflect the changes

2023-08-22 - v1.0
- First version