119 lines
5.8 KiB
HTML
119 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<link rel="canonical" href="//dollarshaveclub.github.io/reframe.js">
|
|
<link href="favicon.ico" rel="icon" />
|
|
<link href="reframe.png" rel="apple-touch-icon" />
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:site" content="@DSCEngineering">
|
|
<meta name="twitter:url" property="og:url" content="https://dollarshaveclub.github.io/reframe.js">
|
|
<meta name="twitter:title" property="og:title" content="Reframe.js makes unresponsive elements responsive">
|
|
<meta name="twitter:description" property="og:description" content="Reframe.js is a javascript plugin that makes unresponsive elements responsive - by DSCEngineering">
|
|
<meta name="twitter:image" property="og:image" content="reframe.jpg">
|
|
<title>Reframe.js</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Anton|Pacifico" rel="stylesheet">
|
|
<link rel="stylesheet" media="all" href="main.css">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<article>
|
|
<header>
|
|
<h1>
|
|
<a href="https://github.com/dollarshaveclub/reframe.js">Reframe.js</a>
|
|
</h1>
|
|
<p><a href="https://github.com/dollarshaveclub/reframe.js">Reframe.js</a> is a javascript plugin that makes unresponsive elements responsive.</p>
|
|
</header>
|
|
<div class="center">
|
|
<a href="https://twitter.com/home?status=Reframe+unresponsive+elements+responsively.+%F0%9F%92%AAhttps%3A%2F%2Fgithub.com%2Fdollarshaveclub%2Freframe.js+%40DSCEngineering+%40yowainwright+%23JavaScript"><img alt="Share" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&maxAge=2592000" /></a>
|
|
<iframe id="ghbtns" style="position: relative; top: 6px" src="https://ghbtns.com/github-btn.html?user=dollarshaveclub&repo=reframe.js&type=star" frameborder="0" scrolling="0" width="60px" height="20px"></iframe>
|
|
</div>
|
|
<div>
|
|
<figure>
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/6FQsIfE7sZM" frameborder="0" allowfullscreen></iframe>
|
|
<figcaption>This is a video…<br /> that shows cute cats…<br />in a perfect ratio at any size…<br />because <a href="https://github.com/dollarshaveclub/reframe.js"><span class="reframe">Reframe.js</span></a> is awesome!</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="content">
|
|
<div>
|
|
<h2>Install</h2>
|
|
<pre><code>npm install reframe.js --save-dev</code></pre></pre>
|
|
<h3>Or</h3>
|
|
<pre><code>bower install reframe.js --save-dev</code></pre>
|
|
</div>
|
|
<div>
|
|
<h2>Setup</h2>
|
|
<ol>
|
|
<li>
|
|
Add <code>dist/reframe.js</code>.
|
|
</li>
|
|
<li>Add reframe <code>css/scss</code> to your css.</li>
|
|
<li>reframe the element you'd like to re-frame.</li>
|
|
</ol>
|
|
</div>
|
|
<div>
|
|
<pre><code>reframe('selector');</code></pre>
|
|
</div>
|
|
<div>
|
|
<h2>Examples</h2>
|
|
<h3>Basic</h3>
|
|
<pre><code>reframe('selector');</code></pre>
|
|
<h3>Or Multiples</h3>
|
|
<pre><code>reframe('selector'); // same function as before (so simple)</code></pre>
|
|
<h3>But not this one</h3>
|
|
<pre><code>reframe('selector:not([not this selector])');</code></pre>
|
|
</div>
|
|
<div>
|
|
<h2>How?</h2>
|
|
<p>
|
|
<span class="reframe">Reframe.js</span> removes a specified element's height & width attributes & then wraps that element in responsive div that is a perfect ratio of the original element's size. This plugin is meant for embedded content like <code>iframes</code> or <code>videos</code>.
|
|
</p>
|
|
<h2>Why?</h2>
|
|
<p>
|
|
<span class="reframe">Reframe.js</span> is inspired by <a href="http://fitvidsjs.com/">FitVids</a> & does what FitVids does but without the need for <code>jQuery</code>. This makes the plugin highly valuable when including it in a module that has to be very small & with minimal dependencies. Here's a basic <a href="http://codepen.io/yowainwright/pen/amzAEo">codepen example</a>.
|
|
</p>
|
|
<p>
|
|
This plugin is small - <code>~1.3kb</code> unminified & is meant to do 1 thing - wrap elements that aren't responsive & make them responsive. 💪
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h2>Options</h2>
|
|
<p>If you'd like to not use the classname 'js-reframe', just use your own.</p>
|
|
<pre><code>reframe('selector', 'classname');</code></pre>
|
|
</div>
|
|
<div>
|
|
<h2>jQuery</h2>
|
|
<p>You can use <span class="reframe">Reframe.js</span> with jQuery as well.</p>
|
|
<pre><code>$('selector').reframe();</code></pre>
|
|
<p>&, if you'd like to use a custom classname</p>
|
|
<pre><code>$('selector').reframe('classname');</code></pre>
|
|
</div>
|
|
<p class="center">
|
|
Made by <a href="https://github.com/dollarshaveclub">Dollar Shave Club Engineering</a>.
|
|
</p>
|
|
<p class="center">
|
|
<a href="https://github.com/dollarshaveclub/reframe.js"><span class="reframe">Reframe.js</span></a>
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
<script src="dist/reframe.js"></script>
|
|
<script>
|
|
reframe('iframe:not(#ghbtns)');
|
|
</script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-84214503-1', 'auto');
|
|
ga('send', 'pageview');
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|