sop-styl v1.5.7
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:
- font-family name
- file root (optional, defaults to
/fonts/
) - 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
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago