Quartz 4

Pricing Table

5 min read

Metadata

Notes

Project: Building a Responsive Pricing Table with Flexbox

This project consolidates knowledge of Flexbox and media queries to build a common web component: a dynamic and responsive pricing table.

1. Project Goal

  • Component: A pricing table with three categories (e.g., Small, Medium, Large).
  • Key Features:
    • Dynamic Width: Each pricing card’s width should adjust based on available screen space.
    • Responsiveness:
      • Large Screens: Cards arranged horizontally.
      • Small Screens: Cards stack vertically.
  • Styling: Apply various CSS properties for visual appeal (backgrounds, borders, fonts, etc.).

2. Initial Setup

  1. Download & Extract: Obtain the starting files for the Pricing Table Project.
  2. Open in VS Code: Open the index.html file.
  3. Preview: View index.html in a browser or VS Code’s preview mode.
    • The HTML structure (text, elements) is provided.
    • Basic CSS includes a Google Font (Sono).

3. Core Requirements (Flexbox & Responsiveness)

The most critical aspects to implement using Flexbox are:

  • Horizontal Layout on Large Screens: Cards sit side-by-side.
  • Vertical Stacking on Small Screens: Cards arrange one on top of the other.
  • Dynamic Width: Cards should adapt their size to the container.

4. Media Query Hint

  • Media Queries (@media rule): Essential for applying different styles based on screen characteristics (e.g., max-width).
  • Think: How can you use a media query in conjunction with flex-direction to achieve the desired stacking behavior?

5. Solution Breakdown

5.1. body Styling (Optional but Recommended)

  • Applies a background color to the entire page and sets the font family.

    body {
    font-family: 'Sono', sans-serif;
    background-color: #f0f0f0; /* Light grey background */
    display: flex; /* Makes body a flex container to center pricing table */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    height: 100vh; /* Ensures body takes full viewport height for centering */
    margin: 0; /* Remove default body margin */
}
    • Tip for Centering: Setting display: flex; justify-content: center; align-items: center; height: 100vh; on the body (or a main container) is a highly effective way to center content vertically and horizontally in CSS.

5.2. pricing-container (Flex Container)

This is the main Flexbox container that holds all the individual pricing cards.

  • display: flex;: Initializes Flexbox.

  • justify-content: center;: Centers the entire group of pricing cards horizontally within the body.

  • align-items: center;: Centers the entire group of pricing cards vertically within the body. (This works in conjunction with the body’s flex properties if the pricing-container itself is the only item in the body).

  • gap: 20px;: Adds consistent spacing between each pricing card.

  • height: 100vh;: Makes the container take up the full viewport height initially.

    .pricing-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between cards */
    /* height: 100vh; */ /* Initial height, may be overridden by media query */
}

5.3. pricing-plan (Flex Items)

These are the individual pricing cards (Basic, Standard, Premium).

  • flex: 1;:

    • flex-grow: 1;: Allows cards to grow and fill available space.
    • flex-shrink: 1;: Allows cards to shrink if space is limited.
    • flex-basis: 0%;: Gives each card an equal base size, ensuring they share space equally when growing/shrinking.

  • max-width: 400px;: Prevents cards from becoming excessively wide on very large screens, keeping the design clean and readable. This ensures they don’t stretch infinitely.

  • Padding & Background:

    • padding: 20px;: Inner spacing for content.
    • background-color: #f2f2f2; (light grey): Differentiates cards from the background.

  • border-radius: 5px;: Softens the corners.

  • text-align: center;: Centers all text content within each card.

    .pricing-plan {
    flex: 1; /* Equal width, grow & shrink */
    max-width: 400px; /* Prevents excessive width */
    padding: 20px;
    background-color: #f2f2f2;
    border-radius: 5px;
    text-align: center;
}

5.4. Inner Content Styling

These styles are for the specific text elements within each pricing card.

  • .plan-title:
    • font-size: 1.5rem; (or 24px): Larger heading.
    • font-weight: bold;: Bold text.
    • margin-bottom: 10px;: Space below the title.
  • .plan-price:
    • font-size: 3rem; (or 48px): Very large for emphasis.
    • font-weight: bold;: Bold.
    • margin-bottom: 10px;: Space below the price.
  • .plan-features (Unordered List - <ul>):
    • list-style: none;: Removes default bullet points.
    • padding: 0; margin: 0;: Removes default list padding/margin to bring items closer.
    • margin-bottom: 20px;: Space before the button.
  • .plan-features li (List Items - <li>):
    • margin-bottom: 10px;: Space between individual features.
  • button:

    • background-color: #ff6600; (orange): Distinctive button color.

    • color: white;: White text on button.

    • padding: 10px 20px;: Inner spacing.

    • border: none;: Removes default button border.

    • border-radius: 5px;: Rounded button corners.

    • cursor: pointer;: Changes cursor on hover.

    • Image: Styled Pricing Cards (Goal Large)

      (Imagine a screenshot of the goal-large.png file, showing three horizontally arranged, styled pricing cards with centered text, clear titles, prices, features, and an orange button at the bottom.)

5.5. Responsiveness with Media Queries

This is where the layout changes for smaller screens.

  • @media (max-width: 1250px): This rule applies CSS only when the viewport width is 1250 pixels or less.

  • pricing-container modifications:

    • flex-direction: column; : Changes the layout from horizontal to vertical stacking.
    • height: 100%; : Crucial! Changes the container’s height from 100vh (viewport height) to 100% of its content. If 100vh were kept, content would be cut off as the stacked cards would exceed one viewport height. 100% allows the container to expand as needed to fit all content.
    @media (max-width: 1250px) {
    .pricing-container {
        flex-direction: column; /* Stack cards vertically */
        height: 100%; /* Allow container to expand with content */
    }
}
    • Image: Stacked Pricing Cards (Goal Small) (Imagine a screenshot of the goal-small.png file, showing the three pricing cards now stacked vertically, one below the other.)

6. Review and Experimentation

  • Play around: Change values, add/remove properties to understand their impact.
  • Check Solution Code: Compare your code with the provided solution (e.g., solution.html or similar). Understand why certain properties are used.
  • Don’t worry about exact styling matches: The core learning is applying Flexbox for responsiveness. Styling is a matter of personal preference.
  • Share your work: If you’re proud of your custom styling, share a screenshot!

References

Graph View

Backlinks