A CodePen by Tim Pietrusky. FlatUI Checkout concept - My entry for the "Shopping Cart" CodePen [rodeo 007](http://blog.codepen.io/rodeo/season-two/#week-three). Images taken from [thinkgeek.com](http://thinkgeek.com) because I love all products they have :D I used the [Pure](http://purecss.io) grid, so this is also responsive.

index.html

<div class="onepage-checkout">
  <div class="pure-g-r">
    
    <!-- Billing & shipping address -->
    <div class="pure-u-1-4">
      <div class="pure-u-1-1">
        <div class="wrapper wrapper__alpha">
          <h2 class="__alpha">Billing Address</h2>
          <address class="wrapper--box">
            Tim Pietrusky <br>
            Frankfurt (Main) <br>
            Germany 
          </address>
          <button class="gamma">change</button>
        </div> 
      </div>
          
      <div class="pure-u-1-1">
        <div class="wrapper wrapper__alpha">
          <h2 class="__alpha">Shipping Address</h2>
          <address class="wrapper--box">
            Tim Pietrusky <br>
            Frankfurt (Main) <br>
            Germany 
          </address>
          <button class="gamma">change</button>
        </div> 
      </div>  
    </div>
        
    <!-- Shipping -->
    <div class="pure-u-1-4">
      <div class="pure-u-1-1">
        <div class="wrapper wrapper__beta">
          <h2 class="__alpha">Shipment</h2>
          
          <ul class="wrapper--box">
            <li>
              <input type="radio" name="shipment" id="standard" />
              <label for="standard">Standard</label>
            </li>
            <li>
              <input type="radio" name="shipment" id="express" />
              <label for="express">Express</label>
            </li>
            <li>
              <input type="radio" name="shipment" id="tomorrow" />
              <label for="tomorrow">Tomorrow Morning</label>
            </li>
          </ul>
        </div> 
      </div>  
      
      <!-- Delivery -->
      <div class="pure-u-1-1">
        <div class="wrapper wrapper__beta">
          <h2 class="__alpha">Delivery</h2>
          
          <ul class="wrapper--box">
            <li>
              <input type="radio" name="delivery" id="complete" />
              <label for="complete">Complete</label>
            </li>
            <li>
              <input type="radio" name="delivery" id="part" />
              <label for="part">Part</label>
            </li>
          </ul>
        </div> 
      </div>  
      
      <!-- Payment -->
      <div class="pure-u-1-1">
        <div class="wrapper wrapper__delta">
          <h2 class="__alpha">Payment</h2>
          
          <ul class="wrapper--box">
            <li>
              <input type="radio" name="payment" id="creditcard" />
              <label for="creditcard">Creditcard</label>
            </li>
            <li>
              <input type="radio" name="payment" id="paypal" />
              <label for="paypal">PayPal</label>
            </li>
          </ul>
        </div> 
      </div>  
      
    </div>
        
        
        
    <div class="pure-u-1-2">
      
      <div class="wrapper wrapper__gamma">
        <h2 class="__alpha">Cart</h2>
        <table class="">
          <thead>
            <tr>
              <th>Article(s)</th>
              <th></th>
              <th>Total(s)</th>
            </tr>
          </thead>
          <tr class="wrapper--box">
            <td class="alpha">
              <div class="pure-g">
                <div class="pure-u-1-4">

                  <img src='http://a.tgcdn.net/images/products/zoom/f499_minecraft_foam_sword_pickaxe.jpg'>
                </div>
                <div class="pure-u-3-4">
                  <div class="helper--alpha">
                    <h3>Minecraft Foam Sword and Pickaxe</h3>
                    <p>$45.99</p>
                    <p>
                      <button class="alpha">remove</button>
                    </p>
                  </div>
                </div>
              </div>
            </td>
            <td class="alpha">
              <input type='number' value='1'>
            </td>
            <td class="alpha">
              $45.99
            </td>
          </tr>
              
          <tr>
            <td colspan="3"><hr></td>
          </tr>
            
          <tr class="wrapper--box">
            <td>
              <div class="pure-g">
                <div class="pure-u-1-4">
                  <img src='http://a.tgcdn.net/images/products/zoom/ed08_star_wars_death_star_tea_infuser.jpg'>
                </div>
                
                <div class="pure-u-3-4">
                  <div class="helper--alpha">
                    <h3>Star Wars Death Star Tea Infuser</h3>
                    <p>$12.99</p>
                    <p>
                      <button class="alpha">remove</button>
                    </p>
                  </div>
                </div>
            </td>
            <td>
              <input type='number' value='2'>
            </td>
            <td >
              $25.98
            </td>
          </tr>
          <tr>
            <th colspan='2'>Subtotal</th>
            <td>$71.97</td>
          </tr>
          <tr>
            <th colspan='2'>Sales Tax</th>
            <td>$3.60</td>
          </tr>
          <tr>
            <th colspan='2'>Shipping</th>
            <td>$15.00</td>
          </tr>
          <tr class="alpha">
            <th colspan='2'>Total</th>
            <td>$90.57</td>
          </tr>
        </table>
              
        <div class="text--right">
          <button class="beta">checkout</button>
        </div>
      </div>
              
    </div>
  </div>
</div>

script.js

/*
 * Flat Checkout
 * 
 * My entry for the "Shopping Cart" CodePen rodeo 007.
 * http://blog.codepen.io/rodeo/season-two/#week-three
 *
 * Images taken from thinkgeek.com because I love
 * all products they have :D
 *
 * I used the Pure grid, so this is also responsive.  
 * http://purecss.io
 *
 * You can edit the variable $unit-alpha to ++/-- all 
 * sizes on this concept.  
 * 
 *
 * 2013 by Tim Pietrusky
 * timpietrusky.com
 */

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

/*
 * Variables
 */
$color-alpha: #2ecc71;
$color-beta: #27ae60;
$color-gamma: #ecf0f1;
$color-delta: #bdc3c7;
$color-epsilon: #3498db;
$color-zeta: #2980b9;
$color-eta: #e74c3c;
$color-theta: #c0392b;
$color-iota: #9b59b6;
$color-kappa: #8e44ad;
$color-lambda: #1abc9c;
$color-my: #16a085;

$unit-alpha: .5em; 

$transition-alpha: .15s;

/*
 * CSS
 */
body {
  font: 1em/1.5 'Lato', sans-serif;
  background: $color-gamma;
}
 
.wrapper {
  margin: $unit-alpha $unit-alpha $unit-alpha * 2 $unit-alpha;
  padding: $unit-alpha * 2 $unit-alpha $unit-alpha $unit-alpha;
  border-top: $unit-alpha solid #fff;
  border-bottom: ($unit-alpha / 2) solid $color-delta!important;
  background: #fff;
  box-shadow: 0 0 0 $unit-alpha rgba($color-delta, 0);
  
  @include transition(box-shadow $transition-alpha linear);
  
  &:hover {
    box-shadow: 0 0 0 $unit-alpha rgba($color-delta, .6);
  }
  
  h2 {
    font-size: 2em;
    font-weight: 700;
    margin: 0 0 $unit-alpha 0;
  }
  
  h3 {
    font-weight: 400;
    margin: 0;
    font-size: 1.2em;
    line-height: 1.2;
  }
  
  address {
    font-style: normal;
    margin-bottom: $unit-alpha;
  }
  
  ul {
    margin: 0;
  }
  
  li {
    margin-bottom: $unit-alpha;
    border-bottom: .25em solid #fff;
    padding-bottom: $unit-alpha;
    
    &:last-child {
      border: none;
      padding-bottom: 0;
      margin-bottom: 0;
    }
  }
  
  label {
    cursor: pointer;
  }
  
  input {
    width: 1.15em;
    height: 1.15em;
    background: #fff;
    margin-right: .25em;
    cursor: pointer;
    box-shadow: inset 0 0 0 .25em #fff;
    vertical-align: text-bottom;
    
    @include appearance(none);
    @include transition(background $transition-alpha linear);
    
    &[type="number"] {
      width: 1.75em;
      height: 60%;
      border: none;
      padding: 0 $unit-alpha / 2;
      text-align: center;
      font-size: 2em;
      position: relative;
        
      &:focus {
        outline: none;
        background: $color-gamma;
      }
        
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
         cursor: pointer;
         width: .5em;
         height: 100%;
         text-align: center;
         color: $color-delta;
            
         &:before {
           position: absolute;
           left: 0;
           top: 0;
           content: '\25B4';
         }
              
         &:after {
           position: absolute;
           left: 0;
           bottom: 0;
           content: '\25BE';
         }
      }
    }
    
    &:checked {
      background: #ccc;
    }
  }
  
  img {
    max-width: 100%;
    max-height: 8em;
    border: .25em solid #fff;
  }
  
  table {
    width: 100%;
    border-spacing: 0 $unit-alpha / 2;
    border-collapse: separate;
    margin-top: (-$unit-alpha / 2);
  }
  
  th {
    text-align: right;
    padding-right: .5em * 2;
  }
  
  thead {
    background: $color-eta;
    
    th {
      text-align: left;
      padding: $unit-alpha;
      color: #fff;
      
      &:last-child {
        text-align: right;
      }
    }
  }
  
  tr {
    &.alpha {
      background: $color-eta;
      color: #fff;
      
      > th {
        padding: $unit-alpha $unit-alpha * 2 $unit-alpha $unit-alpha;
      }
    }
  }
  
  hr {
    border: none;
    border-bottom: $unit-alpha / 2 solid #fff;
  }
  
  button {
    border: none;
    padding: $unit-alpha;
    background: $color-gamma;
      
    @include appearance(none);
    @include transition(background $transition-alpha linear);
    
    &:hover {
      background: $color-delta;
    }
      
    &:before {
       content: attr(data-icon);
       padding-right: $unit-alpha;
    }
    
    &.alpha {      
      &:before {
         content: "x";
         color: $color-eta;
      }
    }
    
    &.beta {
      background: $color-lambda;
      color: #fff;
      font-weight: 700;
      padding: $unit-alpha * 2;
      margin-top: $unit-alpha / 2;
      font-size: 1.25em;
        
      &:hover {
        background: $color-my;
      }
      
      &:before {
        content: '\25B6';
      }
    }
      
    &.gamma {      
      &:before {
         content: '\25AA';
         color: $color-delta;
      }
          
      &:hover {
        &:before {
          color: $color-gamma;
        }
      }
    }
  }
  
  .text--right {
    text-align: right;
  }
  
  .helper--alpha {
    padding-left: $unit-alpha * 3;
  }
  
  .wrapper--box {
    color: #fff;
    padding: $unit-alpha;
    list-style-type: none;
  }
  
  /*
   * alpha
   */
  &.wrapper__alpha {
    border-color: $color-beta;
    
    .wrapper--box {
      background: $color-beta;
    }
    
    h2 {
      color: $color-alpha;
    }
  }
  
  /*
   * beta
   */
  &.wrapper__beta {
    border-color: $color-zeta;
    
    .wrapper--box {
      background: $color-zeta;
    }
    
    h2 {
      color: $color-epsilon;
    }
    
    li {
      border-color: $color-epsilon;
    }
    
    input {
      &:checked {
        background: $color-epsilon;
      }
    }
  }
  
  /*
   * gamma
   */
  &.wrapper__gamma {
    border-color: $color-theta;
    
    .wrapper--box {
      border-top: $unit-alpha solid $color-theta;
      color: #000;
    }
    
    h2, 
    h3 {
      color: $color-eta;
    }
    
    hr {
      border-color: $color-eta;
    }
  }
  
  /*
   * delta
   */
  &.wrapper__delta {
    border-color: $color-iota;
    
    .wrapper--box {
      background: $color-kappa;
    }
    
    h2 {
      color: $color-iota;
    }
    
    li {
      border-color: $color-iota;
    }
    
    input {
      &:checked {
        background: $color-iota;
      }
    }
  }
}