Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
svg.svg(xmlns='http://www.w3.org/2000/svg', width='90', height='435')
  // Created with SVG-edit - https://svg-edit.googlecode.com/

  g#loop1
    path(fill='#F48132', stroke-width='5', stroke-dasharray='null', stroke-linejoin='null', stroke-linecap='null', fill-opacity='0', d='m34,424l-30,0l0,-420l80,0l0,420c0,0 -30,0 -30,0', stroke='#F48132')
    path(fill='#F48132', stroke-width='null', stroke-dasharray='null', stroke-linejoin='null', stroke-linecap='null', d='m44,424l20,10l0,-20l-20,10z', stroke-opacity='0', stroke='#F48132')
    
  g#loop2
    path(stroke='#F48132', fill='#F48132', stroke-width='5', stroke-dasharray='null', stroke-linejoin='null', stroke-linecap='null', fill-opacity='0', d='m34,252.99998l-30,0l0,-248.99998l80,0l0,248.99998c0,0 -30,0 -30,0')
    path(stroke='#F48132', fill='#F48132', stroke-width='null', stroke-dasharray='null', stroke-linejoin='null', stroke-linecap='null', d='m43,253l20,10l0,-20l-20,10z', stroke-opacity='0')
    
  g#loop3
    path(stroke='#F48132', fill='#F48132', stroke-width='5', stroke-dasharray='null', stroke-linejoin='null', stroke-linecap='null', fill-opacity='0', d='m34,121.99998l-30,0l0,-117.99998l80,0l0,117.99998c0,0 -30,0 -30,0')
    path(stroke='#F48132', fill='#F48132', stroke-width='null', stroke-dasharray='null', stroke-linejoin='null', stroke-linecap='null', d='m43,121l20,10l0,-20l-20,10z', stroke-opacity='0')

  g#scale1
    line(y2='800', x2='13.5', y1='13', x1='13.5', fill-opacity='0', stroke-linecap='null', stroke-linejoin='null', stroke-dasharray='null', stroke-width='5', stroke='#F48132', fill='none')
    path(d='m0.5,800l13,15l14,-15l-27,0z', stroke-linecap='null', stroke-linejoin='null', stroke-dasharray='null', stroke-width='0', stroke='#F48132', fill='#F48132')
    path(transform='rotate(-180 13.5,11.5) ', d='m0,4l13,15l14,-15l-27,0z', stroke-linecap='null', stroke-linejoin='null', stroke-dasharray='null', stroke-width='0', stroke='#F48132', fill='#F48132')





h3.heading Application Design &amp; Development Lifecycle

table.tbl
  thead
    tr
      th Phase
      th Title &amp; Description
      th Tools Used
      th Deliverables
      th Loops
      th Scales
      
  tbody.table-hover
  
    tr.a
      td.phase(rowspan="3") 
        | A
        br
        br
        i.fa.fa-paper-plane-o
      td.title 
        h4 
          i.fa.fa-lightbulb-o
          | &nbsp;
          | Strategy
        span.description Site, app and/or feature objectives
        
      td 
        ul
          li Customer interviews
          li Feedback surveys
          li Available web analytic tools
          
      td(rowspan="3") 
        ul
          li User feedback
          li Backlog and/or previous discovery phase items
          li User web analytics reports
          li Business needs &amp; problems
          li User personas
          li User stories or scenarios
          li Measurable application objectives
          
      td.loop(rowspan=3) 
        svg(width='90', height='435', xmlns="http://www.w3.org/2000/svg")
          use(xlink:href="#loop1")
          
      td.scale(rowspan=8) 
        .scale-top.
          Abstract, Conception
        svg(width="90", height="815", xmlns="http://www.w3.org/2000/svg")
          use(xlink:href="#scale1")
        .scale-bottom.
          Concrete, Completion
          
          
    tr.a
      td.title 
        h4 
          i.fa.fa-bar-chart
          | &nbsp;
          | Analyze
        span.description 
          | Objective review,<br />
          | Web analytics,<br />
          | Click tracking
      td 
        ul
          li Available web analytic tools
          li Clicktracking tools
          
    tr.a
      td.title 
        h4 
          i.fa.fa-crosshairs
          | &nbsp;
          | Scope
        span.description 
          | Functional specifications,<br />
          | Content requirements
      td 
        ul
          li Word
          li Excel
          li Whiteboards
      
          
          
    tr.b
      td.phase(rowspan="2")
        | B
        br
        br
        i.fa.fa-paper-plane
      td.title 
        h4 
          i.fa.fa-database
          | &nbsp;
          | Content
        span.description Informational design
        
      td 
        ul
          li Excel
          li Visio
          li Whiteboards
          
      td(rowspan="2") 
        ul
          li Information Architecture
          li UX Sketches
          li Lo-fi mockups
      
          
      td.loop(rowspan=2) 
        svg(width="90", height="265", xmlns="http://www.w3.org/2000/svg")
          use(xlink:href="#loop2")
          
          
    tr.b
      td.title 
        h4 
          i.fa.fa-pencil
          | &nbsp;
          | Structure
        span.description 
          | Interaction design,<br />
          | User experience design,<br />
          | Navigational design 
      td 
        ul
          li Sketch, Craft
          li Illustrator, Adobe XD
          li Photoshop, Balsamic, etc.
          li Whiteboards
      
          
          
    tr.c
      td.phase 
        | C
        br
        br
        i.fa.fa-plane
      td.title 
        h4 
          i.fa.fa-paint-brush
          | &nbsp;
          | Surface
        span.description 
          | Visual design,<br />
          | User interface design
          
      td 
        ul
          li Sketch, Craft, Invision
          li Illustrator, Adobe XD
          li HTML, CSS &amp; JS
          li Tools to make clickables
          
      td 
        ul
          li Hi-fi mockup
          li Interactive / clickable demo
      
      td.loop 
        svg(width="90", height="135", xmlns="http://www.w3.org/2000/svg")
          use(xlink:href="#loop3")
          
  
    tr.d
      td.phase(rowspan=2) 
        | D
        br
        br
        i.fa.fa-fighter-jet
      td.title 
        h4 
          i.fa.fa-connectdevelop
          | &nbsp;
          | Develop
        span.description Functional product built
        
      td 
        ul
          li IDE / code editors
          li DB tools
          li Web browsers
          li Testing tools
          
      td(rowspan=2)  
        ul
          li Front-end code
          li Server-side code
          li Databases
          li Test reports
          li Tickets
      
      td.loop(rowspan=2) 
        svg(width="90", height="265", xmlns="http://www.w3.org/2000/svg")
          use(xlink:href="#loop2")
  
    tr.d
      td.title 
        h4 
          i.fa.fa-circle-o-notch.fa-spin
          | &nbsp;
          | Test
        span.description Quality assurance testing
      td 
        ul
          li Web browsers
          li Testing tools
          li Testing methodologies
    
      
p.footer.
  Updated October 12, 2017, by <a href='mailto:john-stammerman@mercer.com'>John Stammerman</a>. Based on <a href="http://www.jjg.net/elements/pdf/elements.pdf">The Elements of User Experience</a> by Jesse James Garrett.
      

              
            
!

CSS

              
                @import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);

$clr1: #006D9E;
$clr2: #F48132;
$clr-light: #EEE;
$clr-dark: #404040;



@mixin row-color($name, $clr) {
  
  &.#{$name} {
    
    td {
      
      background: lighten($clr, 55);
      border-right: 1px solid lighten($clr, 40);
      border-top: 1px solid lighten($clr, 40);
      color: $clr-dark;
      transition: all 300ms ease-out;
      
      &.phase, h4 {
        
        color: $clr;
        
      }
      
      .fa {
        
        color: desaturate(lighten($clr, 30), 40);
        transition: all 300ms ease-out;
        
      }
      
    }
    
    &:hover td {

        background: lighten($clr, 45);
        border-right: 1px solid lighten($clr, 30);
        border-top: 1px solid lighten($clr, 30);
        color: darken($clr, 10);
      
        &.phase, h4 {
        
          color: darken($clr, 10);

        }
      
        .fa {
          color: desaturate(lighten($clr, 30), 30);
        }

    }
    
  }
  
}



body {
  
  background-color: $clr1;
  background: linear-gradient(to top, darken($clr1, 13), $clr1);
  color: $clr-dark;
  font: 400 18px/28px 'Open Sans', helvetica, arial, sans-serif;
  text-rendering: optimizeLegibility;
  
}

a {
  color: $clr2;
}

.svg { 
  
  //border: solid 1px #000;
  display: none;
  
}

.heading {
  
  color: $clr-light;
  font-size: 30px;
  font-weight: 400;
  margin: auto;
  padding: 20px;
  text-shadow: 1px 1px 2px darken($clr1, 21);
  text-transform: uppercase;
  width: 86%;
  
}

.footer {
  
  color: $clr-light;
  margin: auto;
  padding: 0 0 40px 0;
  width: 86%;
  
}


/*** Table Styles **/

.tbl {
  
  background: $clr-light;
  border-collapse: collapse;
  box-shadow: 0 5px 15px darken($clr1, 13);
  margin: auto auto 40px auto;
  padding: 5px;
  width: 86%;
  animation: float 5s infinite;
  
}

th {
  
  color: $clr2;
  background: $clr-dark;
  border-bottom: 4px solid lighten($clr-dark, 13);
  border-right: 1px solid darken($clr-dark, 5);
  font-size: 90%;
  font-weight: 700; 
  padding: 12px 24px;
  text-align: left;
  text-shadow: 0 1px 1px darken($clr-dark, 13);
  vertical-align: middle;
  
}


tr {
  
  td {
    
    border-right: 1px solid darken($clr-light, 8);
    border-top: 1px solid darken($clr-light, 8);
    color: $clr-dark;
    font-size: 100%;
    font-weight: 400;
    padding: 12px 24px;
    
    &.phase {
      
      font-size: 250%;
      font-weight: 700;
      
      .fa {
        
        margin-top: 30px;
        
      }
      
    }
    
    &.title {
      
      width: 30%;
      
      h4 { 
        
        font-size: 120%;
        margin: 0; 
        
        .fa {
        
          font-size: 150%;
        
        }
        
      }
      
    }
    
    .description {
      display: block;
      margin-left: 30px;
    }
    
    &:last-child {
      border-right: 0px;
    }
    
    .scale-top, .scale-bottom {
      
      color: $clr2;
      margin: 0 0 10px 0;
      
    }
    
  }
  
  @include row-color('a', $clr1);
  @include row-color('b', adjust-hue($clr1, 95));
  @include row-color('c', adjust-hue($clr1, 185));
  @include row-color('d', adjust-hue($clr1, 275));
  
  
  td.loop, &:hover td.loop, td.loop.hover, td.scale, &:hover td.scale, td.scale.hover {
      
    background: $clr-light;
    border-right: 1px solid darken($clr-light, 8);
    border-top: 1px solid darken($clr-light, 8);

  }
  
  &:first-child td {
    border-top: none;
  }
  
  &:last-child td {
    border-bottom: none;
  }

}

ul {
  
  margin: 12px 24px;
  padding: 0;
  
  li {
    
    font-size: 90%;
    margin: 0;
    padding: 0;
    
  }
  
}


              
            
!

JS

              
                
              
            
!
999px

Console