Flexbox Pricing Plan

flexbox-pricing-plan.markdown

Flexbox Pricing Plan

Best viewed with editors to left or right.

Working on using flexbox to display pricing plans with varying heights of content, with nice transitions, and mostly just using CSS. Very minimal JS for an optional piece of data. Also, using media queries to stack items when the boxes become too narrow.

TODO: COMMENT CODE, IE Testing, Decide if prices should be centered. (effects design, not functionality), Adding "best choice" or some other item to showcase one of the options, Fix weird choppy slideDown for when "more options" is clicked Decide to hide "more options" as it is now, or always expose this information.

A Pen by Lindsey on CodePen.

License.

index.html

<div class="plans">
  <div class="plan-box">
    <div class="plan-options">
      <p class="plan-name">
        Personal
      </p>
      <div class="plan-price">
        <strong>Free</strong>
      </div>
       <ul class="plan-details">
         <li>1 sub-domain</li>
         <li><strong>10</strong> email addresses</li>
         <li><strong>Unlimited</strong> Bandwidth</li>
         <li><strong>20GB</strong> Storage</li>
         <li>Support Ads</li>
         <li>Shared Hosting</li>
         <li><strong>24/7</strong> Customer Support</li>
      </ul>
      
      <div class="element-hidden more-options">
        <a href="#">+ more options</a>
        <div class="element-hidden additional-options">
          <p>If you need more options, please consider our <a href="#">Premium</a> or <a href="#">Pro</a> plans.</p>
        </div>
      </div>
      
      <a class="button" href="#">Choose</a>
    </div>
  </div>
  
  <div class="plan-box">
    <div class="plan-options">
      <p class="plan-name">
        Premium
      </p>
      <div class="plan-price">
        <strong>$19</strong>/mo
      </div>
       <ul class="plan-details">
         <li><strong>FREE</strong> custom domain</li>
         <li><strong>Unlimited</strong> email addresses</li>
         <li><strong>Unlimited</strong> Bandwidth</li>
         <li><strong>100GB</strong> Storage</li>
         <li><strong>No Support Ads</strong></li>
         <li><strong>24/7</strong> Customer Support</li>
      </ul>
      
      <div class="element-hidden more-options">
        <a href="#">+ more options</a>
        <div class="element-hidden additional-options">
          <ul>
            <li><input type="checkbox" id="10gb" name="extragigs" /> <label for="10gb">10GB more storage</label></li>
          </ul>
        </div>
      </div>
      
      
      <!-- Hiding until I think of a better style
      <div class="best-choice">
          Voted Best Choice
      </div> -->
      
      <a class="button" href="#">Choose</a>
    </div>
  </div>
  
  <div class="plan-box">
    <div class="plan-options">
      <p class="plan-name">
        Pro
      </p>
      <div class="plan-price">
        <strong>$50</strong>/mo
      </div>
       <ul class="plan-details">
         <li><strong>FREE</strong> custom domain</li>
         <li><strong>Unlimited</strong> email addresses</li>
         <li><strong>Unlimited</strong> Bandwidth</li>
         <li><strong>200GB</strong> Storage</li>
         <li><strong>No Support Ads</strong></li>
         <li><strong>Quick Install</strong> Apps (WordPress, etc)</li>
         <li><strong>VPS Hosting</strong></li>
         <li><strong>24/7</strong> Customer Support</li>
      </ul>
      
      <div class="element-hidden more-options">
        <a href="#">+ more options</a>
        <div class="element-hidden additional-options">
          <ul>
            <li><input type="checkbox" id="10gb" name="extragigs" /> <label for="10gb">10GB more storage</label></li>
            <li><input type="checkbox" id="marketing" name="marketing" /> <label for="marketing">SEO and Marketing Monthly Evaluation</label></li>
          </ul>
        </div>
      </div>
      
      <a class="button" href="#">Choose</a>
    </div>
  </div>
</div>

script.js

$('.more-options a').click(function(e) {
  $(this).next('.additional-options').slideToggle();
  e.preventDefault();
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

$beige: #F7EDB7;
$dark-grey: #272F30;
$orange: #E0401C;
$red: #9E2B20;
$warm-white: #FFFCEF;
$light-blue: #D5FFFC;
$dull-blue: #437299;
$base-font: Oxygen, Arial, Helvetica, sans-serif;
$heading-font: Oswald, Arial, Helvetica, sans-serif;

* {
    box-sizing: border-box;
    transition: all 1s;
}

body {
  background: $beige;
  color: $dark-grey;
  font: 16px $base-font;
  font-weight: 300;
  padding: 50px 0;
}

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.element-hidden {
  display: none;
}

.plan-name, .plan-price, .plan-details, .button, .more-options, .best-choice {
    padding: 10px;
 }

.plans {
  margin: 0 auto;
  max-width: 80%;
  display: flex;
  flex-flow: row wrap;
  position: relative;
  .plan-box {
    display: flex;
    width: 33.3333%;
    background: $warm-white;
    margin: 10px 0;
    min-height: 650px;
    .best-choice {
      background: $light-blue;
      text-transform: uppercase;
      font-weight: 600;
      color: $dull-blue;
      @include box-shadow(inset 0 -2px 3px rgba(0, 0, 0, .15), inset 0 2px 3px rgba(0, 0, 0, .15));
      margin-top: auto;
    }
    &:hover {
      margin-top: -15px;
      background: white;
      @media all and (max-width: 700px) {
        margin-top: 10px;
      }
      .button {
        //padding: 20px;
        //font-size: 30px;
      }
      .plan-name {
        color: black;
      }
      .plan-price {
        background: saturate($red, 55%);
        @include box-shadow(inset 0 -4px 3px rgba(0, 0, 0, .15), inset 0 4px 3px rgba(0, 0, 0, .15));
        text-align: center;
      }
      .more-options {
        display: block;
        padding: 20px;
        text-align: right;
        position: relative;
        .additional-options {
          position: relative;
          text-align: left;
          width: 100%;
          margin: 0;
        }
        a {
          color: $red;
          text-decoration: none;
        }
      }
    }
    @media all and (max-width: 700px) {   
      &:first-child {
        margin-bottom: 20px;
      }
    }
    &:last-child {
      //margin-right: 0;
    }
    &:nth-child(2) {
      margin-top: 0;
      @include box-shadow(-3px 0 3px rgba(0, 0, 0, .15), 3px 0 3px rgba(0, 0, 0, .15));
      position: relative;
      &:hover {
        margin-top: -35px;
        @media all and (max-width: 700px) {
          margin-top: 0px;
          marign-right: -30px;
        }
      }
    }
    @media all and (max-width: 700px) {
      width: 100%;
    }
  }
  .plan-name {
    font: 300 32px $heading-font;
    text-align: center;
    margin: 0;
    padding: 20px;
  }
  .plan-price {
    background: $red;
    color: white;
    display: flex;
    font: 24px $heading-font;
    padding: 20px 10px;
    text-align: center;
    strong {
      font-size: 34px;
      align-self: baseline;
      line-height: 1;
      font-weight: 500;
    }
  }
  .plan-options {
    display: flex;
    flex-flow: column;
    width: 100%;
    li {
      border-bottom: 1px solid #cdcdcd;
      padding: 5px 0;
      margin: 5px 0;
    }
    .button {
      margin-top: auto;
      display: block;
      background: $orange;
      color: white;
      text-align: center;
      font: 24px $heading-font;
      text-decoration: none;
      &:hover {
        background: saturate($orange, 10%);
      }
     }
   }
}