CodePen

HTML

            
              <div id="main" class="container-fluid">
  <div class="page-header">
    <h1>Definition List <small>iOS Inspired Definition List</small></h1>
    <p>Loosely inspired by the look of a grouped table view in iOS, this aims to render basic html definition lists in a similar manner. <a href="http://codepen.io/somethingkindawierd/pen/gEnwo">Here is another version powered by MarionetteJS</a></p>
  </div>
  
  <div class="row-fluid">
    <div class="span12">
      <div class="main ios-dl">
        
        <span class="legend">Location Info</span>
        <div class="definition-group">
          <dl class="dl-horizontal">
            <dt>City</dt>
            <dd>San Francisco</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>State</dt>
            <dd>Insanity</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>Coordinates</dt>
            <dd>37.7865, -122.4557</dd>
          </dl>
        </div>
        
        <span class="legend">Personal Info</span>
        <div class="definition-group">
          <dl class="dl-horizontal">
            <dt>Hobbies</dt>
            <dd>Photography, Reading</dd>
          </dl>
          <dl class="dl-horizontal">
            <dt>Favorite Animal</dt>
            <dd>Monkey (with a banana)</dd>
          </dl>
        </div>
        
      </div>
    </div>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @iosbg: #dadee6;
@borderColor: #b0b4bc;

.striped-bg (@color1, @color2, @size: 10px) {
  background: -webkit-linear-gradient(left, @color1 50%, @color2 50%);
  background: -moz-linear-gradient(left, @color1 50%, @color2 50%);
  background: linear-gradient(left, @color1 50%, @color2 50%);
  background-size: @size @size;
}

html, body {
  .striped-bg(lighten(@iosbg, 2%), lighten(@iosbg, 3%));
}

#main {
  margin-bottom: 2em;
}

.page-header {
   border-bottom-color: @borderColor;
}

.ios-dl {
  
  .legend {
    display: block;
    padding: 0;
    margin: 20px 0px 0px;
    font-size: 21px;
    line-height: 40px;
    color: #8B91A5;
    font-weight: bold;
  }
  
  .definition-group {
    background: #fff;
    border-radius: 10px;
    border: 1px solid @borderColor;
    box-shadow: 0 1px 1px 0 white, 0 1px 1px 0 lighten(@borderColor, 15%) inset;
  }
  
  dl {
    padding: 1em;
    margin: 0px;
    background: transparent;
    border-top: 1px solid lighten(@borderColor, 15%);
  }
  
  dl:first-child {
    border: none;
  }
  
  dt {
    color: rgb(139, 145, 165);
    font-weight: bold;
  }
  
  dd {
    color: #555;
  }
  
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................