apropos 0.1.4 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: ad98be4a87f9fb9605a909f04e23568f1b145c46
4
- data.tar.gz: 924c293bb77515903932e9d113de7a32a2de367e
3
+ metadata.gz: c9d946fa9c1e5fa2a46b04f761c2d768b826c42d
4
+ data.tar.gz: c04def469b9d6331d6f7181562e444708a9809e7
5
5
  SHA512:
6
- metadata.gz: c22b53d22e056c57a2fcd326f2df8e4d41a6bc1795f598050683bcef5e44258df65bfbd45605fc093ec5ddfe36d50e63c16713911dc5c121235c5697e6c9fd51
7
- data.tar.gz: 74621277cb2190c35a8f575a6725db5a9e6b405f4faf848092c1176c59983a58a4d6881aea326e0524b4fe785645736b20658c0629a0857fdfde38feb45df38c
6
+ metadata.gz: 9d526d44f674d8856e6a72fcb9d77bb67da692ea6d2953bb34b989e50a8a8373ebdffa3366ef9c9ccf62313765209bc608c348333b8f72aad91276086b4ea33b
7
+ data.tar.gz: 7756f08307296dbd1130f9737346846d9e18d734d538944f3e25f9443644ba0d6afa33565bfb2088302bc8c6b7438358a190de54cce3f30a2e96b649497c9770
@@ -1,7 +1,8 @@
1
1
  language: ruby
2
2
  rvm:
3
+ - 2.2.2
4
+ - 2.1.5
3
5
  - 2.0.0
4
- - 2.1.2
5
6
  - 1.9.3
6
7
  - jruby-19mode
7
8
  - rbx-2
@@ -1,5 +1,10 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.2.0 (2015-10-06)
4
+
5
+ - Add "hidpi only" mode to default to 2x images, scaled appropriately.
6
+ - Bug fix where class variant did not support generating height value
7
+
3
8
  ## 0.1.4 (2015-03-27)
4
9
 
5
10
  Bug fix where extension variants would match substrings (e.g. "extra-small"
data/README.md CHANGED
@@ -24,6 +24,15 @@ Or install it yourself as:
24
24
 
25
25
  Apropos depends on [Compass](http://compass-style.org/), so make sure you have that installed and configured in your project.
26
26
 
27
+ ## Why use Apropos?
28
+
29
+ There are many tools and techniques for using responsive images. What makes Apropos different? A few key principles:
30
+
31
+ - Let the browser do what it does best. CSS rules are more efficient and reliable than a solution that relies on Javascript or setting cookies for each visitor.
32
+ - Avoid duplicate downloads. Almost all Javascript solutions, including polyfills for things like `srcset`, require unnecessary extra downloads, which CSS classes and media queries avoid.
33
+ - No server logic should be required. Rather than setting a cookie and serving up different assets based on the cookie, we should be able to push compiled CSS and images to a CDN and rely on the browser to request the right images.
34
+ - Take advantage of the "metadata" encoded in file names. We need to create separate assets for high-dpi devices, breakpoints, locales, etc anyway. We can lean on the filesystem with a simple naming convention rather than hand-coding a bunch of CSS.
35
+
27
36
  ### Sample configuration
28
37
 
29
38
  It's easy to get up and running with Apropos' basic configuration. Here's a sample stylesheet:
@@ -74,14 +83,14 @@ $apropos-hidpi-query: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192
74
83
 
75
84
  If you want to do more advanced configuration like adding variants for localization, you can [customize Apropos in Ruby](doc-src/customization.md).
76
85
 
77
- ## Why use Apropos?
86
+ ### Hidpi Only mode
78
87
 
79
- There are many tools and techniques for using responsive images. What makes Apropos different? A few key principles:
88
+ For some projects, it makes sense to only use high dpi images. If most of your visitors use high dpi devices, you can use fewer images and omit 1x assets. In fact, even for 1x devices you may be able to use higher compression rates on 2x assets that are scaled down. This also means your generated CSS only needs roughly half as many media queries. You can switch Apropos into "high dpi only" mode, where it will generate CSS definitions with halved heights and not output high dpi media queries, with the following config line:
80
89
 
81
- - Let the browser do what it does best. CSS rules are more efficient and reliable than a solution that relies on Javascript or setting cookies for each visitor.
82
- - Avoid duplicate downloads. Almost all Javascript solutions, including polyfills for things like `srcset`, require unnecessary extra downloads, which CSS classes and media queries avoid.
83
- - No server logic should be required. Rather than setting a cookie and serving up different assets based on the cookie, we should be able to push compiled CSS and images to a CDN and rely on the browser to request the right images.
84
- - Take advantage of the "metadata" encoded in file names. We need to create separate assets for high-dpi devices, breakpoints, locales, etc anyway. We can lean on the filesystem with a simple naming convention rather than hand-coding a bunch of CSS.
90
+ ```ruby
91
+ # Place this in a Ruby configuration file, e.g. Compass config or Rails initializer
92
+ Apropos.hidpi_only = true
93
+ ```
85
94
 
86
95
  ## Contributing
87
96
 
data/Rakefile CHANGED
@@ -11,6 +11,7 @@ begin
11
11
  desc "Run cane to check quality metrics"
12
12
  Cane::RakeTask.new(:quality) do |cane|
13
13
  cane.abc_max = 12
14
+ cane.style_measure = 82
14
15
  cane.style_glob = 'lib/**/*.rb'
15
16
  end
16
17
 
@@ -4,6 +4,12 @@
4
4
  #
5
5
  # It also provides convenience functions used by the Sass functions.
6
6
  module Apropos
7
+ HIDPI_VARIANT_WARNING = 'DPI variant images detected in hidpi-only mode!'.freeze
8
+
9
+ class << self
10
+ attr_accessor :hidpi_only
11
+ end
12
+
7
13
  module_function
8
14
 
9
15
  def image_set(path)
@@ -16,6 +22,7 @@ module Apropos
16
22
 
17
23
  def add_dpi_image_variant(id, query, order=0)
18
24
  ExtensionParser.add_parser(id) do |match|
25
+ Sass.logger.warn(HIDPI_VARIANT_WARNING) if hidpi_only
19
26
  MediaQuery.new(query, order)
20
27
  end
21
28
  end
@@ -13,6 +13,8 @@ module Apropos
13
13
 
14
14
  def self.included(mod)
15
15
  ::Sass::Script::Functions.declare :image_variants, []
16
+ ::Sass::Script::Functions.declare :apropos_image_width, [:string]
17
+ ::Sass::Script::Functions.declare :apropos_image_height, [:string]
16
18
  ::Sass::Script::Functions.declare :add_dpi_image_variant, []
17
19
  ::Sass::Script::Functions.declare :add_breakpoint_image_variant, []
18
20
  ::Sass::Script::Functions.declare :nth_polyfill, [:list, :index]
@@ -29,12 +31,40 @@ module Apropos
29
31
  set.invalid_variants.each do |variant|
30
32
  message = "Ignoring unknown extensions " +
31
33
  "'#{variant.invalid_codes.join("', '")}' (#{variant.path})"
32
- Sass.logger.info message
34
+ ::Sass.logger.info message
33
35
  $stderr.puts message
34
36
  end
35
37
  ::Apropos.convert_to_sass_value(set.valid_variant_rules)
36
38
  end
37
39
 
40
+ def apropos_image_width(path)
41
+ assert_type path, :String
42
+ width = image_width(path)
43
+ if ::Apropos.hidpi_only
44
+ ::Sass::Script::Number.new(
45
+ (width.value / 2).floor,
46
+ width.numerator_units,
47
+ width.denominator_units
48
+ )
49
+ else
50
+ width
51
+ end
52
+ end
53
+
54
+ def apropos_image_height(path)
55
+ assert_type path, :String
56
+ height = image_height(path)
57
+ if ::Apropos.hidpi_only
58
+ ::Sass::Script::Number.new(
59
+ (height.value / 2).floor,
60
+ height.numerator_units,
61
+ height.denominator_units
62
+ )
63
+ else
64
+ height
65
+ end
66
+ end
67
+
38
68
  def add_dpi_image_variant(id, query, sort=0)
39
69
  sort = ::Apropos::SassFunctions.value(sort)
40
70
  ::Apropos.add_dpi_image_variant(id.value, query.value, sort)
@@ -1,3 +1,3 @@
1
1
  module Apropos
2
- VERSION = "0.1.4"
2
+ VERSION = "0.2.0"
3
3
  end
@@ -50,6 +50,17 @@ describe 'stylesheets' do
50
50
  }
51
51
  css_file.strip.should == ".foo { background-image: url('/kitten.jpg'); height: 286px; }"
52
52
  end
53
+
54
+ it "class variants can generate heights" do
55
+ Apropos.add_class_image_variant('variant', %w(variant))
56
+ @scss_file = %Q{
57
+ @import "apropos";
58
+ .foo {
59
+ @include apropos-bg-variants('kitten.jpg', true);
60
+ }
61
+ }
62
+ css_file.strip.should include(".variant .foo { background-image: url('/kitten.variant.jpg'); height: 386px; }")
63
+ end
53
64
  end
54
65
 
55
66
  describe "hidpi stylesheet" do
@@ -169,4 +180,76 @@ describe 'stylesheets' do
169
180
  log.should include("unknown extensions 'bar'")
170
181
  end
171
182
  end
183
+
184
+ context "hidpi-only mode" do
185
+ let(:images_path) { File.expand_path('fixtures/images', File.dirname(__FILE__)) }
186
+
187
+ before do
188
+ Apropos.hidpi_only = true
189
+ Compass.configuration.stub(:images_path) { images_path }
190
+ end
191
+
192
+ after do
193
+ Apropos.hidpi_only = false
194
+ end
195
+
196
+ it "generates halved widths" do
197
+ @scss_file = %Q{
198
+ @import "apropos/core";
199
+ .foo {
200
+ width: apropos-image-width('kitten.jpg');
201
+ }
202
+ }
203
+ css_file.strip.should == ".foo { width: 100px; }"
204
+ end
205
+
206
+ it "generates halved heights" do
207
+ @scss_file = %Q{
208
+ @import "apropos/core";
209
+ .foo {
210
+ @include apropos-bg-variants('kitten.jpg', true);
211
+ }
212
+ }
213
+ css_file.strip.should == ".foo { background-image: url('/kitten.jpg'); height: 143px; }"
214
+ end
215
+
216
+ context "with dpi variant images" do
217
+ let(:log) { '' }
218
+ let(:images_path) { images_dir }
219
+
220
+ before do
221
+ Sass.logger.stub(:warn) do |message|
222
+ log << message << "\n"
223
+ end
224
+ end
225
+
226
+ it "outputs a warning" do
227
+ stub_files(%w[hero.jpg hero.2x.jpg])
228
+ @scss_file = %Q{
229
+ @import "apropos";
230
+ .foo {
231
+ @include apropos-bg-variants('hero.jpg');
232
+ }
233
+ }
234
+ css_file
235
+ log.should include("DPI variant images detected in hidpi-only mode!")
236
+ end
237
+ end
238
+
239
+ context "with breakpoints" do
240
+ it "generates media queries and halved heights" do
241
+ @scss_file = %Q{
242
+ $apropos-breakpoints: (medium, 768px), (large, 1024px);
243
+ @import "apropos/core";
244
+ @import "apropos/breakpoints";
245
+ .foo {
246
+ @include apropos-bg-variants('cat.jpg', true);
247
+ }
248
+ }
249
+ css_file.should include(".foo { background-image: url('/cat.jpg'); height: 150px; }")
250
+ css_file.should include("@media (min-width: 768px) { .foo { background-image: url('/cat.medium.jpg'); height: 225px; } }")
251
+ css_file.should include("@media (min-width: 1024px) { .foo { background-image: url('/cat.large.jpg'); height: 300px; } }")
252
+ end
253
+ end
254
+ end
172
255
  end
@@ -22,7 +22,7 @@
22
22
  +apropos-bg-image-with-height($_path, $generate-height, $_query)
23
23
  @else if $_type == class
24
24
  #{nest($_class, "&")}
25
- background-image: image-url($_path)
25
+ +apropos-bg-image-with-height($_path, $generate-height)
26
26
 
27
27
  // apropos-bg-image-with-height generates a background-image property and
28
28
  // optionally generates a height property calculated from the image, if the
@@ -37,4 +37,4 @@
37
37
  =apropos-bg-image-with-height($path, $generate-height, $query: "")
38
38
  background-image: image-url($path)
39
39
  @if $generate-height and not (str-contains($query, "dpi") or str-contains($query, "pixel-ratio"))
40
- height: image-height($path)
40
+ height: apropos-image-height($path)
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: apropos
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.4
4
+ version: 0.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Gabriel Gilder
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2015-03-27 00:00:00.000000000 Z
11
+ date: 2015-10-06 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: compass
@@ -130,7 +130,11 @@ files:
130
130
  - spec/apropos/media_query_spec.rb
131
131
  - spec/apropos/set_spec.rb
132
132
  - spec/apropos/variant_spec.rb
133
+ - spec/fixtures/images/cat.jpg
134
+ - spec/fixtures/images/cat.large.jpg
135
+ - spec/fixtures/images/cat.medium.jpg
133
136
  - spec/fixtures/images/kitten.jpg
137
+ - spec/fixtures/images/kitten.variant.jpg
134
138
  - spec/spec_helper.rb
135
139
  - spec/stylesheets_spec.rb
136
140
  - stylesheets/_apropos.sass
@@ -157,7 +161,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
157
161
  version: '0'
158
162
  requirements: []
159
163
  rubyforge_project:
160
- rubygems_version: 2.2.2
164
+ rubygems_version: 2.4.8
161
165
  signing_key:
162
166
  specification_version: 4
163
167
  summary: Apropos helps your site serve up the appropriate image for every visitor.
@@ -168,6 +172,10 @@ test_files:
168
172
  - spec/apropos/media_query_spec.rb
169
173
  - spec/apropos/set_spec.rb
170
174
  - spec/apropos/variant_spec.rb
175
+ - spec/fixtures/images/cat.jpg
176
+ - spec/fixtures/images/cat.large.jpg
177
+ - spec/fixtures/images/cat.medium.jpg
171
178
  - spec/fixtures/images/kitten.jpg
179
+ - spec/fixtures/images/kitten.variant.jpg
172
180
  - spec/spec_helper.rb
173
181
  - spec/stylesheets_spec.rb