arik Savage

American College of Foot and Ankle Surgeons (ACFAS)

Screenshot of https://acfas.org: A medical association information site with a purple, blue, and pink color-scheme, and blocky, overlapping elements. Screenshot of https://www.acfas.org/who-we-are/acfas-strategic-compass: ACFAS Strategic Compass. Simple content with headings and supporting text.

ACFAS is the public site for the American College of Foot and Ankle Surgeons, built to get members and everyone else to the right information fast. The look is clean and blocky, with clear separation between sections and really readable copy.

Three teams worked on it: design, front end and back end. I led the front-end team, and we delivered the stylesheets, a little JavaScript and a library of reusable templates to an outside .NET/Kentico back-end team.

Templates as a promise

The design team was in-house, so we worked side by side and were pixel-perfect by launch. The back-end team was external, and we barely talked to them. So every template had to be crystal clear and completely self-contained. They (and later, the content editors) needed to be able to use it with zero guesswork.

That meant a documented Handlebars pattern library with minimal CSS and broadly reusable classes, plus a Grunt pipeline that linted, tested and minified the Sass and JavaScript before every hand-off.

Highlights

Overlap without obfuscation

All over the site, content blocks deliberately overlap: an accent-colored panel tucked over the edge of a photo, a callout nudged into its neighbor. That overlap isn’t just decoration. It tells you the two pieces belong together, instead of just floating near each other on the page.

Under the hood it’s flexbox plus negative margins. The part that matters most: a negative margin only works if the block being overlapped has padding to make room for it. That reserved space is what lets the pieces overlap without ever covering up each other’s content. On narrower screens, an @media (orientation) query flips the flex direction to a column, and the margins and padding switch axes with it, so the pieces stack vertically and still overlap by the same amount. Separate desktop and mobile source images keep the homepage banner looking sharp at every width.

  • Responsive Web Design
  • CSS
  • Sass

Menus that know who you are

Multi-level navigation that adapts to each visitor’s membership and permission level.

  • Handlebars.js
  • Role-Based Access Control

Fast from day one

A steady eye on Google PageSpeed the whole way through, plus a cookie-consent setup.

  • Google PageSpeed
  • Performance Metrics

Stack & skills

  • Handlebars
  • Sass
  • Grunt
  • JavaScript
  • Kentico (.NET back end)
  • Handlebars.js
  • Responsive Web Design
  • Google PageSpeed
  • Code Quality & Linting

See my resume

Related