CSS Frame component

CSS-Frame-component.markdown

CSS Frame component

Single CSS component class that uses modifier classes to emulate Bootstraps "well", "panel", "thumbnail" components, and how to modify main component class to offer alternative styles.

A Pen by Christopher DeFelice on CodePen.

License.

index.html

<div class="_size1of3">
  <div class="Frame Frame--panel">
    <div class="Frame-hd">
      <h1 class="Frame-title">Frame Panel</h1>
    </div>

    <div class="Frame-bd">
      <p>This is the body of the frame.  This <code>frame</code> component uses the <code>Frame--panel</code> modifier.</p>
    </div>

    <div class="Frame-ft">
      Frame footer.
    </div>
  </div>
</div>

<div class="_size1of3">
  <div class="Frame Frame--outline">
    <div class="Frame-hd">
      <h1 class="Frame-title">Frame Outline</h1>
    </div>

    <div class="Frame-bd">
      <p>This is the body of the frame. This <code>frame</code> component uses the <code>Frame--outline</code> modifier.</p>
    </div>

    <div class="Frame-ft">
      Frame footer.
    </div>
  </div>
</div>

<div class="_size1of3">
  <div class="Frame Frame--well">
    <div class="Frame-bd">
      <h1>Frame Well</h1>
      <p>This is the body of the frame. This <code>frame</code> component uses the <code>Frame--well</code> modifier.</p>
    </div>
  </div>
</div>

<div class="_size1of8">
  <div class="Frame Frame--thumbnail">
    <img alt="square.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADICAMAAABlASxnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDBCQTY1ODM3ODlFMTFFNDhBRkJFNjU3M0FERjk1MjUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDBCQTY1ODQ3ODlFMTFFNDhBRkJFNjU3M0FERjk1MjUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEMEJBNjU4MTc4OUUxMUU0OEFGQkU2NTczQURGOTUyNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEMEJBNjU4Mjc4OUUxMUU0OEFGQkU2NTczQURGOTUyNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PilEZHUAAAAGUExURe7u7gAAAChtjIgAAABUSURBVHja7MExAQAAAMKg9U9tCj+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHiYAAMA6ygAAQFWWwUAAAAASUVORK5CYII="/>

    <div class="Frame-bd">
      <h3>Frame thumbnail label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet dolores, deleniti odio necessitatibus, eligendi molestias ea, expedita maiores nulla saepe soluta. Esse unde, et. Ad tempora aut temporibus explicabo rerum?</p>
    </div>
  </div>
 </div>

<div class="_size1of3">
  <div class="Frame Frame--callout">
    <h4 class="Frame-title">Callout title</h4>
    This frame component uses the <code>Frame--callout</code> modifier.
  </div>
  
  <div class="Frame Frame--callout Frame--callout--info">
    <h4 class="Frame-title">Callout title</h4>
    This frame component uses the <code>Frame--callout</code> modifier and <code>Frame--callout--info</code> skin modifier.
  </div>
</div>

style.scss

// Defaults
// ------------------------------

*,
*:after,
*:before {
  box-sizing: border-box;
}

html,
body {  
  font-size: 100%;
}

body {
  padding: 1.5em;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5em;
}

h1 {
  margin-top: 0;
}

// Create main component.
// -----------------------------

.Frame {
  position: relative;
  
  border: 1px solid transparent;
  border-radius: 3px;
  margin-bottom: 1.5em;
  
  p,
  p:first-child { margin: 0; }
  p + p         { margin-top: .75em; }
}

// Children (sub-components)
// -----------------------------

.Frame-bd {
  padding: 1.5em;
}

.Frame-hd,
.Frame-ft {
  padding: .75em 1.5em;
  
  line-height: 1.25;
}

.Frame-hd {
  border-bottom: 1px solid transparent;
}

.Frame-title {
  margin-bottom: 0;
  margin-top: 0;
  
  &,
  > a {
    color: inherit;
  }
}

// Modifiers
// -----------------------------

$frame-base-color: #ecf0f1 !default;

.Frame--panel,
.Frame--outline {
  border-color: mix( #000, $frame-base-color, 8% );
}

.Frame--panel {
  .Frame-hd {
    border-bottom-color: mix( #000, $frame-base-color, 8% );
    background-color: mix( #fff, $frame-base-color, 5% );
  }
  
  .Frame-ft {
    background-color: mix( #fff, $frame-base-color, 40%);
  }
}

.Frame--outline {
  .Frame-hd {
    border-bottom-color: mix( #000, $frame-base-color, 8% );
  }
  
  .Frame-ft {
    border-top: 1px solid mix( #000, $frame-base-color, 8% );
  }
}

.Frame--well {
  border-color: mix( #000, #f5f5f5, 7% );
  border-radius: 5px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  
  background-color: #f5f5f5;
}

.Frame--thumbnail {
  border-color: #ddd;
  padding: .25em;
 
  > img {
    display: block;

    height: auto;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  
  .Frame-bd {
    padding: .5em;
  }
}

.Frame--callout {
  border-color: #ddd;
  border-left-width: 5px;
  padding: 1.5em;
}

.Frame--callout--info {
  border-left-color: #3498db;
  
  .Frame-title {
    color: #3498db;
  }
}

// Helpers
// -----------------------------

[class^="_size"] {
  display: inline-block;
  vertical-align: top;
}

._size1of8 { width: 12.5%; }
._size1of3 { width: 33%; }