Tyfy provides basic styles for images and media embedded using the <iframe>
tag — such as YouTube videos. The styles address a few common layout situations. Percentage widths are used to make media responsive.
Image Lazy Loading
Tyfy includes JavaScript (dist/script/lazyimage.js) for the lazy loading of images. Lazy loading of images is triggered by the use of the data-lazyimage
attribute on the <img>
tag. The data-lazyimage
attribute defines the URI of the image to be loaded, and the src
attribute is used for a placeholder. The loading of the image is triggered when the <img>
appears in the viewport as determined by the Intersection Observer API.
Variables
- $tybreak-floats
40em !default;
- Screen width above which float styles are enabled.
- $tycolor-text-light
mix($tycolor-fg,$tycolor-bg,45%) !default;
- A light text color variant, used for captions.
Classes
- .tymedia
- Apply to the element containing a styled
<img>
or<iframe>
. - .tymedia-caption
- Apply to text serving as a caption inside the element with the
tymedia
class. - .tymedia-iframe
- Apply to the element containing an
<iframe>
element; this must be nested inside the element with thetymedia
class. - .float-left, .float-right
- Applied to the element with the
tymedia
class to float the element left or right. At screen widths below the value of$tyfy-break-floats
, the float styles are disabled.
Examples
Image, Full Width
<figure class="tymedia">
<img alt="Photo of a colorfully-painted building" src="resources/img/unsplash.jpg">
<figcaption class="tymedia-caption">Photo by Muhd Asyraaf on Unsplash</figcaption>
</figure>
Image, Float Left
<figure class="tymedia float-left">
<img alt="Photo of a colorfully-painted building" src="resources/img/unsplash.jpg">
<figcaption class="tymedia-caption">Photo by Muhd Asyraaf on Unsplash</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Faucibus in ornare quam viverra. Enim facilisis gravida neque convallis. Morbi tristique senectus et netus. A arcu cursus vitae congue. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Integer eget aliquet nibh praesent tristique magna. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Imperdiet sed euismod nisi porta lorem mollis aliquam. Ultrices vitae auctor eu augue ut lectus arcu bibendum.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Faucibus in ornare quam viverra. Enim facilisis gravida neque convallis. Morbi tristique senectus et netus. A arcu cursus vitae congue. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Integer eget aliquet nibh praesent tristique magna. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Imperdiet sed euismod nisi porta lorem mollis aliquam. Ultrices vitae auctor eu augue ut lectus arcu bibendum.
Lazy-Loaded Image, Float Right
<figure class="tymedia float-right">
<img alt="Photo of a colorfully-painted building" data-lazyimage="resources/img/unsplash.jpg" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' /%3E">
<figcaption class="tymedia-caption">Photo by Muhd Asyraaf on Unsplash</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Faucibus in ornare quam viverra. Enim facilisis gravida neque convallis. Morbi tristique senectus et netus. A arcu cursus vitae congue. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Integer eget aliquet nibh praesent tristique magna. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Imperdiet sed euismod nisi porta lorem mollis aliquam. Ultrices vitae auctor eu augue ut lectus arcu bibendum.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Faucibus in ornare quam viverra. Enim facilisis gravida neque convallis. Morbi tristique senectus et netus. A arcu cursus vitae congue. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Integer eget aliquet nibh praesent tristique magna. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Imperdiet sed euismod nisi porta lorem mollis aliquam. Ultrices vitae auctor eu augue ut lectus arcu bibendum.
Embedded Video, Full Width
<figure class="tymedia">
<div class="tymedia-iframe">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/BIhNsAtPbPI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<figcaption class="tymedia-caption">Trailer for the 25th James Bold film, <i>No Time to Die</i></figcaption>
</figure>
Embedded Video, Float Left
<figure class="tymedia float-left">
<div class="tymedia-iframe">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/BIhNsAtPbPI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<figcaption class="tymedia-caption">Trailer for the 25th James Bold film, <i>No Time to Die</i></figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Faucibus in ornare quam viverra. Enim facilisis gravida neque convallis. Morbi tristique senectus et netus. A arcu cursus vitae congue. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Integer eget aliquet nibh praesent tristique magna. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Imperdiet sed euismod nisi porta lorem mollis aliquam. Ultrices vitae auctor eu augue ut lectus arcu bibendum.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac ut. Faucibus in ornare quam viverra. Enim facilisis gravida neque convallis. Morbi tristique senectus et netus. A arcu cursus vitae congue. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Integer eget aliquet nibh praesent tristique magna. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Imperdiet sed euismod nisi porta lorem mollis aliquam. Ultrices vitae auctor eu augue ut lectus arcu bibendum.