Picture

The Picture stack is the most powerful adn flexible image stack out there. This example that supplies an image for every possible type of device. This example is for an image that is to be displayed at full width on the site. It has the following sizes.

  • Small - 640px
  • Small Retina - 1280px
  • Medium - 1024px
  • Medium Retina - 2048px
  • Large - 1200px
  • Large Retina - 2400px

1200px is used for the Large becuase that is the max site width defined inside Site Styles. All Retina images are double the size. While the retina image are optional to add, they really make a difference when viewed on a retina device.

More Features

  • Customize images for Dark Mode
  • Lazy load images for faster page load speeds
  • Warehouse your images and have full control over their paths and names
  • Protect your images from being easily copied via right click or drag and drop
  • When warehousing, you get full supoport for all of the latest image formats such as svg, webp, gif and mp4 (modern alternative to gif)

SVG

Scalable Vector Graphics (svg) can be easily added to your site with the SVG stack. It has basic controls to help you cusotmize the fill and stroke colors of the contained SVG. It also allows you to easily cusotmize your SVG with swatches.

mario-mushroom
puzzle-toy
arcade
pacman
biology
love-heart-pin
drone-2

Audio

The Audio stack allows you to easily add audio to your webpages. You can play all web firiendly audio formats. It even has full support for .vtt caption files for full accessibility.

The stack leverages the native players in each browser for a smaller footprint on your webpage.

Video

The Video stack allows you to easily add videos to your webpages. You can play all web firiendly video formats. It even has full support for .vtt caption files for full accessibility.

The stack leverages the native players in each browser for a smaller footprint on your webpage.

Embed

The embed stack is a generic wrapper stack that should automatically make most embed codes responsive that you get from other websites. The below embed is simply the embed snippet that you get from YouTube. You can paste in the embed code from your service into the stack.

Progress Bar

Show your progress. A simple way to add static progress bars to your layouts.

25%

Almost There (90%)

Video Tutorials

Below are video tutorials that are relevant to the stacks used on this page.

Loading...