apropos 0.1.4 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ad98be4a87f9fb9605a909f04e23568f1b145c46
-  data.tar.gz: 924c293bb77515903932e9d113de7a32a2de367e
+  metadata.gz: c9d946fa9c1e5fa2a46b04f761c2d768b826c42d
+  data.tar.gz: c04def469b9d6331d6f7181562e444708a9809e7
 SHA512:
-  metadata.gz: c22b53d22e056c57a2fcd326f2df8e4d41a6bc1795f598050683bcef5e44258df65bfbd45605fc093ec5ddfe36d50e63c16713911dc5c121235c5697e6c9fd51
-  data.tar.gz: 74621277cb2190c35a8f575a6725db5a9e6b405f4faf848092c1176c59983a58a4d6881aea326e0524b4fe785645736b20658c0629a0857fdfde38feb45df38c
+  metadata.gz: 9d526d44f674d8856e6a72fcb9d77bb67da692ea6d2953bb34b989e50a8a8373ebdffa3366ef9c9ccf62313765209bc608c348333b8f72aad91276086b4ea33b
+  data.tar.gz: 7756f08307296dbd1130f9737346846d9e18d734d538944f3e25f9443644ba0d6afa33565bfb2088302bc8c6b7438358a190de54cce3f30a2e96b649497c9770

data/.travis.yml

@@ -1,7 +1,8 @@
 language: ruby
 rvm:
+  - 2.2.2
+  - 2.1.5
   - 2.0.0
-  - 2.1.2
   - 1.9.3
   - jruby-19mode
   - rbx-2

data/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.2.0 (2015-10-06)
+
+- Add "hidpi only" mode to default to 2x images, scaled appropriately.
+- Bug fix where class variant did not support generating height value
+
 ## 0.1.4 (2015-03-27)
 
 Bug fix where extension variants would match substrings (e.g. "extra-small"

data/README.md

@@ -24,6 +24,15 @@ Or install it yourself as:
 
 Apropos depends on [Compass](http://compass-style.org/), so make sure you have that installed and configured in your project.
 
+## Why use Apropos?
+
+There are many tools and techniques for using responsive images. What makes Apropos different? A few key principles:
+
+- 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.
+- Avoid duplicate downloads. Almost all Javascript solutions, including polyfills for things like `srcset`, require unnecessary extra downloads, which CSS classes and media queries avoid.
+- 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.
+- 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.
+
 ### Sample configuration
 
 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
 
 If you want to do more advanced configuration like adding variants for localization, you can [customize Apropos in Ruby](doc-src/customization.md).
 
-## Why use Apropos?
+### Hidpi Only mode
 
-There are many tools and techniques for using responsive images. What makes Apropos different? A few key principles:
+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:
 
-- 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.
-- Avoid duplicate downloads. Almost all Javascript solutions, including polyfills for things like `srcset`, require unnecessary extra downloads, which CSS classes and media queries avoid.
-- 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.
-- 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.
+```ruby
+# Place this in a Ruby configuration file, e.g. Compass config or Rails initializer
+Apropos.hidpi_only = true
+```
 
 ## Contributing
 

data/Rakefile

@@ -11,6 +11,7 @@ begin
   desc "Run cane to check quality metrics"
   Cane::RakeTask.new(:quality) do |cane|
     cane.abc_max = 12
+    cane.style_measure = 82
     cane.style_glob = 'lib/**/*.rb'
   end
 

data/lib/apropos/functions.rb

@@ -4,6 +4,12 @@
 #
 # It also provides convenience functions used by the Sass functions.
 module Apropos
+  HIDPI_VARIANT_WARNING = 'DPI variant images detected in hidpi-only mode!'.freeze
+
+  class << self
+    attr_accessor :hidpi_only
+  end
+
   module_function
 
   def image_set(path)
@@ -16,6 +22,7 @@ module Apropos
 
   def add_dpi_image_variant(id, query, order=0)
     ExtensionParser.add_parser(id) do |match|
+      Sass.logger.warn(HIDPI_VARIANT_WARNING) if hidpi_only
       MediaQuery.new(query, order)
     end
   end

data/lib/apropos/sass_functions.rb

@@ -13,6 +13,8 @@ module Apropos
 
     def self.included(mod)
       ::Sass::Script::Functions.declare :image_variants, []
+      ::Sass::Script::Functions.declare :apropos_image_width, [:string]
+      ::Sass::Script::Functions.declare :apropos_image_height, [:string]
       ::Sass::Script::Functions.declare :add_dpi_image_variant, []
       ::Sass::Script::Functions.declare :add_breakpoint_image_variant, []
       ::Sass::Script::Functions.declare :nth_polyfill, [:list, :index]
@@ -29,12 +31,40 @@ module Apropos
       set.invalid_variants.each do |variant|
         message = "Ignoring unknown extensions " +
           "'#{variant.invalid_codes.join("', '")}' (#{variant.path})"
-        Sass.logger.info message
+        ::Sass.logger.info message
         $stderr.puts message
       end
       ::Apropos.convert_to_sass_value(set.valid_variant_rules)
     end
 
+    def apropos_image_width(path)
+      assert_type path, :String
+      width = image_width(path)
+      if ::Apropos.hidpi_only
+        ::Sass::Script::Number.new(
+          (width.value / 2).floor,
+          width.numerator_units,
+          width.denominator_units
+        )
+      else
+        width
+      end
+    end
+
+    def apropos_image_height(path)
+      assert_type path, :String
+      height = image_height(path)
+      if ::Apropos.hidpi_only
+        ::Sass::Script::Number.new(
+          (height.value / 2).floor,
+          height.numerator_units,
+          height.denominator_units
+        )
+      else
+        height
+      end
+    end
+
     def add_dpi_image_variant(id, query, sort=0)
       sort = ::Apropos::SassFunctions.value(sort)
       ::Apropos.add_dpi_image_variant(id.value, query.value, sort)

data/lib/apropos/version.rb

@@ -1,3 +1,3 @@
 module Apropos
-  VERSION = "0.1.4"
+  VERSION = "0.2.0"
 end

data/spec/stylesheets_spec.rb

@@ -50,6 +50,17 @@ describe 'stylesheets' do
       }
       css_file.strip.should == ".foo { background-image: url('/kitten.jpg'); height: 286px; }"
     end
+
+    it "class variants can generate heights" do
+      Apropos.add_class_image_variant('variant', %w(variant))
+      @scss_file = %Q{
+        @import "apropos";
+        .foo {
+          @include apropos-bg-variants('kitten.jpg', true);
+        }
+      }
+      css_file.strip.should include(".variant .foo { background-image: url('/kitten.variant.jpg'); height: 386px; }")
+    end
   end
 
   describe "hidpi stylesheet" do
@@ -169,4 +180,76 @@ describe 'stylesheets' do
       log.should include("unknown extensions 'bar'")
     end
   end
+
+  context "hidpi-only mode" do
+    let(:images_path) { File.expand_path('fixtures/images', File.dirname(__FILE__)) }
+
+    before do
+      Apropos.hidpi_only = true
+      Compass.configuration.stub(:images_path) { images_path }
+    end
+
+    after do
+      Apropos.hidpi_only = false
+    end
+
+    it "generates halved widths" do
+      @scss_file = %Q{
+        @import "apropos/core";
+        .foo {
+          width: apropos-image-width('kitten.jpg');
+        }
+      }
+      css_file.strip.should == ".foo { width: 100px; }"
+    end
+
+    it "generates halved heights" do
+      @scss_file = %Q{
+        @import "apropos/core";
+        .foo {
+          @include apropos-bg-variants('kitten.jpg', true);
+        }
+      }
+      css_file.strip.should == ".foo { background-image: url('/kitten.jpg'); height: 143px; }"
+    end
+
+    context "with dpi variant images" do
+      let(:log) { '' }
+      let(:images_path) { images_dir }
+
+      before do
+        Sass.logger.stub(:warn) do |message|
+          log << message << "\n"
+        end
+      end
+
+      it "outputs a warning" do
+        stub_files(%w[hero.jpg hero.2x.jpg])
+        @scss_file = %Q{
+          @import "apropos";
+          .foo {
+            @include apropos-bg-variants('hero.jpg');
+          }
+        }
+        css_file
+        log.should include("DPI variant images detected in hidpi-only mode!")
+      end
+    end
+
+    context "with breakpoints" do
+      it "generates media queries and halved heights" do
+        @scss_file = %Q{
+        $apropos-breakpoints: (medium, 768px), (large, 1024px);
+        @import "apropos/core";
+        @import "apropos/breakpoints";
+        .foo {
+          @include apropos-bg-variants('cat.jpg', true);
+        }
+        }
+        css_file.should include(".foo { background-image: url('/cat.jpg'); height: 150px; }")
+        css_file.should include("@media (min-width: 768px) { .foo { background-image: url('/cat.medium.jpg'); height: 225px; } }")
+        css_file.should include("@media (min-width: 1024px) { .foo { background-image: url('/cat.large.jpg'); height: 300px; } }")
+      end
+    end
+  end
 end

data/stylesheets/apropos/_core.sass

@@ -22,7 +22,7 @@
         +apropos-bg-image-with-height($_path, $generate-height, $_query)
     @else if $_type == class
       #{nest($_class, "&")}
-        background-image: image-url($_path)
+        +apropos-bg-image-with-height($_path, $generate-height)
 
 // apropos-bg-image-with-height generates a background-image property and
 // optionally generates a height property calculated from the image, if the
@@ -37,4 +37,4 @@
 =apropos-bg-image-with-height($path, $generate-height, $query: "")
   background-image: image-url($path)
   @if $generate-height and not (str-contains($query, "dpi") or str-contains($query, "pixel-ratio"))
-    height: image-height($path)
+    height: apropos-image-height($path)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: apropos
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.2.0
 platform: ruby
 authors:
 - Gabriel Gilder
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-27 00:00:00.000000000 Z
+date: 2015-10-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
@@ -130,7 +130,11 @@ files:
 - spec/apropos/media_query_spec.rb
 - spec/apropos/set_spec.rb
 - spec/apropos/variant_spec.rb
+- spec/fixtures/images/cat.jpg
+- spec/fixtures/images/cat.large.jpg
+- spec/fixtures/images/cat.medium.jpg
 - spec/fixtures/images/kitten.jpg
+- spec/fixtures/images/kitten.variant.jpg
 - spec/spec_helper.rb
 - spec/stylesheets_spec.rb
 - stylesheets/_apropos.sass
@@ -157,7 +161,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.2
+rubygems_version: 2.4.8
 signing_key: 
 specification_version: 4
 summary: Apropos helps your site serve up the appropriate image for every visitor.
@@ -168,6 +172,10 @@ test_files:
 - spec/apropos/media_query_spec.rb
 - spec/apropos/set_spec.rb
 - spec/apropos/variant_spec.rb
+- spec/fixtures/images/cat.jpg
+- spec/fixtures/images/cat.large.jpg
+- spec/fixtures/images/cat.medium.jpg
 - spec/fixtures/images/kitten.jpg
+- spec/fixtures/images/kitten.variant.jpg
 - spec/spec_helper.rb
 - spec/stylesheets_spec.rb