SopUI

Someoddpilot UI Framework

High priority

• Accordians

Buttons

Provides a convenient method for basic styles for CTAs complete with hover and focus states. The hover state is customizable, but the focus state is programatically made with normal state values.

Default button colors are white text on black.

.foo
  sop-button(2s, 2px)

.bar
  sop-button-colors(#036, #024)

.foo-bar
  sop-button(0)
  sop-button-colors(#036, #024, #DDD, #AAA)

.foo {
  display: inline-block;

  line-height: 1.2em;

  text-decoration: none;

  cursor: pointer;
  vertical-align: middle;

  transition: all 2s ease;
  backface-visibility: hidden;

  border-radius: 2px;
  border: 0;
}

.foo:hover {
  text-decoration: none;
}

.bar {
  background: #036;
  color: #024;
}

.bar:hover,
.bar:active {
  background: #003d7a;
  color: #024;
}

.bar:focus {
  outline: none;
  background: #003061;
  color: #024;
}

Expandable

jQuery

This style of expandable area is activated by toggling classes on click, using jQuery in this example.

<button sop-expandable-button>
  Title
  <div sop-expandable-caret></div>
</button>
<div sop-expandable>
  Lorem Ipsum
</div>

[sop-expandable-caret] {
  transition: all 0.2s;
}
[sop-expandable] {
  height: 0;
  overflow: hidden;
  transition: all 0.2s;
}
.sop-expandable--open [sop-expandable] {
  height: auto;
}
.sop-expandable--open [sop-expandable-caret] {
  transform: rotate(-180deg);
}

Angular

This style of expandable area utilizes Angular and uses the same CSS as the jQuery build.

<div sop-expand title="Some name">
  Loreem ipsum
</div>
<div sop-expand title="Some name" no-caret="false" open="false">
  Loreem ipsum
</div>
<div sop-expand title="Some name" no-caret open>
  Loreem ipsum
</div>

The first two examples will render the same way

require('/path/angular');
require('/path/sop-expandable-angular');

angular.module('myApp', ['sopExapandable']);

Grid

Provides a convenient method to build grid items using inline-block

.foo
  sop-grid-item(2)

.bar
  sop-grid-offset-left(4, 1)

.foo {
  display: inline-block;
  width: 50%;
}

.bar {
  margin-left: 25%;
}

Icons

Social

Shortcut for commonly used social icons. This mixin includes the fontello-icon() mixin from sop-styl. Supports default, fill, and alt styles. Any missing requested icons/styles will result in a warning.

.i-want-a-facebook-icon:after
  sop-social-icon(facebook)

.i-want-a-filled-vimeo-icon:after
  sop-social-icon(vimeo, fill)

.i-want-the-alt-filled-pinterest-icon:after
  sop-social-icon(pinterest, fill, alt)

Low priority

• Modal
• Scrollspy
• Video
• Slider
• Feed
• Dropdown
• Push menu
• Baseline content
• Tooltip
• Forms
• Icons - Common SOP custom icons(?)