Creating attention-grabbing pricing tables

Packt Publishing

Without Bootstrap your web designs may not be reaching their full potential. This book will change that through a series of hands-on projects covering everything from custom icon fonts to JavaScript plugins.

Let's revisit the mockup of how our client would like the pricing tables to look on desktop-sized screens:

Let's see how close we can get to the desired result, and what we can work out for other viewport sizes.

Setting up the variables, files, and markup

As shown in the preceding screenshot, there are a few tables in this design. We can begin by adjusting a few fundamental variables for all tables. These are found in _variables.less. Search for the tables section and adjust the variables for background, accented rows, and borders as desired. I've made these adjustments as shown in the following lines of code:

Save the file, compile it to CSS, and refresh to see the result as shown in the following screenshot:

That's a start. Now we need to write the more specific styles.

The _page-contents.less file is now growing long, and the task before us is extensive and highly focused on table styles. To carry the custom styles, let's create a new LESS file for these pricing tables:

Create _pricing-tables.less in the main less folder.

Import it into __main.less just after _page-contents.less as shown in the following line:

@import "_pricing-tables.less";

Open _pricing-tables.less in your editor and begin writing your new styles.

But before we begin writing styles, let's review the markup that we'll be working with.

We have the following special classes already provided in the markup on the parent element of each respective table:

package package-basic

package package-premium

package package-pro

Thus, for the first table, you'll see the following markup on its parent div:

Similarly, we'll use package package-premium and package package-pro for the second and third table, respectively.

These parent containers obviously also provide basic layout instructions using the col-md-4 class to set up a three-column layout in medium viewports.

Next, we will observe the markup for each table. We see that the basic table and table-striped classes have been applied:

<table class="table table-striped">

The table uses the <thead> element for its top-most block. Within this, there is <th> spanning two columns, with an <h2> heading for the package name and <div class="price"> to markup the dollar amount:

In short, we've accomplished everything except increasing the size of the price tables. We can get started on this by adding the following lines of code, which are still nested within our #signup table selector:

.price { font-size: 7em; line-height: 1;}

This yields the following result:

This is close to our desired result, but we need to decrease the size of the dollar sign. To give ourselves control over that character, let's go to the markup and wrap a span tag around it:

<em class="price"><span>$</span>19</em>

Remember to do the same for the other two tables.

With this new bit of markup in place, we can nest this within our styles for .price:

.price {...span {font-size: .5em;vertical-align: super;}

These lines reduce the dollar sign to half its size and align it at the top.

Now to recenter the result, we need to add a bit of negative margin to the parent .price selector:

.price {margin-left: -0.25em;...

The following screenshot shows the result:

Styling the table body and foot

By continuing to focus on the styles that apply to all three pricing tables, let's make the following adjustments:

Save the file, compile it to CSS, and refresh the browser. You should see the following result:

We're now ready to add styles to differentiate our three packages.

Differentiating the packages

Let's begin by giving each package the desired color for the table head and the Sign up now! button. Our provided mockup uses blue for the Basic, green for the Premium, and red for the Pro packages. Let's prepare our color scheme by using the chosen color values in new variables for primary, secondary, and tertiary brand colors, as shown in the following lines of code:

Having set up these colors, we can efficiently apply them to the appropriate thead and button elements. We'll use the distinctive class that we applied earlier to each table's parent element, that is, package-basic, package-premium, and package-pro:

In the less/_pricing-tables.less file, begin a new section with a comment:

// Pricing Table Colors

We'll apply the primary brand color to the .package-basic table using the @brand-primary variable; we'll try it first on the thead th element:

When compiled, this concise mixin will generate styles for the button and its hover and active states!

For a reminder of how the .button-variant() mixin works, consult bootstrap/mixins.less, where the mixin is defined, and then bootstrap/buttons.less, where it is used to define the default Bootstrap button classes.

Now, we need to repeat the same for our .package-premium table, this time, however, using the @brand-secondary variable:

Save the file, compile it to CSS, and refresh your browser. You should see the new colors we applied to our tables.

Nice!

Now, let's check how our tables respond to various viewport widths.

Adjusting for small viewports

Thanks to the attention Bootstrap 3 gives to responsive design, our tables perform quite well across viewport breakpoints. We've already seen the way our tables fair in the medium breakpoint range. In large screens, the tables expand wider, as shown in the following screenshot:

In narrow viewports, the tables stack up vertically, as shown in the following screenshot, quite nicely:

However, there is an awkward range of width approximately between 480px and 992px where the tables expand to fill the full width of the screen. Clearly, they become too wide, as shown in the following screenshot:

Because we have three tables, there is no benefit involved in having a two-column layout at this dimension. Instead, let's constrain the width of our tables and align them at the center with auto left and right margins. We'll use a media query with max-width of @screen-sm-max set to 400px as our maximum width, and use the .center-block() mixin to keep our tables at the center in the window:

Save the file, compile it to CSS, and refresh your browser. You should see nicely constrained tables aligned at the center within the window! The following screenshot shows our result:

At this point, our tables are differentiated by color and are responsive. However, one last step remains. In the medium and large viewport widths, we want the premium plan to stand out.

Providing visual hierarchy to our tables

If we look back at the mockup, we see that the design—at least for desktop-sized viewports—calls for visual emphasis upon the central premium plan by increasing its size and bringing it visually into the foreground, as shown in the following screenshot:

This can be accomplished with some adjustments to padding, margins, and font sizes.

Nudged the BASIC PLAN (leftmost) table to the right using a negative value for margin-right and compensating this by nudging the equivalent margin to the left to keep everything positioned as it was originally (else all three tables will start sliding to the left)

Nudged the PRO PLAN (rightmost) table to the left with the negative left margin

Adjusted the z-index values for all tables so that the basic and pro tables appear to line up behind our premium table

Our work is almost done. We only need to adjust the margins for the basic table when we cross the next larger breakpoint. After closing the previous media query, begin a new one and add these margin adjustments:

Alerts & Offers

Series & Level

We understand your time is important. Uniquely amongst the major publishers, we seek to develop and publish the broadest range of learning and information products on each technology. Every Packt product delivers a specific learning pathway, broadly defined by the Series type. This structured approach enables you to select the pathway which best suits your knowledge level, learning style and task objectives.

Learning

As a new user, these step-by-step tutorial guides will give you all the practical skills necessary to become competent and efficient.

Beginner's Guide

Friendly, informal tutorials that provide a practical introduction using examples, activities, and challenges.

Essentials

Fast paced, concentrated introductions showing the quickest way to put the tool to work in the real world.

Cookbook

A collection of practical self-contained recipes that all users of the technology will find useful for building more powerful and reliable systems.

Blueprints

Guides you through the most common types of project you'll encounter, giving you end-to-end guidance on how to build your specific solution quickly and reliably.

Mastering

Take your skills to the next level with advanced tutorials that will give you confidence to master the tool's most powerful features.

Starting

Accessible to readers adopting the topic, these titles get you into the tool or technology so that you can become an effective user.

Progressing

Building on core skills you already have, these titles share solutions and expertise so you become a highly productive power user.