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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                section.header
  div.container
    div.row
      div.four.columns
        h3 BOXLY
      div.twelve.columns
        ul
          li
            i.fi-torsos-all
            span Clients
          li
            i.fi-eye
            span Sitters
          li
            i.fi-torso
            span Admin
          li
            i.fi-graph-bar
            span Reports
          li
            i.fi-star
            span Functions
          li
            i.fi-key
            span Keys
          li
            i.fi-clipboard
            span Accounting
          li
            i.fi-torsos
            span New Client
          li
            i.fi-alert
            span Alerts

div.container.content
  div.row
    div.four.columns.block
      section.block-content
        i.fi-widget.pull-right
        img.avatar.block-center(src="https://s3.amazonaws.com/uifaces/faces/twitter/dannpetty/128.jpg")
        section.push-top-sm.hr
          h4.text-center Matthew Reichardt
        section.user-details.push-top-sm
          ul
            li
              i.fi-star
              span Founder
            li
              i.fi-marker
              span St. Louis, MO
            
      section.block-content
        i.fi-alert.pull-right
        h5.text-left.hr Alerts
        section.user-alerts.push-top-sm
          ul
            li
              i.fi-alert.red
              span Upcoming appointment
            li
              i.fi-alert.red
              span Lorem ipsum dolar
            li
              i.fi-alert.red
              span Some random alert
            li
              i.fi-alert.red
              span This design is slick!
            
      section.block-content
        i.fi-clipboard.pull-right
        h5.text-left.hr Completed Alerts
        section.user-alerts.push-top-sm
          ul
            li
              i.fi-check.green
              span Upcoming appointment
            li
              i.fi-check.green
              span Lorem ipsum dolar
            li
              i.fi-check.green
              span Some random alert
            li
              i.fi-check.green
              span This design is slick!
              
      section.block-content
        h5.text-left.hr Completed Jobs
        section.user-alerts.push-top-sm
          ul
            li
              i.fi-check.green
              span 3 jobs complete
            li
              i.fi-alert.red
              span 7 uncompleted jobs
              
            
    div.four.columns.block
      section.block-content
        div.row
          h5.text-left.hr Staff Online
          section.staff.hr-dotted
            img.avatar.block-center(src="https://s3.amazonaws.com/uifaces/faces/twitter/dannpetty/128.jpg")
            div.staff-name Grant Burns
            div.text-center
              i.fi-power.green
            div.online.text-center.green Active
            
        div.row
          section.staff
            img.avatar.block-center(src="https://s3.amazonaws.com/uifaces/faces/twitter/dannpetty/128.jpg")
            div.staff-name Grant Burns
            div.text-center
              i.fi-power.green
            div.online.text-center.green Active
            
    // Calender Section
    div.four.columns.block
      section.block-content
        div.row
          h5.text-left.hr Calendar
          section.calendar
            h3.day 28
            div.extend-day
              p Sunday
              p.pull December/2014
            div.toggle-month
              h3 <
              h3 >
          section.cal-alerts.push-top-sm
            ul
              li
                i.fi-alert.red
                span Upcoming appointment
              li
                i.fi-alert.red
                span Lorem ipsum dolar
              li
                i.fi-alert.red
                span Some random alert
              li
                i.fi-alert.red
                span This design is slick!

    // Schedule Requests Section
    // Calender Section
    div.four.columns.block
      section.block-content
        h5.text-left.hr Schedule Requests
        section.user-alerts.push-top-sm
          ul
            li.sched-request
              i.fi-compass.pull-left
              div.pull-left
                i Meet the team
                br
                p.sub-heading T-Rex St Loius
            li.sched-request
              i.fi-compass.pull-left
              div.pull-left
                i Build Initial Specs
                br
                p.sub-heading T-Rex St Loius
            li.sched-request
              i.fi-compass.pull-left
              div.pull-left
                i Design User Board
                br
                p.sub-heading Remote
    
    div.twelve.columns.block
      section.block-content.revenue-icon
        i.fi-dollar.pull-right
        h5.text-left.hr Revenue
        div.row
          div.four.columns.user-alerts.revenue.push-top-sm.block
            h6 
              strong Daily
            h2.pull-left $2.089
            span.pull-left
              h4 .00
            div.commission.pull-left COMMISSION: 1,000.00
            div.percent.down 2.7%
          
          div.four.columns.user-alerts.revenue.push-top-sm.block
            h6 
              strong Monthly
            h2.pull-left $27.125
            span.pull-left
              h4 .00
            div.commission.pull-left COMMISSION: 16,000.00
            div.percent.up 1.5%
            
          div.four.columns.user-alerts.push-top-sm.block.revenue
            h6 
              strong Yesterday
            h2.pull-left $86.079
            span.pull-left
              h4 .86
            div.commission.pull-left COMMISSION: 16,000.00
            div.percent.up 3.1%
            
    div.eight.columns.block
      section.block-content
        div.row
          h5.text-left.hr Arivals | Departures
          
    div.four.columns.block
      section.block-content
        div.row
          h5.text-left.hr Late Timeframes
          
    //Logins Section
    div.row
      div.four.columns.block
        section.block-content.user-details
          div.row
            h5.text-left.hr Current Login's [STAFF]
            ul.push-top-sm
              li
                i.fi-torso.green
                span Matthew Reichardt
              li
                i.fi-torso.green
                span Grant Burns
              li
                i.fi-torso.yellow
                span Lorem Ipsum
              li
                i.fi-torso.green
                span Ipsum Lorem

      div.four.columns.block
        section.block-content
          div.row
            h5.text-left.hr Clients
            
      div.four.columns.block
        section.block-content.no-pad-bottom
          div.row
            h5.text-left.hr Daily Cancellations
            h6.cancellation 
              strong Today
            div.cancellation-count 8
          div.cancellations
            ul
              li Week
              li Month
              li Total
            ul.big
              li 3
              li(style="margin-left:21px;") 32
              li 57
              
            
!

CSS

              
                /* COLOR SETUP */
$headerBG: #4E5861;
$blockBG: #FCFCFC;
$background: darken($blockBG, 5%);

/* HELPER CLASSES */
.no-margin {
  margin-left: 0px;
}

.no-pad-bottom {
  padding-bottom: 0px;
}

.pull-left { float: left; }
.pull-right { float: right; }

.hr {
  border-bottom: 1px solid darken($blockBG, 10%);
}

.hr-dotted {
  border-bottom: 1px dotted darken($blockBG, 10%);
}

.text-left { text-align: left; }
.text-center { text-align: center; }

.block-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.block-center-2 {
}

.push-top-sm {
  margin-top: 15px;
}

.cancellation-count {
  margin-top: 40px;
  margin-bottom: 40px;
  bottom: -20px;
  text-align: center;
  font-size: 700%;
  color: #31F7DD;
}

.cancellations {
  background: #31F7DD;
  padding-top: 0px;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: -15px;
  height: 45px;
  color: #fff;
  
  
  ul {
      margin: 0px;
      margin-bottom: -15px;
      padding-left: 10px;
      padding-right: 10px;
      list-style-type: none;
      text-align: justify;
  }
  
  ul.big {
    margin-top: -20px;
    li {
      font-size: 140%;
    }
  }

  ul:after {
      content: "";
      width: 100%;
      display: inline-block;
  }
  
  li {
    display: inline;
    font-size: 75%;
  }
}
  /* IMAGE CLASSES */
  .avatar {
    height: 150px;
    width: 150px;
    border: 8px solid darken($blockBG, 7%);
    border-radius: 50%;
  }
    .big {  }


/* MAIN CLASSES */
body {
  background: $background;
  color: darken($blockBG, 52%);
}

.header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background: darken($headerBG, 2%);
  color: lighten(gray, 32.5%);
  padding-top: 15px;
  
  h3 {
    margin: 0px;
    color: lighten($blockBG, 20%);
  }
  
  i {
    margin-right: 5px;
    font-size: 120%;    
  }
  
  ul {
    float: right;
    margin: 0px;
    line-height: 30px;
    list-style-type: none;
    
    li {
      display: inline;
      padding: 0px 2px 0px 2px;
      
      &:hover {
        color: lighten(gray, 15%);
      }
    }
  }
}

.content {
  position: relative;
  top: 110px;
  
  .block-content {
    background: $blockBG;
    padding: 15px;
    margin-bottom: 12px;
    -webkit-box-shadow: 0px 5px 5px -3px darken($blockBG, 25%);
    -moz-box-shadow: 0px 5px 5px -3px darken($blockBG, 25%);
    box-shadow: 0px 5px 5px -3px darken($blockBG, 25%);
    
    h5 {
      padding-bottom: 3px;
    }
  }
  
  .cal-alerts {
    margin-top: 85px;
    margin-bottom: -15px;
    
    i {
      width: 30px;
      font-size: 130%;
      margin: 0 auto;
      margin-right: 5px;
    }
    
    li {
      line-height: 10px;
      letter-spacing: 0px;
      font-size: 85%;
      color: darken($blockBG, 52%);
      
      .red {
        color: red;
      }
      
      .yellow {
        color: yellow;
      }
      
      .green {
        color: lighten(green, 18%);
      }
    }
  }
  
  .user-details, .user-alerts {
    margin-bottom: -15px;
    
    .sub-heading {
      margin-top: -3px;
      font-size: 85%;
    }
    
    i {
      width: 30px;
      font-size: 130%;
      margin: 0 auto;
      margin-right: 5px;
    }
    
    li {
      line-height: 10px;
      letter-spacing: 0px;
      font-size: 85%;
      color: darken($blockBG, 52%);
      
      .red {
        color: red;
      }
      
      .yellow {
        color: darken(yellow, 8%);
      }
      
      .green {
        color: lighten(green, 18%);
      }
    }
    
  }
  
  .staff {
    
    i {
      font-size: 170%;
    }
    
    .red {
      color: red;
    }

    .green {
      color: lighten(green, 10%);
    }
    
    img {
      margin-top: 10px;
      height: 40px;
      width: 40px;
      border: none;
    }
    
    .staff-name {
      font-weight: bold;
      font-size: 110%;
      margin-top: 5px;
      text-align: center;
    }
    
    .online {
      font-size: 85%;
      margin-top: -3px;
    }
  }
  
  .footer {
    width: 100%;
    margin-left: -15px;
    margin-right: -30px;
    padding: 1px;
    background-color: #F47A60;
  }
  
  .calendar {
    float: left;
    width: 100%;
    margin-left: -15px;
    margin-right: -15px;
    padding: 15px;
    background-color: #F47A60;
    color: $blockBG;
    
    h3.day { float: left; color: $blockBG; }
    
    .extend-day {
      float: left;
      
      p {
        float: left;
        clear: left;
        margin: 0px;
        margin-left: 10px;
      }
      
      .pull {
        margin-top: -5px;
        font-size: 75%;
        color: darken($blockBG, 12%);
      }
    }
    
    .toggle-month {
      float: right;
      
      h3 { display: inline; color: $blockBG; }
    }
  }
  
  .sheet {
    padding-top: 85px;
    font-size: 85%;
    
    li {
      display: inline;
      padding-left: 3px;
      padding-right: 3px;
    }
    
    .sheet-day {
      margin-top: -5px;
      
      li {
        margin-right: 3px;
        padding: 9px;
        background: darken($blockBG, 10%);
        font-size: 93%;
      }
      li.empty {
        padding-right: 19px;
        background: transparent;
      }
    }
    
    .calendar-footer {
      width: 100%;
      height: 10px;
      margin-left: -15px;
      margin-right: -15px;
      padding: 15px;
      background-color: #F47A60;
      color: $blockBG;
    }
    
  }
  
  .sched-request {
    clear: left;
  }
  
  .revenue-icon {
    font-size: 180%;
    color: lighten(gray, 15%);
  }
  
  .revenue {
    margin: 0px;
    margin-top: 10px;
    padding-right: 0px;
    
    h4 {
      line-height: 45px;
      color: lighten(gray, 5%);
    }
    
    .percent {
      clear: left;
      font-size: 40%;
      line-height: 0px;
      color: lighten(gray, 15%);
      
      
    }
    
    .up {
      color: lighten(green, 10%);
    }

    .down {
      color: red;
    }
    
    .commission {
      clear: left;
      margin-top: -15px;
      font-size: 40%;
      font-weight: bold
    }
  }
  
}
              
            
!

JS

              
                
              
            
!
999px

Console