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.

On the technical side, achieving its goals involved creating a robust search experience in Drupal 8, as well as adapting our workflow to leverage the Configuration Management system.

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.

Frontpage design.
Frontpage design.

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)

We also set more than one background image on a section about Edward H. Harte. In this case, our purpose is aesthetic–highlight Harte’s image. For that, we combine it with a radial gradient.

Edward H. Harte

Object-fit

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.

We use object-fit: cover to ensure a teaser’s image fills the height and width of its box while maintaining its aspect-ratio, regardless of how the teaser looks on a specific device. As a fallback for non-supporting browsers (Edge and IE) we use a similar JavaScript solution to the one described in this article. There should be wider support soon though, as these properties were added to the Microsoft Edge backlog with a high priority in October 2016 and there’s intent to start development soon.

Teaser at different screen sizes.
Same teaser at different screen sizes.

Columns

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.

Columns
Inline-block applied on the left, default block display on the right.

Shape-outside

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).

Wheel

Transform

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).

Menu icon

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).

Rotate

 

 


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)!

January 25, 2017
Tags
0 Comments

Get our Newsletter






Comments

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
icon
What is Amazee Labs?