CSS fun on Harte Research Institute
Towards the end of 2016, Amazee Labs Austin launched a new site for The Harte Research Institute for Gulf of Mexico Studies (HRI), dedicated to advancing the long-term sustainable use and conservation of the Gulf of Mexico.
However, Drupal 8 is not the only reason why this project was so fun to work on, we also got to put a few relatively unusual CSS properties and values to work.
Border-image & background-attachment
The design for the front page included a wave that echoes a real sculpture HRI has on their Corpus Christi campus. We implemented it with border-image. As its name suggests, it allows for an image (or a gradient) to be used as a border. In this case we used a partially transparent png repeated horizontally as border-top for the section below the image, and moved that whole section up with some negative top margin.
If you check HRI's site using a device with a big screen you’ll also notice that the image stays put, using what’s popularly known as parallax scrolling effect. That can be done with background-attachment: fixed. We decided to reserve it for big screens because most mobile devices have a delay in updating the background position after scrolling a page with fixed backgrounds, and iOS Safari doesn’t support it at all (source).
Finally, it’s also worth mentioning that we combine the image with a linear gradient on the background-image to improve readability.
Background-image (radial gradient)
Having a website look good on all possible devices, and window sizes, is a wonderful challenge. Fortunately, there’s many modern and lesser-known CSS specifications that make it easier and way more fun. One pair of great properties to deal with images (and other media) in this responsive context are object-fit and object-position. Object-fit works similarly to background-position and object-position controls images’ alignment.
Besides the uncertainty of where the content is accessed, there’s another big variable: the content itself. It’s not always easy to find attractive solutions that are flexible enough in the long run, but columns worked out nicely to present some data about the Gulf of Mexico. Be sure to add display: inline-block to children items to have the first row align nicely unless you’d rather have the items to be split.
At HRI, experts from different areas join forces to collaborate on complex issues like understanding and conserving Biodiversity on the Gulf of Mexico. To facilitate users exploring related events, news, and more, we implemented what we internally called the Wheel of Science. Links are positioned along its border, breaking any rectangularly-shaped box. This was the perfect opportunity to use shape-outside, allowing inline content to wrap around a defined shape instead of a float area’s box.
For this design, where list items align perfectly, we also had to add some hard-to-maintain CSS code, as they don’t float as you might expect. It’s also important to note that this property is not supported by all browsers yet (Firefox is actively working on it), but there’s definitely reason to be excited about all the new layouts this allows us to not only imagine but implement (check out this article by Sara Soueidan).
Another property that has come in handy is transform. It’s used to convert the main navigation’s hamburger icon into an X when the menu is visible and vice versa (small screens only).
We also use it to rotate some text on Research pages. Because after rotating the element the width is still determined by its content before rotating, we added a solid inset box-shadow that blends into the background to visually reduce it. Next time though, we could use writing-mode: vertical-rl (see this article by Jen Simmons about this impressive property).
If we are talking about CSS tools that add to web workers’ and users’ joy, let’s celebrate once more the possibilities flexbox and pseudo-elements bring. These are indeed exciting times to be writing CSS–Grid Layout might be a real-world option as soon as two months from now (source)!