Responsive Pricing Tables. 65+ HTML5/CSS3 Pricing Tables Template UI Kit. Tables Generator Included
Easy to put in HTML5 + CSS3 Responsive Pricing Tables. 65+ predefined pricing tables and seven shade themes.
Responsive HTML5 & CSS3, appropriate for each display screen, from cell, pill or desktop. You can lengthen and customise supplied tables by selecting fonts, colours, areas and generate the brand new CSS and HTML.
What you get?
- 65+ pricing tables (extra to come back quickly!)
- 7 desk sorts with a number of customizable themes
- SCSS supply recordsdata
- Pure CSS! NO Images, NO Javascript!
- Using Google Fonts!
- Separate themes
- HTML code for every pricing desk in separate recordsdata
- DEMO web page the place you’ve all of the pricing tables listed + fast set up directions
- Very detailed DOCUMENTATION web page with each step it is advisable to make to put in the pricing tables or create new tables based mostly in your wants
Quick Start Guide
After you obtain the undertaking, find the undertaking archive in your pc. Unzip the undertaking zip file. In the unzipped listing undertaking you will see that the demos and documentation recordsdata. Also you should have the property listing with the already generated CSS recordsdata, the php compiler software, undertaking sources and the generated tables in separate html recordsdata.
To record all of the generated pricing tables, open demos.html. There you’ll find very slim steps to shortly set up the tables. For extra detailed directions please use documentation.html. If you’ve any questions, please tell us. We are right here that can assist you!
WATCH VIDEO PREVIEW TO SEE ALL GENERATED PRICING TABLES AND THE DOCUMENTATION
Project Structure
property/css/elements – fonts and grid CSS definitions
property/css/themes – animations and themes CSS definitions
compiler – php compiler software that can allow you to generate bulk tables
src/property/scss – supply recordsdata the place you may simply change colours, fonts or spacings
src/tables – html supply code for each generated or predefined pricing desk
demos.html – demo web page for predefined pricing tables
documentation.html – seek advice from this web page for extra directions about how one can import present pricing tables or generate new ones
You don’t have a clue what’s HTML or CSS?
We created for you a DEMO web page from the place you simply want to repeat some traces into your web page and you’ve got the pricing tables prepared to make use of.
Are you acquainted with HTML and CSS?
Use our documentation web page and customise your CSS recordsdata. We present CSS variables for every pricing desk that may be simply modified to fulfill your undertaking shade scheme, fonts or spacings. We adopted the Bootstrap/Tailwind design sample and carried out a grid system, a recordsdata construction that may be simply adopted and customised.
Are you an intermediate designer?
For you we now have supplied the SCSS recordsdata for the undertaking. Pricing tables’ CSS will be generated with the SASS instruments immediately from our SCSS recordsdata. Change every thing it is advisable to meet your consumer wants.
You heard about PHP and ran some scripts?
Generate new pricing tables in bulk! We present a config.php file the place you may add new tables combos, then run a easy PHP script that can generate a brand new DEMO web page with all new pricing tables combos.
FAQ
How can I shortly import one desk?
- Open demos.html
- Scroll and choose a desk you want
- Click on the inexperienced “How to put in this desk?” button
- You will see the directions about learn how to embody the CSS recordsdata and the HTML code
- If you need to have completely different variety of objects within the pricing desk don’t forget to vary the ‘data-plans=”4”’ setting (eg: this desk has 4 objects predefined)
I understand how to work with CSS. How can I customise my tables?
- Open property/css/element/fonts.css
- Import desired font (or if you have already got a font household skip this step)
- Update the .font-lato definition along with your desired font household
- Open property/css/element/theme-{n}.css ({n} could be the theme assigned to your favorite desk – this may be discovered within the demo.html for each predefined desk)
- In the physique part you will note all the colours utilized in that theme, simply must replace them and the modifications shall be mirrored into your chosen desk
I want to replace the CSS from SCSS recordsdata.
- Go to src/property/scss and choose the file you need to replace
- Update your CSS definitions
- Use a SASS software to compile the file
- The compiled SCSS file are situated within the property folder having the identical construction
I need to generate extra tables in bulk utilizing PHP!
- The PHP compiler is situated within the compiler listing
- First open compiler/config.php file and test the vars: $plans defines the objects content material and the $tables has the bottom configuration for each desk
- Change $plans textual content or add extra $tables objects
- Execute php compiler/demos.php > demos_test.html ( Important: the demos.php makes use of sass command to compile SCSS recordsdata and generate HTML & CSS recordsdata for each pricing desk + the ultimate demos.html web page)
- Open demos_test.html and also you’ll see your newest modifications
- Enjoy!
=========================================
As you may see, we supplied instruments for each degree of expertise with internet improvement and design. If you simply begin an web site by yourself and also you don’t have a clue about design and internet programming or if you’re an skilled developer, we may also help you and save lot of money and time!
Changelog
2023-09-19 - v1.1.1 - Improved present tables shade schemes! - Updated the documentation to replicate the modifications 2023-09-18 - v1.1 - Restructured the themes recordsdata for higher customizations - Added extra shade combos - Added new tables - Updated the documentation to replicate the modifications 2023-08-22 - v1.0 - First model
