├── .gitignore ├── support ├── readme-foot.md └── readme-head.md ├── sass ├── _nowrap.sass ├── _force-wrap.sass ├── _antialias.sass ├── _ellipsis.sass ├── unicode │ ├── _quotes.sass │ └── _arrows.sass ├── _placeholder.sass ├── _animation.sass ├── _keyframes.sass ├── _layouts.sass ├── _textboxes.sass ├── _scrollbar-image.sass ├── _selection.sass ├── _retina.sass ├── _mobile-reset.sass ├── _ios-scrollable.sass ├── _position.sass └── _notch.sass ├── Makefile └── Readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | support/docs.md 2 | -------------------------------------------------------------------------------- /support/readme-foot.md: -------------------------------------------------------------------------------- 1 | Acknowledgements 2 | ---------------- 3 | 4 | MIT license 5 | -------------------------------------------------------------------------------- /sass/_nowrap.sass: -------------------------------------------------------------------------------- 1 | // ### nowrap 2 | // Disables wrapping. 3 | // 4 | // @import 'utils/nowrap'; 5 | // 6 | // .box { 7 | // @include nowrap; 8 | // } 9 | // 10 | = nowrap 11 | white-space: nowrap 12 | text-wrap: none 13 | word-wrap: none 14 | -------------------------------------------------------------------------------- /sass/_force-wrap.sass: -------------------------------------------------------------------------------- 1 | // ### force-wrap 2 | // Forces word wrapping by breaking words as needed. 3 | // 4 | // @import 'utils/force-wrap'; 5 | // 6 | // p { 7 | // @include force-wrap; 8 | // } 9 | // 10 | = force-wrap 11 | word-wrap: break-word 12 | word-break: break-all 13 | -------------------------------------------------------------------------------- /sass/_antialias.sass: -------------------------------------------------------------------------------- 1 | // ### antialias 2 | // Forces anti-aliasing on environments that support it (usually OSX and 3 | // Linux). 4 | // 5 | // @import 'utils/antialias'; 6 | // 7 | // * { 8 | // @include antialias; 9 | // } 10 | // 11 | = antialias 12 | text-rendering: optimizeLegibility 13 | -webkit-font-smoothing: antialiased 14 | -------------------------------------------------------------------------------- /sass/_ellipsis.sass: -------------------------------------------------------------------------------- 1 | // ### ellipsis 2 | // Turns a given container to show ellipsis after one line. 3 | // 4 | // @import 'utils/ellipsis'; 5 | // 6 | // .title { 7 | // @include ellipsis; 8 | // height: 1.5em; 9 | // line-height: 1.5em; 10 | // } 11 | // 12 | @import nowrap 13 | 14 | = ellipsis 15 | +nowrap 16 | text-overflow: ellipsis 17 | -o-text-overflow: ellipsis 18 | overflow: hidden 19 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | # Usage: 2 | # 3 | # make - Updates readme docs 4 | # make -B - Force updates 5 | # 6 | all: Readme.md 7 | 8 | Readme.md: support/readme-head.md support/docs.md support/readme-foot.md 9 | cat $^ > $@ 10 | 11 | support/docs.md: $(shell find sass/*.sass) 12 | cat $^ | egrep "^\/\/" | sed "s/^\/\/ //g" | sed "s/^\/\///g" > $@ 13 | 14 | clean: 15 | rm support/docs.md Readme.md 16 | 17 | .PHONY: clean all 18 | -------------------------------------------------------------------------------- /sass/unicode/_quotes.sass: -------------------------------------------------------------------------------- 1 | // ### utils/unicode/quotes 2 | // Contains angled quotes (eg, `$rsaquo`). 3 | // 4 | // See: https://en.wikipedia.org/wiki/Curved_quotes#Quotation_marks_in_English 5 | // 6 | $rsaquo: '\203a' // Right single angled quote (›) 7 | $lsaquo: '\2039' // Left single angled quote (‹) 8 | $raquo: '\00bb' // Right double angled quote (») 9 | $laquo: '\00ab' // Left double angled quote («) 10 | -------------------------------------------------------------------------------- /sass/_placeholder.sass: -------------------------------------------------------------------------------- 1 | // ### placeholder 2 | // Style the placeholder text for inputs. 3 | // 4 | // input { 5 | // @include placeholder { 6 | // color: #aaa; 7 | // } 8 | // } 9 | // 10 | = placeholder 11 | &::-moz-placeholder /* FF19+ */ 12 | @content 13 | &:-moz-placeholder /* FF18- */ 14 | @content 15 | &:-ms-input-placeholder 16 | @content 17 | &::-webkit-input-placeholder 18 | @content 19 | -------------------------------------------------------------------------------- /support/readme-head.md: -------------------------------------------------------------------------------- 1 | CSS utils 2 | ========= 3 | 4 | Collection of Sass utilities. 5 | 6 | How to use 7 | ---------- 8 | 9 | Each stylesheet is self-contained, so simply pick out what you need and put it 10 | in your project. 11 | 12 | [View stylesheets >]( sass/ ) 13 | 14 | #### Example 15 | 16 | ~~~ sh 17 | cd ~/my/project/sass/ 18 | wget https://raw.github.com/rstacruz/cssutils/master/sass/_antialias.sass 19 | ~~~ 20 | 21 | Utilities 22 | --------- 23 | 24 | -------------------------------------------------------------------------------- /sass/_animation.sass: -------------------------------------------------------------------------------- 1 | // ### animation 2 | // CSS animations, since Compass doesn't have any provisions for animation. 3 | // Also see [keyframes](#keyframes). 4 | // 5 | // @import 'utils/animation'; 6 | // 7 | // .box { 8 | // @include animation(bounce 300ms linear infinite); 9 | // } 10 | // 11 | = animation($args) 12 | -webkit-animation: $args 13 | -moz-animation: $args 14 | -ms-animation: $args 15 | -o-animation: $args 16 | animation: $args 17 | -------------------------------------------------------------------------------- /sass/_keyframes.sass: -------------------------------------------------------------------------------- 1 | // ### keyframes 2 | // Defines keyframes for an animation. 3 | // 4 | // @import 'utils/keyframes'; 5 | // 6 | // @include keyframes { 7 | // 0% { opacity: 0; } 8 | // 100% { opacity: 1.0; } 9 | // } 10 | // 11 | = keyframes($name) 12 | @-webkit-keyframes #{$name} 13 | @content 14 | @-moz-keyframes #{$name} 15 | @content 16 | @-o-keyframes #{$name} 17 | @content 18 | @-ms-keyframes #{$name} 19 | @content 20 | @-khtml-keyframes #{$name} 21 | @content 22 | @keyframes #{$name} 23 | @content 24 | -------------------------------------------------------------------------------- /sass/unicode/_arrows.sass: -------------------------------------------------------------------------------- 1 | // ### unicode/arrows 2 | // Contains arrow symbols. (eg: `$larr`) 3 | // 4 | // See: https://en.wikipedia.org/wiki/Arrow_(symbol) 5 | // 6 | $larr: '\2190' // Left arrow (&larr) 7 | $uarr: '\2191' // Up arrow (&uarr) 8 | $rarr: '\2192' // Right arrow (&larr) 9 | $darr: '\2193' // Down arrow (&darr) 10 | $lrarr: '\2194' // Left right arrow (<->) 11 | $uparr: '\2195' // Up down arrow 12 | $nwarr: '\2196' // North west arrow 13 | $nearr: '\2197' // North east arrow 14 | $searr: '\2198' // South east arrow 15 | $swarr: '\2199' // South west arrow 16 | 17 | -------------------------------------------------------------------------------- /sass/_layouts.sass: -------------------------------------------------------------------------------- 1 | @import compass/utilities/general/clearfix 2 | 3 | = fixed-right-sidebar($size: 200px, $gutter: 20px) 4 | +pie-clearfix 5 | padding-right: $size + $gutter 6 | 7 | .main 8 | float: left 9 | 10 | .side 11 | margin-right: -1 * ($size + $gutter) 12 | width: $size 13 | float: right 14 | 15 | = fixed-left-sidebar($size: 200px, $gutter: 20px) 16 | +pie-clearfix 17 | padding-left: $size + $gutter 18 | 19 | .main 20 | float: right 21 | 22 | .side 23 | margin-left: -1 * ($size + $gutter) 24 | width: $size 25 | float: left 26 | 27 | -------------------------------------------------------------------------------- /sass/_textboxes.sass: -------------------------------------------------------------------------------- 1 | // ### $textinputs 2 | // Text inputs. 3 | // 4 | // @import 'utils/textboxes'; 5 | // 6 | // #{$textinputs} { 7 | // background: white; 8 | // ... 9 | // } 10 | // 11 | $textinputs: "input[type=text], input[type=password], input[type=email], input[type=search], input[type=url], input[type=number]" 12 | 13 | // ### $textboxes 14 | // Text inputs, including textarea. 15 | // 16 | // @import 'utils/textboxes'; 17 | // 18 | // #{$textboxes} { 19 | // background: white; 20 | // ... 21 | // } 22 | // 23 | $textboxes: "#{$textinputs}, textarea" 24 | -------------------------------------------------------------------------------- /sass/_scrollbar-image.sass: -------------------------------------------------------------------------------- 1 | // ### scrollbar-image 2 | // Enables webkit scrollbars using an image. 3 | // Make a 16x16 PNG image of a circle. This will be expanded to fill the scrollbar. 4 | // 5 | // html { 6 | // @include scrollbar-image(url(scroll-dark.png), 16px); 7 | // } 8 | // 9 | = scrollbar-image($image, $size: 16px) 10 | $half: floor($size / 2) 11 | $half-n: $half / ($half * 0 + 1) 12 | 13 | &::-webkit-scrollbar 14 | width: $size 15 | height: $size 16 | 17 | &::-webkit-scrollbar-thumb 18 | border-width: $half $half $half $half 19 | -webkit-border-image: $image $half-n $half-n $half-n $half-n round round 20 | -------------------------------------------------------------------------------- /sass/_selection.sass: -------------------------------------------------------------------------------- 1 | // ### selection 2 | // Changes selection color. 3 | // 4 | // @import 'utils/selection'; 5 | // 6 | // .header { 7 | // @include selection { 8 | // background: #fa30f0; 9 | // color: white; 10 | // } 11 | // } 12 | // 13 | = selection 14 | &::selection 15 | @content 16 | &::-moz-selection 17 | @content 18 | 19 | // ### root-selection 20 | // Changes selection color for the entire document. Include it at the top level. 21 | // 22 | // @import 'utils/selection'; 23 | // 24 | // @include root-selection { 25 | // background: #fa30f0; 26 | // color: white; 27 | // } 28 | // 29 | = root-selection 30 | ::selection 31 | @content 32 | ::-moz-selection 33 | @content 34 | 35 | -------------------------------------------------------------------------------- /sass/_retina.sass: -------------------------------------------------------------------------------- 1 | // ### retina 2 | // Media query for retina support. 3 | // 4 | // @import 'utils/retina'; 5 | // 6 | // .box { 7 | // @include retina { 8 | // background-image: url(icon@2x.png); 9 | // } 10 | // } 11 | // 12 | = retina 13 | +hidpi(1.5, "3/2") 14 | @content 15 | 16 | // ### hidpi 17 | // Media query for high-DPI resolutions. Consider using [retina](#retina) 18 | // instead. 19 | // 20 | // @import 'utils/retina'; 21 | // 22 | // .box { 23 | // @include hidpi(2) { 24 | // ... 25 | // } 26 | // } 27 | // 28 | = hidpi($ratio: 2, $opera-ratio: "#{$ratio}/1") 29 | @media (-o-min-device-pixel-ratio: $opera-ratio), (min--moz-device-pixel-ratio: $ratio), (-webkit-min-device-pixel-ratio: $ratio), (min-device-pixel-ratio: $ratio), (min-resolution: #{$ratio}dppx) 30 | @content 31 | -------------------------------------------------------------------------------- /sass/_mobile-reset.sass: -------------------------------------------------------------------------------- 1 | // ### mobile-reset 2 | // Disables common tap stuff for iOS webapps to make them behave more like 3 | // native apps: text selection, tap highlight colors, image save panel popup, 4 | // and automatic font resizing. 5 | // 6 | // @import 'utils/mobile-reset'; 7 | // 8 | // // Use it at the top level 9 | // @include mobile-reset; 10 | // 11 | // References: 12 | // - http://wiki.phonegap.com/w/page/16494795/iPhone%3A%20Prevent%20callout,%20link%20selection,%20text%20auto-resize 13 | // - http://www.bitsandpix.com/entry/ios-webkit-uiwebview-remove-tapclick-highlightborder-with-css/ 14 | // 15 | = mobile-reset 16 | * 17 | /* Disable text selection */ 18 | -webkit-user-select: none 19 | user-select: none 20 | 21 | /* Disable the image save panel (popup) */ 22 | -webkit-touch-callout: none 23 | 24 | /* Prevent WebKit from resizing text to fit */ 25 | -webkit-text-size-adjust: none 26 | 27 | /* Turn off link highlights */ 28 | -webkit-tap-highlight-color: transparent 29 | 30 | /* For forms */ 31 | input, textarea, select 32 | -webkit-user-select: auto 33 | user-select: auto 34 | -webkit-touch-callout: auto 35 | -------------------------------------------------------------------------------- /sass/_ios-scrollable.sass: -------------------------------------------------------------------------------- 1 | // ### ios-scrollbar-y 2 | // Enables fancy scrolling in iOS via nested divs. 3 | // 4 | // @import 'utils/ios-scrollable'; 5 | 6 | // .panel { 7 | // @include ios-scrollable-y; 8 | // position: relative; 9 | // } 10 | // 11 | // Note that your markup has to have a `div` wrapper inside, like this: 12 | // 13 | //
14 | //
15 | // (Actual content here) 16 | //
17 | //
18 | // 19 | // NOTE: `position: relative` is important! 20 | // 21 | = ios-scrollable-y 22 | &, >div 23 | -webkit-overflow-scrolling: touch 24 | overflow-x: hidden 25 | overflow-y: auto 26 | 27 | >div 28 | position: absolute 29 | left: 0 30 | top: 0 31 | bottom: 0 32 | right: 0 33 | 34 | // ### ios-scrollbar-x 35 | // Works like [ios-scrollbar-y](#ios-scrollbar-y), but makes the container 36 | // horizontally-scrollable instead of vertically. 37 | // 38 | = ios-scrollable-x 39 | &, >div 40 | -webkit-overflow-scrolling: touch 41 | overflow-x: auto 42 | overflow-y: hidden 43 | 44 | >div 45 | position: absolute 46 | left: 0 47 | top: 0 48 | bottom: 0 49 | right: 0 50 | -------------------------------------------------------------------------------- /sass/_position.sass: -------------------------------------------------------------------------------- 1 | // ### absolute 2 | // Shorthand for `position: absolute`. 3 | // 4 | // @import 'utils/position'; 5 | // 6 | // .container { 7 | // @include absolute($top: 30px, $right: 40px); 8 | // } 9 | // 10 | = absolute($top: auto, $right: auto, $bottom: auto, $left: auto) 11 | +position($top, $right, $bottom, $left, $position: absolute) 12 | 13 | // ### relative 14 | // Shorthand for `position: relative`. 15 | // See [absolute](#absolute) for an example. 16 | // 17 | = relative($top: auto, $right: auto, $bottom: auto, $left: auto) 18 | +position($top, $right, $bottom, $left, $position: relative) 19 | 20 | // ### fixed 21 | // Shorthand for `position: fixed`. 22 | // See [absolute](#absolute) for an example. 23 | // 24 | = fixed($top: auto, $right: auto, $bottom: auto, $left: auto) 25 | +position($top, $right, $bottom, $left, $position: relative) 26 | 27 | = position($top: auto, $right: auto, $bottom: auto, $left: auto, $position: auto) 28 | @if $position != auto 29 | position: $position 30 | @if $top != auto 31 | top: $top 32 | @if $right != auto 33 | right: $right 34 | @if $bottom != auto 35 | bottom: $bottom 36 | @if $left != auto 37 | left: $left 38 | -------------------------------------------------------------------------------- /sass/_notch.sass: -------------------------------------------------------------------------------- 1 | // ### notch 2 | // For tooltips and things that have triangles sticking out of them. 3 | // Simple notch. 4 | // 5 | // .box:after { 6 | // content: ''; 7 | // @include notch(left, 10px, #333); 8 | // } 9 | // 10 | = notch($direction, $size, $color, $display: block) 11 | $opposite: top 12 | @if ($direction == top) 13 | $opposite: bottom 14 | @if ($direction == left) 15 | $opposite: right 16 | @if ($direction == bottom) 17 | $opposite: top 18 | @if ($direction == right) 19 | $opposite: left 20 | 21 | display: $display 22 | width: 0 23 | height: 0 24 | border: solid $size transparent 25 | border-#{$opposite}-color: $color 26 | 27 | // ### box-notch 28 | // Enables notches for a container. Be sure to set `position: relative` as 29 | // well. 30 | // 31 | // @import 'utils/notch'; 32 | // 33 | // .box { 34 | // position: relative; 35 | // @include box-notch(left, top, 50%, 10px, #aaa); 36 | // } 37 | // 38 | // You may also set a border: 39 | // 40 | // .box { 41 | // position: relative; 42 | // @include box-notch(left, top, 50%, 10px, #aaa, 2px, #444); 43 | // } 44 | // 45 | = box-notch($direction, $align, $offset, $size, $color, $border: 0, $border-color: transparent, $inset: 0) 46 | @if ($border > 0) 47 | &:before 48 | content: '' 49 | position: absolute 50 | 51 | // left: -10px, top: 10px 52 | #{$direction}: -2 * $size + $inset 53 | #{$align}: $offset 54 | 55 | +notch($direction, $size, $border-color) 56 | 57 | &:after 58 | content: '' 59 | position: absolute 60 | // left: -10px, top: 10px 61 | #{$direction}: -2 * $size + ($border * 2) + $inset 62 | #{$align}: $offset + $border 63 | 64 | +notch($direction, $size - $border, $color) 65 | 66 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | CSS utils 2 | ========= 3 | 4 | Collection of Sass utilities. 5 | 6 | How to use 7 | ---------- 8 | 9 | Each stylesheet is self-contained, so simply pick out what you need and put it 10 | in your project. 11 | 12 | [View stylesheets >]( sass/ ) 13 | 14 | #### Example 15 | 16 | ~~~ sh 17 | cd ~/my/project/sass/ 18 | wget https://raw.github.com/rstacruz/cssutils/master/sass/_antialias.sass 19 | ~~~ 20 | 21 | Utilities 22 | --------- 23 | 24 | ### animation 25 | CSS animations, since Compass doesn't have any provisions for animation. 26 | Also see [keyframes](#keyframes). 27 | 28 | @import 'utils/animation'; 29 | 30 | .box { 31 | @include animation(bounce 300ms linear infinite); 32 | } 33 | 34 | ### antialias 35 | Forces anti-aliasing on environments that support it (usually OSX and 36 | Linux). 37 | 38 | @import 'utils/antialias'; 39 | 40 | * { 41 | @include antialias; 42 | } 43 | 44 | ### ellipsis 45 | Turns a given container to show ellipsis after one line. 46 | 47 | @import 'utils/ellipsis'; 48 | 49 | .title { 50 | @include ellipsis; 51 | height: 1.5em; 52 | line-height: 1.5em; 53 | } 54 | 55 | ### force-wrap 56 | Forces word wrapping by breaking words as needed. 57 | 58 | @import 'utils/force-wrap'; 59 | 60 | p { 61 | @include force-wrap; 62 | } 63 | 64 | ### ios-scrollbar-y 65 | Enables fancy scrolling in iOS via nested divs. 66 | 67 | @import 'utils/ios-scrollable'; 68 | .panel { 69 | @include ios-scrollable-y; 70 | position: relative; 71 | } 72 | 73 | Note that your markup has to have a `div` wrapper inside, like this: 74 | 75 |
76 |
77 | (Actual content here) 78 |
79 |
80 | 81 | NOTE: `position: relative` is important! 82 | 83 | ### ios-scrollbar-x 84 | Works like [ios-scrollbar-y](#ios-scrollbar-y), but makes the container 85 | horizontally-scrollable instead of vertically. 86 | 87 | ### keyframes 88 | Defines keyframes for an animation. 89 | 90 | @import 'utils/keyframes'; 91 | 92 | @include keyframes { 93 | 0% { opacity: 0; } 94 | 100% { opacity: 1.0; } 95 | } 96 | 97 | ### mobile-reset 98 | Disables common tap stuff for iOS webapps to make them behave more like 99 | native apps: text selection, tap highlight colors, image save panel popup, 100 | and automatic font resizing. 101 | 102 | @import 'utils/mobile-reset'; 103 | 104 | // Use it at the top level 105 | @include mobile-reset; 106 | 107 | References: 108 | - http://wiki.phonegap.com/w/page/16494795/iPhone%3A%20Prevent%20callout,%20link%20selection,%20text%20auto-resize 109 | - http://www.bitsandpix.com/entry/ios-webkit-uiwebview-remove-tapclick-highlightborder-with-css/ 110 | 111 | ### notch 112 | For tooltips and things that have triangles sticking out of them. 113 | Simple notch. 114 | 115 | .box:after { 116 | content: ''; 117 | @include notch(left, 10px, #333); 118 | } 119 | 120 | ### box-notch 121 | Enables notches for a container. Be sure to set `position: relative` as 122 | well. 123 | 124 | @import 'utils/notch'; 125 | 126 | .box { 127 | position: relative; 128 | @include box-notch(left, top, 50%, 10px, #aaa); 129 | } 130 | 131 | You may also set a border: 132 | 133 | .box { 134 | position: relative; 135 | @include box-notch(left, top, 50%, 10px, #aaa, 2px, #444); 136 | } 137 | 138 | ### nowrap 139 | Disables wrapping. 140 | 141 | @import 'utils/nowrap'; 142 | 143 | .box { 144 | @include nowrap; 145 | } 146 | 147 | ### placeholder 148 | Style the placeholder text for inputs. 149 | 150 | input { 151 | @include placeholder { 152 | color: #aaa; 153 | } 154 | } 155 | 156 | ### absolute 157 | Shorthand for `position: absolute`. 158 | 159 | @import 'utils/position'; 160 | 161 | .container { 162 | @include absolute($top: 30px, $right: 40px); 163 | } 164 | 165 | ### relative 166 | Shorthand for `position: relative`. 167 | See [absolute](#absolute) for an example. 168 | 169 | ### fixed 170 | Shorthand for `position: fixed`. 171 | See [absolute](#absolute) for an example. 172 | 173 | ### retina 174 | Media query for retina support. 175 | 176 | @import 'utils/retina'; 177 | 178 | .box { 179 | @include retina { 180 | background-image: url(icon@2x.png); 181 | } 182 | } 183 | 184 | ### hidpi 185 | Media query for high-DPI resolutions. Consider using [retina](#retina) 186 | instead. 187 | 188 | @import 'utils/retina'; 189 | 190 | .box { 191 | @include hidpi(2) { 192 | ... 193 | } 194 | } 195 | 196 | ### scrollbar-image 197 | Enables webkit scrollbars using an image. 198 | Make a 16x16 PNG image of a circle. This will be expanded to fill the scrollbar. 199 | 200 | html { 201 | @include scrollbar-image(url(scroll-dark.png), 16px); 202 | } 203 | 204 | ### selection 205 | Changes selection color. 206 | 207 | @import 'utils/selection'; 208 | 209 | .header { 210 | @include selection { 211 | background: #fa30f0; 212 | color: white; 213 | } 214 | } 215 | 216 | ### root-selection 217 | Changes selection color for the entire document. Include it at the top level. 218 | 219 | @import 'utils/selection'; 220 | 221 | @include root-selection { 222 | background: #fa30f0; 223 | color: white; 224 | } 225 | 226 | ### $textinputs 227 | Text inputs. 228 | 229 | @import 'utils/textboxes'; 230 | 231 | #{$textinputs} { 232 | background: white; 233 | ... 234 | } 235 | 236 | ### $textboxes 237 | Text inputs, including textarea. 238 | 239 | @import 'utils/textboxes'; 240 | 241 | #{$textboxes} { 242 | background: white; 243 | ... 244 | } 245 | 246 | Acknowledgements 247 | ---------------- 248 | 249 | MIT license 250 | --------------------------------------------------------------------------------