arik Savage

ATI First

Screenshot of homepage of https://ptfirst.com. A physical therapy provider's website featuring sharp design, and a focus on patient outcomes and statistics. Screenshot of https://ptfirst.com/changing-care. Clean visuals, focusing on presenting the company's unique approach.

ATI is a physical therapy provider with locations all over Illinois. This was a brand-new Drupal 8 site for a new service line, and it’s all about the numbers: how common conditions are, and how many days and dollars they cost people. To keep the site flexible and easy to update, we built it on a layout and component library that editors can snap together themselves.

This write-up reflects the site as I built it: ATI First, on Drupal 8. It may have been updated since.

LEGO for content editors

Built on Bootstrap and Drupal’s Layout Builder, the library lets editors choose a layout for each row of a page from a 12-column grid: ½ ¼ ¼, ¼ ¼ ½, ⅓ ⅓ ⅓, ⅓ ⅔ and so on. Each part of a row can hold components, from plain text, images and video all the way up to icon-and-text combos and animated stat counters.

Editors get all of it through drag and drop. Add as many rows as you like, drop as many components as you like into each one, and pick backgrounds, spacing and images, all within the design system.

Behind the scenes, every layout and component was planned, designed and tested for screen sizes, WCAG accessibility and performance. Doing that work once, up front, means editors can build pages without worrying about breaking anything.

Highlights

Breaking out of the box

The design is full of angled sections, and Layout Builder only speaks rectangles. So I built custom blocks that lean. Each angled section is a CSS skew() transform on the outer element, with the inner content un-skewed by the exact same amount in the other direction.

The result: the section itself slants, but the text, images and buttons inside it sit in a perfectly normal rectangle, so they lay out, wrap and read exactly like everything else on the page. It’s all pattern-based Sass, so the angles flex with the content and the screen size instead of fighting them.

  • Drupal
  • Sass
  • CSS

Counters that play nice together

Animated count-up stats, as many on a page as you want. Each one’s JavaScript keeps to itself, so timers never collide or run wild.

  • JavaScript

One annual report, two ways

A login-protected, interactive annual report built from Layout Builder content, plus a static version for printing and PDF download.

  • Drupal
  • Accessibility

Stack & skills

  • Drupal
  • Layout Builder
  • Bootstrap
  • Sass
  • JavaScript
  • CSS transforms
  • Slick
  • Accessibility

See my resume

Related