corysimmons/intrinsic

A simple mixin for easy intrinsic ratios.

@include intrinsic(16/9);

A simple mixin for easy intrinsic ratios.

Why?

Intrinsic ratios are pretty sweet for making certain content responsive. They're also pretty sweet for helping to mitigate page reflow (something visitors really hate).

A lot of people use stuff like FitVids.js to help make YouTube videos and such responsive, but it seems pretty heavy-handed to use a JS lib for a simple CSS technique. It also obfuscates what's going on and people tend to just throw it in their stack whenever they are embedding a YouTube video.

This approach combines Dave Rupert's (FitVids' author) mixin approach with Matthijs Kuiper's &::before approach and sprinkles in the ability to feed it your own ratios for various content and background-color while said content is loading.

When should I use this?

Use it on embedded videos, maps, and pretty much anywhere you have an element with a standardized size (thumbnails, hero images, etc.) to help prevent page reflow.

Installation

• bower install intrinsic
• @import 'bower_components/intrinsic/intrinsic';

Usage

CodePen Demo
Be sure to throttle your connection ("Regular 2G" is good) to see how how it looks in low-bandwidth settings.

.youtube {
  @include intrinsic(); // defaults to 16/9
}

.bg-cover {
  @include intrinsic(2/1);
  
  background: lighten(dodgerblue, 25%) url(https://www.fillmurray.com/1600/900) center no-repeat;
  background-size: cover;
}

<div class="youtube">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/JhHMJCUmq28" frameborder="0" allowfullscreen></iframe>
</div>

<div class="bg-cover"></div>

Options

• $ratio - The width/height ratio (preferably without units, see below). Defaults to 16/9.
• $bg - The background color. Defaults to darken(white, 5%). You need to manually add this to your background property if you use the background cover technique (see the example code).

Note: You can use fixed numbers but they'll get stripped. intrinsic(1600px/900px) turns into 1600/900. This is because we can't divide numbers with units (not even with calc).

intrinsic's Issues

Todo

• Add Stylus and LESS versions as people ask for them.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.