compass-placeholders 1.0.0.rc.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (56) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +6 -0
  3. data/Gemfile +4 -0
  4. data/MIT-LICENSE.md +11 -0
  5. data/README.md +237 -0
  6. data/Rakefile +82 -0
  7. data/compass-placeholders.gemspec +22 -0
  8. data/lib/compass-placeholders.rb +9 -0
  9. data/lib/compass-placeholders/version.rb +3 -0
  10. data/stylesheets/_compass-placeholders.scss +4 -0
  11. data/stylesheets/compass-placeholders/_css3.scss +11 -0
  12. data/stylesheets/compass-placeholders/_typography.scss +5 -0
  13. data/stylesheets/compass-placeholders/_utilities.scss +4 -0
  14. data/stylesheets/compass-placeholders/css3/_appearance.scss +7 -0
  15. data/stylesheets/compass-placeholders/css3/_backface-visibility.scss +8 -0
  16. data/stylesheets/compass-placeholders/css3/_background-clip.scss +7 -0
  17. data/stylesheets/compass-placeholders/css3/_background-origin.scss +7 -0
  18. data/stylesheets/compass-placeholders/css3/_border-radius.scss +9 -0
  19. data/stylesheets/compass-placeholders/css3/_box-shadow.scss +4 -0
  20. data/stylesheets/compass-placeholders/css3/_box-sizing.scss +8 -0
  21. data/stylesheets/compass-placeholders/css3/_box.scss +45 -0
  22. data/stylesheets/compass-placeholders/css3/_opacity.scss +16 -0
  23. data/stylesheets/compass-placeholders/css3/_transform-style.scss +8 -0
  24. data/stylesheets/compass-placeholders/css3/_user-select.scss +10 -0
  25. data/stylesheets/compass-placeholders/typography/_base.scss +32 -0
  26. data/stylesheets/compass-placeholders/typography/_hover-link.scss +4 -0
  27. data/stylesheets/compass-placeholders/typography/_lists.scss +12 -0
  28. data/stylesheets/compass-placeholders/typography/_text.scss +20 -0
  29. data/stylesheets/compass-placeholders/typography/_unstyled-link.scss +4 -0
  30. data/stylesheets/compass-placeholders/utilities/_clearfix.scss +8 -0
  31. data/stylesheets/compass-placeholders/utilities/_cursor.scss +8 -0
  32. data/stylesheets/compass-placeholders/utilities/_display.scss +8 -0
  33. data/stylesheets/compass-placeholders/utilities/_resets.scss +16 -0
  34. data/test/integration/css3/appearance.scss.test +12 -0
  35. data/test/integration/css3/backface-visibility.scss +12 -0
  36. data/test/integration/css3/background-clip.scss.test +12 -0
  37. data/test/integration/css3/border-origin.scss.test +12 -0
  38. data/test/integration/css3/border-radius.scss.test +22 -0
  39. data/test/integration/css3/box-shadow.scss.test +12 -0
  40. data/test/integration/css3/box-sizing.scss.test +12 -0
  41. data/test/integration/css3/box.scss.test +37 -0
  42. data/test/integration/css3/opacity.scss.test +15 -0
  43. data/test/integration/css3/transform-style.scss.test +12 -0
  44. data/test/integration/css3/user-select.scss.test +12 -0
  45. data/test/integration/scss_test.rb +50 -0
  46. data/test/integration/typography/base.scss.test +27 -0
  47. data/test/integration/typography/hover-link.scss.test +15 -0
  48. data/test/integration/typography/lists.scss.test +4 -0
  49. data/test/integration/typography/text.scss.test +4 -0
  50. data/test/integration/typography/unstyled-link.scss.test +4 -0
  51. data/test/integration/utilities/clearfix.scss.test +13 -0
  52. data/test/integration/utilities/cursor.scss.test +12 -0
  53. data/test/integration/utilities/display.scss.test +12 -0
  54. data/test/integration/utilities/resets.scss.test +27 -0
  55. data/test/test_helper.rb +4 -0
  56. metadata +135 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: e314a755de76212de121bd8dc8b0d35382655aa0
4
+ data.tar.gz: 2ae6fbbe68518e1e39d610589dfe1fe0003f77e3
5
+ SHA512:
6
+ metadata.gz: 4579465f3e78702bd807329ee5b1ddb5c7564bb99b78605b5e88e53f9167defe44eeaa3e6214913e4e084b623c1911ce70343ee4d7acd2e093d8bd749671c45a
7
+ data.tar.gz: 25d45db2ebe6a5a700f687767219bc03b14fde2d2f3f0a9d6b66fbbe20ec6b38749081bab4bba820e5c717f338783f11bd03cfd9b841a699af5226c12645c5ef
data/.gitignore ADDED
@@ -0,0 +1,6 @@
1
+ *.gem
2
+ .bundle
3
+ Gemfile.lock
4
+ pkg/*
5
+ .sass-cache
6
+ .rvmrc
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source "http://rubygems.org"
2
+
3
+ # Specify your gem's dependencies in compass-placeholders.gemspec
4
+ gemspec
data/MIT-LICENSE.md ADDED
@@ -0,0 +1,11 @@
1
+ Copyright (c) 2012 Nico Hagenburger
2
+
3
+ http://www.hagenburger.net
4
+ http://twitter.com/hagenburger
5
+ http://github.com/hagenburger
6
+
7
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
8
+
9
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
10
+
11
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,237 @@
1
+ Compass Placeholders
2
+ ====================
3
+
4
+ @extendable %placeholders for common CSS3 code provided by Compass. For example use `@extend %hide-text;` instead of `@include hide-text;` this
5
+
6
+ * obiously reduces the file size of the CSS
7
+ * and speeds up rendering. Read [‘Different CSS techniques and their performance’](http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/) for details.
8
+
9
+
10
+ Example: hover-link
11
+ -------------------
12
+
13
+ Traditional way via [Compass](http://compass-style.org/):
14
+
15
+ a.first-link {
16
+ @include hover-link;
17
+ }
18
+
19
+ a.second-link {
20
+ @include hover-link;
21
+ }
22
+
23
+ Result:
24
+
25
+ a.first-link {
26
+ text-decoration: none;
27
+ }
28
+
29
+ a.first-link:hover {
30
+ text-decoration: underline;
31
+ }
32
+
33
+ a.second-link {
34
+ text-decoration: none;
35
+ }
36
+
37
+ a.second-link:hover {
38
+ text-decoration: underline;
39
+ }
40
+
41
+ ----
42
+
43
+ Optimized way via **Compass Placeholders:**
44
+
45
+ a.first-link {
46
+ @extend %hover-link;
47
+ }
48
+
49
+ a.second-link {
50
+ @extend %hover-link;
51
+ }
52
+
53
+ Result (DRY – don’t repeat yourself):
54
+
55
+ a.first-link,
56
+ a.second-link {
57
+ text-decoration: none;
58
+ }
59
+
60
+ a.first-link:hover,
61
+ a.second-link:hover {
62
+ text-decoration: underline;
63
+ }
64
+
65
+
66
+ Compass CSS3 Placeholders
67
+ -------------------------
68
+
69
+ * **[Appearance](http://compass-style.org/reference/compass/css3/appearance/):**
70
+ * `@extend %appearance-none;`
71
+ * `@extend %appearance-normal;`
72
+ * `@extend %appearance-icon;`
73
+ * `@extend %appearance-window;`
74
+ * `@extend %appearance-button;`
75
+ * `@extend %appearance-menu;`
76
+ * `@extend %appearance-field;`
77
+ * Customize list by setting `$appearance-placeholders: none, normal;`
78
+
79
+ * **[Background clip](http://compass-style.org/reference/compass/css3/background_clip/):**
80
+ * `@extend %background-clip-padding-box;`
81
+ * `@extend %background-clip-border-box;`
82
+ * `@extend %background-clip-text;`
83
+ * Customize list by setting `$background-clip-placeholders: padding-box, border-box;`
84
+
85
+ * **[Background origin](http://compass-style.org/reference/compass/css3/background_origin/):**
86
+ * `@extend %background-origin-padding-box;`
87
+ * `@extend %background-origin-border-box;`
88
+ * `@extend %background-origin-content-box;`
89
+
90
+ * **[Border radius](http://compass-style.org/reference/compass/css3/border_radius/):**
91
+ * `@extend %no-border-radius;` (equals border-radius: 0)
92
+ * Create placeholders for `border-radius` by setting `$border-radius-placeholders: 0, 3px, 10px;` which results in:
93
+ * `@extend %border-radius-0;`
94
+ * `@extend %border-radius-3px;`
95
+ * `@extend %border-radius-10px;`
96
+
97
+ You should prefer to use custom names like `%small-border-radius` and `%big-border-radius` over those listed above.
98
+
99
+ * **[Box](http://compass-style.org/reference/compass/css3/box/):**
100
+ * `@extend %display-box;`
101
+ * `@extend %box-orient-horizontal;`
102
+ * `@extend %box-orient-vertical;`
103
+ * `@extend %box-orient-inline-axis;`
104
+ * `@extend %box-orient-block-axis;`
105
+ * `@extend %box-orient-inherit;`
106
+ * `@extend %box-align-start;`
107
+ * `@extend %box-align-end;`
108
+ * `@extend %box-align-center;`
109
+ * `@extend %box-align-baseline;`
110
+ * `@extend %box-align-stretch;`
111
+ * `@extend %box-direction-normal;`
112
+ * `@extend %box-direction-reverse;`
113
+ * `@extend %box-direction-inherit;`
114
+ * `@extend %box-lines-single;`
115
+ * `@extend %box-lines-multiple;`
116
+ * `@extend %box-pack-start;`
117
+ * `@extend %box-pack-end;`
118
+ * `@extend %box-pack-center;`
119
+ * `@extend %box-pack-justify;`
120
+ * Customize lists by setting `$box-orient-placeholders`, `$box-align-placeholders`, `$box-direction-placeholders`, `$box-lines-placeholders` and `$box-pack-placeholders`.
121
+ * Create placeholders for `box-flex` by setting `$box-flex-placeholders: 0, 1;` which results in:
122
+ * `@extend %box-flex-0;`
123
+ * `@extend %box-flex-1;`
124
+ * Create placeholders for `box-flex-group` by setting `$box-flex-group-placeholders: 1, 2;` which results in:
125
+ * `@extend %box-flex-1;`
126
+ * `@extend %box-flex-2;`
127
+ * Create placeholders for `box-ordinal-group` by setting `$box-ordinal-group-placeholders: 1, 2;` which results in:
128
+ * `@extend %box-flex-1;`
129
+ * `@extend %box-flex-2;`
130
+
131
+ * **[Box shadow](http://compass-style.org/reference/compass/css3/box_shadow/):**
132
+ * `@extend %no-box-shadow;`
133
+
134
+ * **[Box sizing](http://compass-style.org/reference/compass/css3/box_sizing/):**
135
+ * `@extend %box-sizing-content-box;`
136
+ * `@extend %box-sizing-border-box;`
137
+ * Customize list by setting `$box-sizing-placeholders: border-box;`
138
+
139
+ * **[Opacity](http://compass-style.org/reference/compass/css3/opacity/):**
140
+ * `@extend %transparent;`
141
+ * `@extend %opaque;`
142
+ * Create placeholders for `opacity` by setting `$opacity-placeholders: 0.25, 0.5;` which results in:
143
+ * `@extend %opacity-25;`
144
+ * `@extend %opacity-50;`
145
+
146
+ * **[Text shadow](http://compass-style.org/reference/compass/css3/text-shadow/):**
147
+ * `@extend %no-text-shadow;`
148
+
149
+ * **[Transform](http://compass-style.org/reference/compass/css3/transform/):**
150
+ * `@extend %transform-style-flat;`
151
+ * `@extend %transform-style-preserve-3d;`
152
+ * `@extend %backface-visibility-visible;`
153
+ * `@extend %backface-visibility-hidden;`
154
+
155
+ * **[User interface](http://compass-style.org/reference/compass/css3/user_interface/):**
156
+ * `@extend %user-select-none;`
157
+ * `@extend %user-select-text;`
158
+ * `@extend %user-select-toggle;`
159
+ * `@extend %user-select-element;`
160
+ * `@extend %user-select-elements;`
161
+ * `@extend %user-select-all;`
162
+ * `@extend %user-select-inherit;`
163
+ * Customize list by setting `$user-select-placeholders: none, text;`
164
+
165
+
166
+ Compass Typography Placeholders
167
+ -------------------------------
168
+
169
+ * **[Links](http://compass-style.org/reference/compass/typography/links/):**
170
+ * `@extend %hover-link;`
171
+ * `@extend %unstyled-link;`
172
+
173
+ * **[Lists](http://compass-style.org/reference/compass/typography/lists/):**
174
+ * `@extend %no-bullet;`
175
+ * `@extend %no-bullets;`
176
+
177
+ * **[Inline list](http://compass-style.org/reference/compass/typography/lists/inline_list/):**
178
+ * `@extend %inline-list;`
179
+
180
+ * **[Text](http://compass-style.org/reference/compass/typography/text/):**
181
+ * `@extend %ellipsis;`
182
+ * `@extend %no-ellipsis;`
183
+ * `@extend %force-wrap;`
184
+ * `@extend %nowrap;`
185
+ * `@extend %hide-text;`
186
+ * `@extend %squish-text;`
187
+
188
+
189
+ Compass Utilities Placeholders
190
+ -------------------------------
191
+
192
+ * **[Clearfix](http://compass-style.org/reference/compass/utilities/general/clearfix/):**
193
+ * `@extend %clearfix;`
194
+ * `@extend %pie-clearfix;`
195
+
196
+
197
+ Non Compass-related Placeholders
198
+ -------------------------------
199
+
200
+ * **Resets:**
201
+ * `@extend %no-background;` (equals background: transparent)
202
+ * `@extend %no-border;` (equals border: 0)
203
+ * `@extend %no-margin;` (equals margin: 0)
204
+ * `@extend %no-padding;` (equals padding: 0)
205
+
206
+ * **Display:**
207
+ * `@extend %display-none;`
208
+ * `@extend %display-block;`
209
+ * `@extend %display-inline-block;`
210
+ * `@extend %display-table;`
211
+ * `@extend %display-table-cell;`
212
+ * `@extend %display-table-row;`
213
+ * Customize list by setting `$display-placeholders: none, block;`
214
+
215
+ * **Typography:**
216
+ * `@extend %font-weight-bold;`
217
+ * `@extend %font-weight-normal;`
218
+ * `@extend %font-style-italic;`
219
+ * `@extend %font-style-normal;`
220
+ * `@extend %text-decoration-underline;`
221
+ * `@extend %text-decoration-none;`
222
+ * `@extend %text-align-left;`
223
+ * `@extend %text-align-center;`
224
+ * `@extend %text-align-right;`
225
+ * `@extend %text-align-justify;`
226
+
227
+ * **User interface:**
228
+ * `@extend %cursor-default;`
229
+ * `@extend %cursor-pointer;`
230
+
231
+
232
+ Copyright
233
+ ---------
234
+
235
+ Copyright (c) 2012 – 2013 [Nico Hagenburger](http://www.hagenburger.net).
236
+ See blob/master/MIT-LICENSE.md for details.
237
+ [Follow me](http://twitter.com/hagenburger) on twitter.
data/Rakefile ADDED
@@ -0,0 +1,82 @@
1
+ require "bundler/gem_tasks"
2
+ require 'rake/testtask'
3
+
4
+ Rake::TestTask.new :test do |t|
5
+ t.libs << 'lib'
6
+ t.libs << 'test'
7
+ test_files = FileList['test/**/*_test.rb']
8
+ t.test_files = test_files
9
+ t.verbose = true
10
+ end
11
+
12
+ task :add do
13
+ puts 'module/name: '
14
+ path, name = STDIN.gets.chomp.split('/')
15
+ puts 'placeholders: '
16
+ placeholders = STDIN.gets.chomp.strip.split(/[ ,]+/)
17
+
18
+ File.open "stylesheets/compass-placeholders/#{path}/_#{name}.scss", 'w' do |f|
19
+ if placeholders.empty?
20
+ f << <<-SCSS
21
+ %#{name} {
22
+ @include #{name};
23
+ }
24
+
25
+ SCSS
26
+ else
27
+ f << <<-SCSS
28
+ $#{name}-placeholders: #{placeholders.join(', ')} !default;
29
+
30
+ @each $property in $#{name}-placeholders {
31
+ %#{name}-\#{$property} {
32
+ @include #{name}($property);
33
+ }
34
+ }
35
+
36
+ SCSS
37
+ end
38
+ end
39
+
40
+ File.open "stylesheets/compass-placeholders/_#{path}.scss", 'a' do |f|
41
+ f << %Q(@import "#{path}/#{name}";\n)
42
+ end
43
+
44
+ if test_value = placeholders.first
45
+ File.open "test/integration/#{path}/#{name}.scss.test", 'w' do |f|
46
+ f << <<-SCSS
47
+ @import "compass-placeholders";
48
+
49
+ #test {
50
+ @extend %#{name}-#{test_value};
51
+ }
52
+
53
+ ===
54
+
55
+ #test {
56
+ #{name}: #{test_value};
57
+ }
58
+
59
+ SCSS
60
+ end
61
+ else
62
+ File.open "test/integration/#{path}/#{name}.scss.test", 'w' do |f|
63
+ f << <<-SCSS
64
+ @import "compass-placeholders";
65
+
66
+ #test {
67
+ @extend %#{name};
68
+ }
69
+
70
+ ===
71
+
72
+ #test {
73
+
74
+ }
75
+
76
+ SCSS
77
+ end
78
+ end
79
+ end
80
+
81
+ task :default => [:test]
82
+
@@ -0,0 +1,22 @@
1
+ # -*- encoding: utf-8 -*-
2
+ $:.push File.expand_path("../lib", __FILE__)
3
+ require "compass-placeholders/version"
4
+
5
+ Gem::Specification.new do |s|
6
+ s.name = "compass-placeholders"
7
+ s.version = CompassPlaceholders::VERSION
8
+ s.authors = ["Nico Hagenburger"]
9
+ s.email = ["nico@hagenburger.net"]
10
+ s.homepage = ""
11
+ s.summary = %q{@extendable %placeholders for common CSS3 code.}
12
+ s.description = %q{@extendable %placeholders for common CSS3 code provided by Compass. For example use `@extend %hide-text;` instead of `@include hide-text;` to save file size and speed up rendering.}
13
+
14
+ s.rubyforge_project = "compass-placeholders"
15
+
16
+ s.files = `git ls-files`.split("\n")
17
+ s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
18
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
19
+ s.require_paths = ["lib"]
20
+
21
+ s.add_runtime_dependency "compass"
22
+ end
@@ -0,0 +1,9 @@
1
+ require 'compass-placeholders/version'
2
+ require 'compass'
3
+
4
+ module CompassPlaceholders
5
+ BASE_PATH = File.join(File.dirname(__FILE__), '..')
6
+ end
7
+
8
+ Compass::Frameworks.register('compass-placeholders',
9
+ :path => CompassPlaceholders::BASE_PATH)
@@ -0,0 +1,3 @@
1
+ module CompassPlaceholders
2
+ VERSION = "1.0.0.rc.1"
3
+ end
@@ -0,0 +1,4 @@
1
+ @import "compass-placeholders/css3";
2
+ @import "compass-placeholders/typography";
3
+ @import "compass-placeholders/utilities";
4
+
@@ -0,0 +1,11 @@
1
+ @import "css3/appearance";
2
+ @import "css3/background-clip";
3
+ @import "css3/background-origin";
4
+ @import "css3/border-radius";
5
+ @import "css3/box-shadow";
6
+ @import "css3/box-sizing";
7
+ @import "css3/transform-style";
8
+ @import "css3/backface-visibility";
9
+ @import "css3/user-select";
10
+ @import "css3/opacity";
11
+ @import "css3/box";
@@ -0,0 +1,5 @@
1
+ @import "typography/hover-link";
2
+ @import "typography/unstyled-link";
3
+ @import "typography/lists";
4
+ @import "typography/text";
5
+ @import "typography/base";
@@ -0,0 +1,4 @@
1
+ @import "utilities/clearfix";
2
+ @import "utilities/resets";
3
+ @import "utilities/display";
4
+ @import "utilities/cursor";
@@ -0,0 +1,7 @@
1
+ $appearance-placeholders: none, normal, icon, window, button, menu, field !default;
2
+
3
+ @each $property in $appearance-placeholders {
4
+ %appearance-#{$property} {
5
+ @include appearance($property);
6
+ }
7
+ }
@@ -0,0 +1,8 @@
1
+ $backface-visibility-placeholders: visible, hidden !default;
2
+
3
+ @each $property in $backface-visibility-placeholders {
4
+ %backface-visibility-#{$property} {
5
+ @include backface-visibility($property);
6
+ }
7
+ }
8
+
@@ -0,0 +1,7 @@
1
+ $background-clip-placeholders: padding-box, border-box, text !default;
2
+
3
+ @each $property in $background-clip-placeholders {
4
+ %background-clip-#{$property} {
5
+ @include background-clip($property);
6
+ }
7
+ }
@@ -0,0 +1,7 @@
1
+ $background-origin-placeholders: padding-box, border-box, content-box !default;
2
+
3
+ @each $property in $background-origin-placeholders {
4
+ %background-origin-#{$property} {
5
+ @include background-origin($property);
6
+ }
7
+ }
@@ -0,0 +1,9 @@
1
+ $border-radius-placeholders: none !default;
2
+
3
+ @if $border-radius-placeholders {
4
+ @each $property in $border-radius-placeholders {
5
+ %border-radius-#{$property} {
6
+ @include border-radius($property);
7
+ }
8
+ }
9
+ }
@@ -0,0 +1,4 @@
1
+ %no-box-shadow {
2
+ @include box-shadow(none);
3
+ }
4
+
@@ -0,0 +1,8 @@
1
+ $box-sizing-placeholders: content-box, border-box !default;
2
+
3
+ @each $property in $box-sizing-placeholders {
4
+ %box-sizing-#{$property} {
5
+ @include box-sizing($property);
6
+ }
7
+ }
8
+
@@ -0,0 +1,45 @@
1
+ %display-box {
2
+ @include display-box;
3
+ }
4
+
5
+ $box-orient-placeholders: horizontal, vertical, inline-axis, block-axis,
6
+ inherit !default;
7
+
8
+ @each $property in $box-orient-placeholders {
9
+ %box-orient-#{$property} {
10
+ @include box-orient($property);
11
+ }
12
+ }
13
+
14
+ $box-align-placeholders: start, end, center, baseline, stretch !default;
15
+
16
+ @each $property in $box-align-placeholders {
17
+ %box-align-#{$property} {
18
+ @include box-align($property);
19
+ }
20
+ }
21
+
22
+ $box-direction-placeholders: normal, reverse, inherit !default;
23
+
24
+ @each $property in $box-direction-placeholders {
25
+ %box-direction-#{$property} {
26
+ @include box-direction($property);
27
+ }
28
+ }
29
+
30
+ $box-lines-placeholders: single, multiple !default;
31
+
32
+ @each $property in $box-lines-placeholders {
33
+ %box-lines-#{$property} {
34
+ @include box-lines($property);
35
+ }
36
+ }
37
+
38
+ $box-pack-placeholders: start, end, center, justify !default;
39
+
40
+ @each $property in $box-pack-placeholders {
41
+ %box-pack-#{$property} {
42
+ @include box-pack($property);
43
+ }
44
+ }
45
+
@@ -0,0 +1,16 @@
1
+ $opacity-placeholders: 0, 0.5, 1 !default;
2
+
3
+ @each $property in $opacity-placeholders {
4
+ %opacity-#{$property * 100} {
5
+ @include opacity($property);
6
+ }
7
+ }
8
+
9
+ %transparent {
10
+ @extend %opacity-0;
11
+ }
12
+
13
+ %opaque {
14
+ @extend %opacity-100;
15
+ }
16
+
@@ -0,0 +1,8 @@
1
+ $transform-style-placeholders: flat, preserve-3d !default;
2
+
3
+ @each $property in $transform-style-placeholders {
4
+ %transform-style-#{$property} {
5
+ @include transform-style($property);
6
+ }
7
+ }
8
+
@@ -0,0 +1,10 @@
1
+ @import "compass/css3/user-interface";
2
+
3
+ $user-select-placeholders: none, text, toggle, element, elements, all, inherit !default;
4
+
5
+ @each $property in $user-select-placeholders {
6
+ %user-select-#{$property} {
7
+ @include user-select($property);
8
+ }
9
+ }
10
+
@@ -0,0 +1,32 @@
1
+ $font-weight-placeholders: normal, bold;
2
+
3
+ @each $property in $font-weight-placeholders {
4
+ %font-weight-#{$property} {
5
+ font-weight: $property;
6
+ }
7
+ }
8
+
9
+ $font-style-placeholders: normal, italic;
10
+
11
+ @each $property in $font-style-placeholders {
12
+ %font-style-#{$property} {
13
+ font-style: $property;
14
+ }
15
+ }
16
+
17
+ $text-decoration-placeholders: none, underline;
18
+
19
+ @each $property in $text-decoration-placeholders {
20
+ %text-decoration-#{$property} {
21
+ text-decoration: $property;
22
+ }
23
+ }
24
+
25
+ $text-align-placeholders: left, center, right, justify;
26
+
27
+ @each $property in $text-align-placeholders {
28
+ %text-align-#{$property} {
29
+ text-align: $property;
30
+ }
31
+ }
32
+
@@ -0,0 +1,4 @@
1
+ %hover-link {
2
+ @include hover-link;
3
+ }
4
+
@@ -0,0 +1,12 @@
1
+ %no-bullet {
2
+ @include no-bullet;
3
+ }
4
+
5
+ %no-bullets {
6
+ @include no-bullets;
7
+ }
8
+
9
+ %inline-list {
10
+ @include inline-list;
11
+ }
12
+
@@ -0,0 +1,20 @@
1
+ %ellipsis {
2
+ @include ellipsis;
3
+ }
4
+
5
+ %force-wrap {
6
+ @include force-wrap;
7
+ }
8
+
9
+ %nowrap {
10
+ @include nowrap;
11
+ }
12
+
13
+ %hide-text {
14
+ @include hide-text;
15
+ }
16
+
17
+ %squish-text {
18
+ @include squish-text;
19
+ }
20
+
@@ -0,0 +1,4 @@
1
+ %unstyled-link {
2
+ @include unstyled-link;
3
+ }
4
+
@@ -0,0 +1,8 @@
1
+ %clearfix {
2
+ @include clearfix;
3
+ }
4
+
5
+ %pie-clearfix {
6
+ @include pie-clearfix;
7
+ }
8
+
@@ -0,0 +1,8 @@
1
+ $cursor-placeholders: default, pointer !default;
2
+
3
+ @each $property in $cursor-placeholders {
4
+ %cursor-#{$property} {
5
+ cursor: $property;
6
+ }
7
+ }
8
+
@@ -0,0 +1,8 @@
1
+ $display-placeholders: none, block, inline-block, table, table-cell, table-row !default;
2
+
3
+ @each $property in $display-placeholders {
4
+ %display-#{$property} {
5
+ display: $property;
6
+ }
7
+ }
8
+
@@ -0,0 +1,16 @@
1
+ %no-background {
2
+ background: transparent;
3
+ }
4
+
5
+ %no-border {
6
+ border: 0;
7
+ }
8
+
9
+ %no-margin {
10
+ margin: 0;
11
+ }
12
+
13
+ %no-padding {
14
+ padding: 0;
15
+ }
16
+
@@ -0,0 +1,12 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %appearance-none;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ appearance: none;
11
+ }
12
+
@@ -0,0 +1,12 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %backface-visibility-visible;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ backface-visibility: visible;
11
+ }
12
+
@@ -0,0 +1,12 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %background-clip-padding-box;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ background-clip: padding-box;
11
+ }
12
+
@@ -0,0 +1,12 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %background-origin-padding-box;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ background-origin: padding-box;
11
+ }
12
+
@@ -0,0 +1,22 @@
1
+ $border-radius-placeholders: none, 5px;
2
+
3
+ @import "compass-placeholders";
4
+
5
+ #test-none {
6
+ @extend %border-radius-none;
7
+ }
8
+
9
+ #test-5px {
10
+ @extend %border-radius-5px;
11
+ }
12
+
13
+ ===
14
+
15
+ #test-none {
16
+ border-radius: none;
17
+ }
18
+
19
+ #test-5px {
20
+ border-radius: 5px;
21
+ }
22
+
@@ -0,0 +1,12 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %no-box-shadow;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ box-shadow: none;
11
+ }
12
+
@@ -0,0 +1,12 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %box-sizing-border-box;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ box-sizing: border-box;
11
+ }
12
+
@@ -0,0 +1,37 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %display-box;
5
+ @extend %box-orient-horizontal;
6
+ @extend %box-align-start;
7
+ @extend %box-direction-normal;
8
+ @extend %box-lines-single;
9
+ @extend %box-pack-start;
10
+ }
11
+
12
+ ===
13
+
14
+ #test {
15
+ display: box;
16
+ }
17
+
18
+ #test {
19
+ box-orient: horizontal;
20
+ }
21
+
22
+ #test {
23
+ box-align: start;
24
+ }
25
+
26
+ #test {
27
+ box-direction: normal;
28
+ }
29
+
30
+ #test {
31
+ box-lines: single;
32
+ }
33
+
34
+ #test {
35
+ box-pack: start;
36
+ }
37
+
@@ -0,0 +1,15 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ // Shound only generate one selector:
5
+ @extend %opacity-0;
6
+ @extend %transparent;
7
+ }
8
+
9
+ ===
10
+
11
+ #test {
12
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
13
+ opacity: 0;
14
+ }
15
+
@@ -0,0 +1,12 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %transform-style-flat;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ transform-style: flat;
11
+ }
12
+
@@ -0,0 +1,12 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %user-select-none;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ user-select: none;
11
+ }
12
+
@@ -0,0 +1,50 @@
1
+ require 'test_helper'
2
+ require 'fileutils'
3
+ require 'compass'
4
+ require 'compass/logger'
5
+ require 'sass/plugin'
6
+
7
+ class VariablesImporterTest < Test::Unit::TestCase
8
+
9
+ def setup
10
+ Compass.configure_sass_plugin!
11
+ end
12
+
13
+ def render(scss)
14
+ options = Compass.sass_engine_options
15
+ options[:line_comments] = false
16
+ options[:style] = :expanded
17
+ options[:syntax] = :scss
18
+ options[:compass] ||= {}
19
+ options[:compass][:logger] ||= Compass::NullLogger.new
20
+ Sass::Engine.new(scss, options).render.strip
21
+ end
22
+
23
+ def get_test(file)
24
+ content = File.read(file)
25
+ input, output = content.split(/===+/)
26
+ [input.strip, output.strip]
27
+ end
28
+
29
+ Dir.glob File.join(File.dirname(__FILE__), '**/*.scss.test') do |file|
30
+ basename = File.basename(file, '.scss.test')
31
+ self.class_eval <<-RUBY
32
+ def test_#{basename.gsub('-', '_')}
33
+ input, output = get_test("#{file}")
34
+
35
+ css = render <<-SCSS
36
+ $experimental-support-for-mozilla : false !default;
37
+ $experimental-support-for-webkit : false !default;
38
+ $experimental-support-for-opera : false !default;
39
+ $experimental-support-for-microsoft : false !default;
40
+ $experimental-support-for-khtml : false !default;
41
+ @import "compass";
42
+ \#{input}
43
+ SCSS
44
+
45
+ assert_equal output, css
46
+ end
47
+ RUBY
48
+ end
49
+ end
50
+
@@ -0,0 +1,27 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %font-weight-bold;
5
+ @extend %font-style-italic;
6
+ @extend %text-decoration-underline;
7
+ @extend %text-align-right;
8
+ }
9
+
10
+ ===
11
+
12
+ #test {
13
+ font-weight: bold;
14
+ }
15
+
16
+ #test {
17
+ font-style: italic;
18
+ }
19
+
20
+ #test {
21
+ text-decoration: underline;
22
+ }
23
+
24
+ #test {
25
+ text-align: right;
26
+ }
27
+
@@ -0,0 +1,15 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %hover-link;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ text-decoration: none;
11
+ }
12
+ #test:hover {
13
+ text-decoration: underline;
14
+ }
15
+
@@ -0,0 +1,4 @@
1
+ @import "compass-placeholders";
2
+
3
+ ===
4
+
@@ -0,0 +1,4 @@
1
+ @import "compass-placeholders";
2
+
3
+ ===
4
+
@@ -0,0 +1,4 @@
1
+ @import "compass-placeholders";
2
+
3
+ ===
4
+
@@ -0,0 +1,13 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %clearfix;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ overflow: hidden;
11
+ *zoom: 1;
12
+ }
13
+
@@ -0,0 +1,12 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %cursor-default;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ cursor: default;
11
+ }
12
+
@@ -0,0 +1,12 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %display-none;
5
+ }
6
+
7
+ ===
8
+
9
+ #test {
10
+ display: none;
11
+ }
12
+
@@ -0,0 +1,27 @@
1
+ @import "compass-placeholders";
2
+
3
+ #test {
4
+ @extend %no-background;
5
+ @extend %no-border;
6
+ @extend %no-margin;
7
+ @extend %no-padding;
8
+ }
9
+
10
+ ===
11
+
12
+ #test {
13
+ background: transparent;
14
+ }
15
+
16
+ #test {
17
+ border: 0;
18
+ }
19
+
20
+ #test {
21
+ margin: 0;
22
+ }
23
+
24
+ #test {
25
+ padding: 0;
26
+ }
27
+
@@ -0,0 +1,4 @@
1
+ require 'compass'
2
+ require 'compass-placeholders'
3
+ require 'test/unit'
4
+
metadata ADDED
@@ -0,0 +1,135 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: compass-placeholders
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.0.0.rc.1
5
+ platform: ruby
6
+ authors:
7
+ - Nico Hagenburger
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2013-10-13 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: compass
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - '>='
18
+ - !ruby/object:Gem::Version
19
+ version: '0'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - '>='
25
+ - !ruby/object:Gem::Version
26
+ version: '0'
27
+ description: '@extendable %placeholders for common CSS3 code provided by Compass.
28
+ For example use `@extend %hide-text;` instead of `@include hide-text;` to save file
29
+ size and speed up rendering.'
30
+ email:
31
+ - nico@hagenburger.net
32
+ executables: []
33
+ extensions: []
34
+ extra_rdoc_files: []
35
+ files:
36
+ - .gitignore
37
+ - Gemfile
38
+ - MIT-LICENSE.md
39
+ - README.md
40
+ - Rakefile
41
+ - compass-placeholders.gemspec
42
+ - lib/compass-placeholders.rb
43
+ - lib/compass-placeholders/version.rb
44
+ - stylesheets/_compass-placeholders.scss
45
+ - stylesheets/compass-placeholders/_css3.scss
46
+ - stylesheets/compass-placeholders/_typography.scss
47
+ - stylesheets/compass-placeholders/_utilities.scss
48
+ - stylesheets/compass-placeholders/css3/_appearance.scss
49
+ - stylesheets/compass-placeholders/css3/_backface-visibility.scss
50
+ - stylesheets/compass-placeholders/css3/_background-clip.scss
51
+ - stylesheets/compass-placeholders/css3/_background-origin.scss
52
+ - stylesheets/compass-placeholders/css3/_border-radius.scss
53
+ - stylesheets/compass-placeholders/css3/_box-shadow.scss
54
+ - stylesheets/compass-placeholders/css3/_box-sizing.scss
55
+ - stylesheets/compass-placeholders/css3/_box.scss
56
+ - stylesheets/compass-placeholders/css3/_opacity.scss
57
+ - stylesheets/compass-placeholders/css3/_transform-style.scss
58
+ - stylesheets/compass-placeholders/css3/_user-select.scss
59
+ - stylesheets/compass-placeholders/typography/_base.scss
60
+ - stylesheets/compass-placeholders/typography/_hover-link.scss
61
+ - stylesheets/compass-placeholders/typography/_lists.scss
62
+ - stylesheets/compass-placeholders/typography/_text.scss
63
+ - stylesheets/compass-placeholders/typography/_unstyled-link.scss
64
+ - stylesheets/compass-placeholders/utilities/_clearfix.scss
65
+ - stylesheets/compass-placeholders/utilities/_cursor.scss
66
+ - stylesheets/compass-placeholders/utilities/_display.scss
67
+ - stylesheets/compass-placeholders/utilities/_resets.scss
68
+ - test/integration/css3/appearance.scss.test
69
+ - test/integration/css3/backface-visibility.scss
70
+ - test/integration/css3/background-clip.scss.test
71
+ - test/integration/css3/border-origin.scss.test
72
+ - test/integration/css3/border-radius.scss.test
73
+ - test/integration/css3/box-shadow.scss.test
74
+ - test/integration/css3/box-sizing.scss.test
75
+ - test/integration/css3/box.scss.test
76
+ - test/integration/css3/opacity.scss.test
77
+ - test/integration/css3/transform-style.scss.test
78
+ - test/integration/css3/user-select.scss.test
79
+ - test/integration/scss_test.rb
80
+ - test/integration/typography/base.scss.test
81
+ - test/integration/typography/hover-link.scss.test
82
+ - test/integration/typography/lists.scss.test
83
+ - test/integration/typography/text.scss.test
84
+ - test/integration/typography/unstyled-link.scss.test
85
+ - test/integration/utilities/clearfix.scss.test
86
+ - test/integration/utilities/cursor.scss.test
87
+ - test/integration/utilities/display.scss.test
88
+ - test/integration/utilities/resets.scss.test
89
+ - test/test_helper.rb
90
+ homepage: ''
91
+ licenses: []
92
+ metadata: {}
93
+ post_install_message:
94
+ rdoc_options: []
95
+ require_paths:
96
+ - lib
97
+ required_ruby_version: !ruby/object:Gem::Requirement
98
+ requirements:
99
+ - - '>='
100
+ - !ruby/object:Gem::Version
101
+ version: '0'
102
+ required_rubygems_version: !ruby/object:Gem::Requirement
103
+ requirements:
104
+ - - '>'
105
+ - !ruby/object:Gem::Version
106
+ version: 1.3.1
107
+ requirements: []
108
+ rubyforge_project: compass-placeholders
109
+ rubygems_version: 2.0.6
110
+ signing_key:
111
+ specification_version: 4
112
+ summary: '@extendable %placeholders for common CSS3 code.'
113
+ test_files:
114
+ - test/integration/css3/appearance.scss.test
115
+ - test/integration/css3/backface-visibility.scss
116
+ - test/integration/css3/background-clip.scss.test
117
+ - test/integration/css3/border-origin.scss.test
118
+ - test/integration/css3/border-radius.scss.test
119
+ - test/integration/css3/box-shadow.scss.test
120
+ - test/integration/css3/box-sizing.scss.test
121
+ - test/integration/css3/box.scss.test
122
+ - test/integration/css3/opacity.scss.test
123
+ - test/integration/css3/transform-style.scss.test
124
+ - test/integration/css3/user-select.scss.test
125
+ - test/integration/scss_test.rb
126
+ - test/integration/typography/base.scss.test
127
+ - test/integration/typography/hover-link.scss.test
128
+ - test/integration/typography/lists.scss.test
129
+ - test/integration/typography/text.scss.test
130
+ - test/integration/typography/unstyled-link.scss.test
131
+ - test/integration/utilities/clearfix.scss.test
132
+ - test/integration/utilities/cursor.scss.test
133
+ - test/integration/utilities/display.scss.test
134
+ - test/integration/utilities/resets.scss.test
135
+ - test/test_helper.rb