Created
May 4, 2016 04:17
-
-
Save dropddesigns/7fa38bb862331c658d40b2e986b6e6da to your computer and use it in GitHub Desktop.
Troubleshooting pixels vs. ems in https://github.com/eqcss/eqcss/issues/12
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en-AU"> | |
<head> | |
<meta charset="utf-8" /> | |
<style> | |
html { | |
box-sizing: border-box; | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
} | |
html, body { | |
margin: 0; | |
padding: 0; | |
} | |
.grid {} | |
@element '.grid' and (min-width: 600px) { | |
$this .grid__column { | |
border: #333 dotted 1px; | |
float: left; | |
width: 45%; | |
} | |
$this .grid__column--is-first { | |
margin-right: 5%; | |
} | |
$this .grid__column--is-last { | |
margin-left: 5%; | |
} | |
} | |
.flag {} | |
.flag__image > img { | |
height: auto; | |
max-width: 100%; | |
width: 100%; | |
} | |
.flag__body p { | |
margin-top: 0; | |
} | |
/* 370px - 23.125em */ | |
@element '.flag' and (min-width: 370px) { | |
$this .flag__image { | |
padding-right: 10px; | |
} | |
$this .flag__image, | |
$this .flag__body { | |
display: table-cell; | |
vertical-align: top; | |
} | |
$this[class$="--bottom"] .flag__image, | |
$this[class$="--bottom"] .flag__body { | |
vertical-align: bottom; | |
} | |
$this[class$="--middle"] .flag__image, | |
$this[class$="--middle"] .flag__body { | |
vertical-align: middle; | |
} | |
$this[class$="--top"] .flag__image, | |
$this[class$="--top"] .flag__body { | |
vertical-align: top; | |
} | |
$this[class$="--rev"] .flag__image { | |
padding-right: 0; | |
padding-left: 10px; | |
} | |
$this .flag__image > img { | |
display: inline; | |
max-width: none; | |
width: auto; | |
} | |
} | |
/* 500px - 31.25em */ | |
@element '.flag' and (min-width: 500px) { | |
$this { | |
display: table; | |
} | |
} | |
/* 800px - 50em */ | |
@element '.flag' and (min-width: 800px) { | |
$this .flag__image > img { | |
height: auto; | |
width: 100%; | |
} | |
} | |
/* 970px - 60.625em */ | |
@element '.flag' and (min-width: 970px) { | |
$this .flag__image > img { | |
height: 86px; | |
width: 110px; | |
} | |
} | |
clearfix:after { | |
clear: both; | |
content: ""; | |
display: table; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="flag"> | |
<div class="flag__image"> | |
<img alt="A black rectangle placeholder" height="180" src="https://placeholdit.imgix.net/~text?txtsize=23&bg=000000&txtclr=ffffff&w=230&h=180" width="230" /> | |
</div> | |
<div class="flag__body"> | |
<p><strong>The flag object</strong></p> | |
<p>The flag object shares a lot of common traits with the media object; its sole purpose is displaying image- and text-like content side-by-side. Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.</p> | |
</div> | |
</div> | |
<div class="grid clearfix"> | |
<div class="grid__column grid__column--is-first"> | |
<div class="flag"> | |
<div class="flag__image"> | |
<img alt="A red rectangle placeholder" height="180" src="https://placeholdit.imgix.net/~text?txtsize=23&bg=ff0000&txtclr=ffffff&w=230&h=180" width="230" /> | |
</div> | |
<div class="flag__body"> | |
<p><strong>The flag object</strong></p> | |
<p>The flag object shares a lot of common traits with the media object; its sole purpose is displaying image- and text-like content side-by-side. Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.</p> | |
</div> | |
</div> | |
</div> | |
<div class="grid__column grid__column--is-last"> | |
<div class="flag"> | |
<div class="flag__image"> | |
<img alt="An pink rectangle placeholder" height="180" src="https://placeholdit.imgix.net/~text?txtsize=23&bg=ffaaee&txtclr=ffffff&w=230&h=180" width="230" /> | |
</div> | |
<div class="flag__body"> | |
<p><strong>The flag object</strong></p> | |
<p>The flag object shares a lot of common traits with the media object; its sole purpose is displaying image- and text-like content side-by-side. Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script src="http://elementqueries.com/EQCSS.js"></script> | |
<script src="http://staticresource.com/eqcss-demo.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment