We’re always looking for ways to show off our members’ incredible work here at PhotoShelter, and what better way to do that than feature gorgeous hero images on our home and marketing pages.

Our goal was to not only utilize beautiful images, but to make it really easy to change images and copy on the fly, while increasing performance and page speed to boot.

We’re really focused on building out new features using custom web components, specifically leveraging and iterating on the tools made available by the Polymer Project. As native browser support has grown we’ve only become more enthusiastic about the composability and reusability of well-built components. Building ourselves a solid foundation with components that have good tests, documentation, and demos is key. More of our process was outlined back in the fall by this post.

Our new tripod-hero-marquee component represents the first element in a new tripod-* component family, consisting of reusable UX/UI elements used to build the structure and layout of a webpage. By building the hero-marquee as a web component we add another reusable component to our tool kit for future projects, allowing us to build faster and reliably with components we know the ins and outs of.

We’re very excited to announce that the tripod-hero-marquee is being made open source today! The repo is available on available on GitHub, complete with documentation and demos.

Out with the old (left) and in with the new.

The tripod-hero-marquee went through a handful of revisions during development — a handful of us around the office still call it by its original name: the action-hero — but something that remained constant between iterations was the desire to maintain flexibility in all its forms and keep an eye on… the future!

It was important to us that the component was not only reusable for future development, but that each implementation be flexible in multiple ways: what content can be “passed into” the component — including what can be used as a background — how that content is styled, and where that content is positioned on top of the background.

The background of the hero can be anything; a solid color, an SVG, an image, or a video.

The component has two main properties that can be set to control the position of the content. The first, contentLayout, has a default of flexbox which in turn allows the second, contentPosition, to be set to one of nine anchor points, from top-left, center-center, to bottom-right and so on. The ability to move text around within the frame of the component allows us to use images with focal points anywhere in the frame, opening up the variety of images we can use dramatically compared to our old layout that only centered content.

Additionally, the component can be styled from the outside in — that is to say that the content passed in to the component, be they h1,h2,p,a or whatever, initially inherit their styles from the stylesheets defined for the whole page, but they also have the really cool ability to have their styles encapsulated within the component thanks to Shadow DOM.

The other option for contentLayout which we’re very excited about is grid, providing support for the CSS Grid Layout standard which is well and truly coming soon!

Content positioned by CSS grid. The heading, PhotoShelter logo, paragraph and CTA link are each positioned discreetly on a 3x3 grid.

Grid example code (header, paragraph and link styles omitted for brevity)

Through a pair of custom mixins in the component, --hero-content-grid-rows and --hero-content-grid-columns, which define the layout of the grid. With this option switched on, content can be laid out very discreetly and specifically within the hero, letting the implementer position content side by side, or in opposite corners. The possibilities are vast!

We’re not only using this component throughout our homepage and marketing site, but we kept the potential for open sourcing and implementation by our members in mind during development as well. Our use is right in line with how we envision our members being able to use tripod-hero-marquee on their sites — leveraging another component ( ps-image-impl ) to fetch an appropriately sized, preprocessed version of the image from our CDN.

We’re looking forward to seeing CSS Grid hit that green line on the horizon to begin to utilize the versatility it offers. In the mean time we’re really loving the new photography-focused look the module brings to our home page, and still working on more ways to celebrate great imagery and make the lives of our amazing members easier.

The PhotoShelter Engineering Team is excited to be part of the growing web component community and the opportunity to #useThePlatform that comes with it. If that sounds like the type of community you’d be excited to be a part of then great news: we’re hiring! We’d love to hear from you about joining our team. Click here to find out more.