Field Agents UI Design

field-agents-ui-design.markdown

Field Agents UI Design

Playing with the "plus" containers. It looks a bit futuristic and stealthy while also keeping it simple.

A Pen by vineeth on CodePen.

License.

index.html

<link href='https://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css" />

<div class="content-container">
  <div class="plus plus-tl">+</div>
  <div class="plus plus-tr">+</div>
  <div class="plus plus-bl">+</div>
  <div class="plus plus-br">+</div>
  <div class="content-box-container">
    <section class="content-box">
      <h3>Field Agents</h3>
      <section class="row data-row">
        <div class="col-xs-6">Will Baker</div>
        <div class="col-xs-3">Berlin, DE</div>
        <div class="col-xs-3">ACTIVE</div>
      </section>
      <section class="row data-row">
        <div class="col-xs-6">Uri Menzikov</div>
        <div class="col-xs-3">Paris, FR</div>
        <div class="col-xs-3">ACTIVE</div>
      </section>
      <section class="row data-row selected">
        <div class="col-xs-6">Daisy Santos</div>
        <div class="col-xs-3">Milan, IT</div>
        <div class="col-xs-3">INACTIVE</div>
      </section>
      <div class="action-bar">
          <button>Activate Agent</button>
          <button>Add Agent</button>
      </div>
    </section>
  </div>
</div>
<div class="text-box-container">
  <section class="text-box">
    <p>Run: START</p><br/>
    <p>.content:before {<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;content: "";<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;position: fixed;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;left: 0;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;right: 0;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;z-index: -1;<br/>
        <br/>
        &nbsp;&nbsp;&nbsp;&nbsp;display: block;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;background-image: url('img-here');<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;background-size:cover;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;width: 100%;<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;height: 100%;<br/>
        <br/>
        &nbsp;&nbsp;&nbsp;&nbsp;-webkit-filter: blur(5px);<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;-moz-filter: blur(5px);<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;-o-filter: blur(5px);<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;-ms-filter: blur(5px);<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;filter: blur(5px);<br/>
      }</p>
  </section>
</div>

style.sass

body
  background-color: #141414
  font-family: "Josefin Sans", sans-serif

.content-container
  color: rgba(255,255,255,0.5)
  width: 400px
  min-height: 230px
  position: relative
  margin: 10em auto 0
  .plus
    font-size: 22px
    line-height: 15px
    display: block
    position: absolute
    width: 15px
    height: 15px
    text-align: center
    &.plus-tl
      top: 0
      left: 0
    &.plus-tr
      top: 0
      right: 0
    &.plus-bl
      bottom: 0
      left: 0
    &.plus-br
      bottom: 0
      right: 0
  .content-box-container
    width: 100%
    height: 100%
    position: absolute
  .content-box
    margin: 15px
    h3
      font-variant: small-caps
      border-bottom: 1px solid rgba(255,255,255,0.1)
      padding: 5px 0
    .data-row
      padding: 3px
      display: block
      p
        display: inline
      &.selected
        color: rgba(255,255,255,0.75)
        
    .action-bar
      margin: 25px 0
      button
        background: rgba(0,0,0,0)
        border: 1px solid rgba(255,255,255,0.25)
        color: rgba(255,255,255,0.75)
        float: right
        font-variant: small-caps
        margin: 0 0 0 10px
        outline: none
        padding: 5px 10px
        transition: border 150ms ease-in-out
        &:hover
          border: 1px solid rgba(255,255,255,0.35)
          outline: none
        &:active
          border: 1px solid rgba(255,255,255,0.5)
        
.text-box-container
  color: rgba(255,255,255,0.15)
  filter: blur(3px)
  left: 2%
  position: absolute
  top: 3%
  z-index: 10
  user-select: none
  pointer: cursor
  
  p
    max-width: 250px

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />