StaffingNation Dynamic Pricing Table
October 2019 - December 2019
- Create a WP Admin area that was easily editable by the client
- Make a fairly large table viewable on mobile, accounting for future changes
StaffingNation needed a large table that shows pricing for 4 different tiers. My job was to take their design and make a functional toggleable table in their WordPress theme. The table needed to represent the same options on mobile, which proved to be more of a challenge than desktop.
After all the above testing was finished, the last challenge was to adapt the table to a mobile design. We ended up keeping the same layout but changing the headers to be vertical. This proved to be a happy medium and made presenting a large amount of data on a small screen doable.
Want to check out some code demos?
Converting jQuery Blog Post Component To Vanilla JS
Defining Reusable Column Extends with SCSS
Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]