NFP US

View Project

I was originally hired to transition the company from a hard-coded MVC site to a CMS. This was an enormous effort and took about 2.5 years. I was the lead developer on the project, so I was responsible for the front-end architecture.

Front-end Architecture

I decided to use SASS is a fundamental part of our front-end architecture. I mostly used variables and nesting, but I've also used loops and mixins primarily for animations.

Consistency

I centralized our color variables on an internal server so that no matter what developer is working on which site, when they compile the SASS files, the colors are standardized. As a general principle, I try not to use any hex codes.

Accessibility

With the colors centralized, I'm able to easily apply global tweaks for accessibility. For instance, if our primary color is too light behind white text or logos and/or icons on a particular component, then I can use SASS' darken function to increase contrast across the board.

Our SASS Architecture

Although SASS is loaded with useful features, one thing I really love about it is using it in conjunction with Gulp. With Gulp, I can grab all the SASS files I need and spit them out into the tier system. Finally, I can use the Watch command so that I don't have to manually compile everything.

Leveraging the Headless CMS

Most CMSs have limitations, but requirements/requestors can't worry about what we can and can't do technically (within reason). Luckily, the CMS we used was headless, so I gained a good deal of flexibility. I ended up using the API a lot not only on the front-end, but for spitting out spreadsheets and documents about URLs and content to be used internally.