<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/eduardoboucas/pen/eBbByj?limit=all&page=44&q=media" />
<script>
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = factory();
} else {
root.im = factory();
}
}(this, function () {
var element = document.body;
var autoUpdate = true;
var breakpoints = false;
function setElement(newElement) {
element = newElement;
}
function setUpdateMode(updateMode) {
if (updateMode == 'manual') {
autoUpdate = false;
readBreakpoints();
}
}
function readBreakpoints() {
if (window.getComputedStyle && (window.getComputedStyle(element, '::after').content !== '')) {
var data = window.getComputedStyle(element, '::after').content;
try {
breakpoints = JSON.parse(removeQuotes(data));
} catch (err) {}
} else {
breakpoints = false;
}
}
function isBreakpointActive(breakpoint) {
if (autoUpdate) {
readBreakpoints();
}
return breakpoints.hasOwnProperty(breakpoint) && breakpoints[breakpoint].active;
}
function isBreakpointNotActive(breakpoint) {
return !isBreakpointActive(breakpoint);
}
function getActiveBreakpoint() {
if (autoUpdate) {
readBreakpoints();
}
var largest = {name: false, value: 0};
for (var breakpoint in breakpoints) {
if (breakpoints.hasOwnProperty(breakpoint)) {
var breakpointValue = parseFloat(breakpoints[breakpoint].value);
if (breakpoints[breakpoint].active && (breakpointValue > largest.value)) {
largest = {name: breakpoint, value: breakpointValue};
}
}
}
return largest.name;
}
function getBreakpointValue(breakpoint, asNumber) {
if (autoUpdate) {
readBreakpoints();
}
if (!breakpoints || !breakpoints.hasOwnProperty(breakpoint)) {
return false;
}
return asNumber ? parseFloat(breakpoints[breakpoint].value) : breakpoints[breakpoint].value;
}
/**
*
* Function by Les James (@lesjames) taken from https://css-tricks.com/making-sass-talk-to-javascript-with-json/
*
**/
function removeQuotes(string) {
if (typeof string === 'string' || string instanceof String) {
string = string.replace(/[']/g, '"').replace(/\\|^[\s\S]{0,1}|[\s\S]$/g, '');
}
return string;
}
return {
setElement: setElement,
setUpdateMode: setUpdateMode,
greaterThan: isBreakpointActive,
lessThan: isBreakpointNotActive,
getActive: getActiveBreakpoint,
getValue: getBreakpointValue,
update: readBreakpoints
};
}));
</script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,700'>
<style class="cp-pen-styles">@media (min-width: 600px) {
body::after {
content: '{"medium":{"value": "600px", "active": true}, "large":{"value": "900px", "active": false}}';
display: block;
height: 0;
overflow: hidden;
width: 0;
}
}
@media (min-width: 900px) {
body::after {
content: '{"medium":{"value": "600px", "active": true}, "large":{"value": "900px", "active": true}}';
display: block;
height: 0;
overflow: hidden;
width: 0;
}
}
.col--1-2 {
width: 50%;
}
.col--2-2 {
width: 100%;
}
.col--1-3 {
width: 33.3333333333%;
}
.col--2-3 {
width: 66.6666666667%;
}
.col--3-3 {
width: 100%;
}
@media (min-width: 600px) {
.col--1-2\@medium {
width: 50%;
}
.col--2-2\@medium {
width: 100%;
}
.col--1-3\@medium {
width: 33.3333333333%;
}
.col--2-3\@medium {
width: 66.6666666667%;
}
.col--3-3\@medium {
width: 100%;
}
}
@media (min-width: 900px) {
.col--1-2\@large {
width: 50%;
}
.col--2-2\@large {
width: 100%;
}
.col--1-3\@large {
width: 33.3333333333%;
}
.col--2-3\@large {
width: 66.6666666667%;
}
.col--3-3\@large {
width: 100%;
}
}
.cols {
display: flex;
flex-wrap: wrap;
}
html {
padding: 30px;
}
.card {
padding: 20px;
}
.card__inner {
background-color: white;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
color: #888;
display: inline-block;
font-family: Roboto;
padding: 20px;
}
.card__title {
font-size: 1.4em;
font-weight: 300;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.card__copy {
font-weight: 300;
line-height: 1.4;
}
body {
background-color: #f0f0f0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
</style></head><body>
<!-- RELATED SCREENCAST: https://eduardoboucas.com/blog/2016/12/19/how-i-use-include-media.html -->
<section class="cols">
<article class="card col col--1-1 col--1-2@medium col--1-3@large">
<div class="card__inner">
<h3 class="card__title">Title</h3>
<p class="card__copy">It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us.</p>
</div>
</article>
<article class="card col col--1-1 col--1-2@medium col--1-3@large">
<div class="card__inner">
<h3 class="card__title">Title</h3>
<p class="card__copy">It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us.</p>
</div>
</article>
<article class="card col col--1-1 col--1-2@medium col--1-3@large">
<div class="card__inner">
<h3 class="card__title">Title</h3>
<p class="card__copy">It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us.</p>
</div>
</article>
<article class="card col col--1-1 col--1-2@medium">
<div class="card__inner">
<h3 class="card__title">Title</h3>
<p class="card__copy">It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us.</p>
</div>
</article>
<article class="card col col--1-1 col--1-2@medium">
<div class="card__inner">
<h3 class="card__title">Title</h3>
<p class="card__copy">It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us.</p>
</div>
</article>
</section>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdn.rawgit.com/eduardoboucas/include-media-export/master/dist/include-media-1.0.2.min.js'></script>
<script >window.addEventListener('scroll', function scrolling () {
if (im.greaterThan('medium')) {
console.log('Some operation!', new Date().getTime());
}
});
//# sourceURL=pen.js
</script>
</body></html>
