Styleguide

Images

So you have some @2x images that you only want to show on retina devices, eh?

Just tag the image element with 'data-ui-component=retina-image' and a tiny JS component will automatically reference the '@2x' version of your image if the device supports it. You don't have to initialize this component. It's used too many places to require initialization on each page.

Do keep in mind that this component currently assumes the following:

  1. You are working with a `.png`
  2. The @2x version is stored in the same folder as the primary version.

as seen in employers/static/index.html.haml

Img Tags

%img.xs-mb1{"data-hidpi-src" => "/assets/employers/static/index/why-one@2x-51cfe9c9824d95a0a08a8d9f5d33fddeff79f7da5fad1c4bd66f1fb5f34e3814.png", "data-ui-component" => "retina-image", src: "/assets/employers/static/index/why-one-170d93d054b42d350862c5972a9d44a87a3b66fca888c94bf8e03a556ef0ae6e.png"}/

<img class="xs-mb1" data-ui-component="retina-image" data-hidpi-src="/assets/employers/static/index/why-one@2x-51cfe9c9824d95a0a08a8d9f5d33fddeff79f7da5fad1c4bd66f1fb5f34e3814.png" src="/assets/employers/static/index/why-one-170d93d054b42d350862c5972a9d44a87a3b66fca888c94bf8e03a556ef0ae6e.png" />

Background Images

:css
  .demo-hero {
    height: 200px;
    width: 100%;
    background-image: url("../../../assets/employers/static/index/why-one.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain; }
    .hidpi .demo-hero {
      background-image: url("../../../assets/employers/static/index/why-one@2x.png"); }
.demo-hero

<style>
  .demo-hero {
    height: 200px;
    width: 100%;
    background-image: url("../../../assets/employers/static/index/why-one.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain; }
    .hidpi .demo-hero {
      background-image: url("../../../assets/employers/static/index/why-one@2x.png"); }
</style>
<div class='demo-hero'></div>
.demo-hero {
  background: {
    image: image-url('backgrounds/cool-thing.png');
    position: top center;
    repeat: no-repeat;
    size: contain;
  }

  .hidpi & {
    background: {
      image: image-url('backgrounds_2x/cool-thing.png');
    }
  }
}