Collection of Sass utilities.
Each stylesheet is self-contained, so simply pick out what you need and put it in your project.
cd ~/my/project/sass/
wget https://raw.github.com/rstacruz/cssutils/master/sass/_antialias.sass
CSS animations, since Compass doesn't have any provisions for animation. Also see keyframes.
@import 'utils/animation';
.box {
@include animation(bounce 300ms linear infinite);
}
Forces anti-aliasing on environments that support it (usually OSX and Linux).
@import 'utils/antialias';
* {
@include antialias;
}
Turns a given container to show ellipsis after one line.
@import 'utils/ellipsis';
.title {
@include ellipsis;
height: 1.5em;
line-height: 1.5em;
}
Forces word wrapping by breaking words as needed.
@import 'utils/force-wrap';
p {
@include force-wrap;
}
Enables fancy scrolling in iOS via nested divs.
@import 'utils/ios-scrollable';
.panel {
@include ios-scrollable-y;
position: relative;
}
Note that your markup has to have a div
wrapper inside, like this:
<div class='panel'>
<div>
(Actual content here)
</div>
</div>
NOTE: position: relative
is important!
Works like ios-scrollbar-y, but makes the container horizontally-scrollable instead of vertically.
Defines keyframes for an animation.
@import 'utils/keyframes';
@include keyframes {
0% { opacity: 0; }
100% { opacity: 1.0; }
}
Disables common tap stuff for iOS webapps to make them behave more like native apps: text selection, tap highlight colors, image save panel popup, and automatic font resizing.
@import 'utils/mobile-reset';
// Use it at the top level
@include mobile-reset;
References:
- http://wiki.phonegap.com/w/page/16494795/iPhone%3A%20Prevent%20callout,%20link%20selection,%20text%20auto-resize
- http://www.bitsandpix.com/entry/ios-webkit-uiwebview-remove-tapclick-highlightborder-with-css/
For tooltips and things that have triangles sticking out of them. Simple notch.
.box:after {
content: '';
@include notch(left, 10px, #333);
}
Enables notches for a container. Be sure to set position: relative
as
well.
@import 'utils/notch';
.box {
position: relative;
@include box-notch(left, top, 50%, 10px, #aaa);
}
You may also set a border:
.box {
position: relative;
@include box-notch(left, top, 50%, 10px, #aaa, 2px, #444);
}
Disables wrapping.
@import 'utils/nowrap';
.box {
@include nowrap;
}
Style the placeholder text for inputs.
input {
@include placeholder {
color: #aaa;
}
}
Shorthand for position: absolute
.
@import 'utils/position';
.container {
@include absolute($top: 30px, $right: 40px);
}
Shorthand for position: relative
.
See absolute for an example.
Shorthand for position: fixed
.
See absolute for an example.
Media query for retina support.
@import 'utils/retina';
.box {
@include retina {
background-image: url(icon@2x.png);
}
}
Media query for high-DPI resolutions. Consider using retina instead.
@import 'utils/retina';
.box {
@include hidpi(2) {
...
}
}
Enables webkit scrollbars using an image. Make a 16x16 PNG image of a circle. This will be expanded to fill the scrollbar.
html {
@include scrollbar-image(url(scroll-dark.png), 16px);
}
Changes selection color.
@import 'utils/selection';
.header {
@include selection {
background: #fa30f0;
color: white;
}
}
Changes selection color for the entire document. Include it at the top level.
@import 'utils/selection';
@include root-selection {
background: #fa30f0;
color: white;
}
Text inputs.
@import 'utils/textboxes';
#{$textinputs} {
background: white;
...
}
Text inputs, including textarea.
@import 'utils/textboxes';
#{$textboxes} {
background: white;
...
}
MIT license