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 2s, 2px) .bar #036, #024) .foo-bar 0) #036, #024, #DDD, #AAA)
Expandable
jQuery
This style of expandable area is activated by toggling classes on click, using jQuery in this example.
Title Lorem Ipsum
[[
Angular
This style of expandable area utilizes Angular and uses the same CSS as the jQuery build.
Loreem ipsum Loreem ipsum Loreem ipsum
The first two examples will render the same way
;; angular;
Grid
Provides a convenient method to build grid items using inline-block
.foo 2) .bar 4, 1)
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 facebook) .i-want-a-filled-vimeo-icon:after vimeo, fill) .i-want-the-alt-filled-pinterest-icon:after pinterest, fill, alt)
Low priority
- Modal
- Scrollspy
- Video
- Slider
- Feed
- Dropdown
- Push menu
- Baseline content
- Tooltip
- Forms
- Icons - Common SOP custom icons(?)