sop-styl

Someoddpilot's base Stylus framework

Borrowed liberally from Bootstrap and Nib

Responsive Embeds

A convenient way to make embeds responsive. Supports 16by9 and 4by3.

.embed-container {
  embed-responsive(16, 9);
}
 
.embed-item {
  embed-responsive-item();
}

or

.embed-container {
  @extends $embed-responsive-4by3;
}
 
.embed-item {
  @extends $embed-responsive-item;
}

Font Specs

A convenient way to set font size, line-height, letter-spacing, and smoothing. Assumes a base font-size of 14. This can be reconfigured by setting the $base-font-size variable.

.foo {
  font-specs(16, 1.4, 100, true);
}

Vendor Prefix Mixins

Convenient vendor prefixes have been added for:

• backface-visibility
• appearance
• transition
• transform
• animation
• animation-timing-function
• animation-delay
• animation-duration

Responsive

A convenient way to make images responsive.

img {
  img-responsive();
}

Screen Reader

Makes an element only available to screen-readers, aiding in accessibility.

.help-text {
  sop-sr-only();
}

Font Face

Sets up font face.

Params:

1. font-family name
2. file root (optional, defaults to /fonts/)
3. file name (optional, defaults to font-family name)

setup-font-face('fontello', '/assets/font/', 'fontello-alt')

Fontello

Includes base fontello icon styling

Has an optional boolean parameter for whether to include animation offset.

.icon:before
  fontello-icon()
  content '\e200'

Viewport Filled and Fitted

.img
  viewport-filled(16, 9)
 
.img--fit
  viewport-fitted(16, 9)

TODO

• Touch detection
• Viewport filled and centered content
• Responsive show and hide