Every year the Marketing and Communications department at Weber State University is responsible for producing the print and web versions of the Annual Report. The initial design is done for a print version that goes out to stake holders, donors, faculty and staff.
I take the print designs and try to build a web version of the report that stays true to the design and marketing vision while also being accessible and responsive. For the 2018 issue I developed a pattern library of modules and templates that could be used throughout the site. CSS Grid with fallbacks was used for much of the layout.
That codebase became the starting point for a larger, more documented library of UI Modules that could be reused for other sites where cutting edge design elements were required. The reusable code extended our existing UI Style Guide, ensured UI/UX/brand consistency across multiple university sites and greatly reduced build and turn-around time.
Tech and conventions used: CSS Grid, SCSS, Gulp, BEM naming, vanilla JS, Semantic Versioning 2.0.0, Git.
The codebase is on GitHub.