The University of Gothenburg

About The University of Gothenburg

The University of Gothenburg is one of Sweden's largest universities with around 49,000 students. The university offers world class education, research and collaboration. The challenge was to completely replace the current external website built on an old CMS, with a new Drupal 8 setup.

What Henrik did

Front-end development, style guide & accessibility implementation and adjustments

Technologies & frameworks

Twig/HTML, CSS/SCSS (Foundation framework), React/JSX, JavaScript, Drupal 8

Type of project

Website & accessibility optimisation

Timeframe

2018 – 2020

Freedom for the editor

A lot of effort was put into the editor experience. Anyone who's familiar with Drupal knows that the admin UI for creating dynamic content is far more limited than on other CMS:es. We built a custom, component-based content creation system based on the Layout Builder module. The outcome was a smooth content creation workflow allowing editors to be creative when building pages.

University of Gothenburg editor experience

Managing CSS in a large scale web project

To maintain and manage a large CSS base efficiently in a prestigious project like this takes time and patience. We took different measures into account to deliver assets as optimised as possible.

Architecture & methodologies

While the setup contains elements of different architectural methodologies, it relies on an architecture quite similar to SMACSS presented in the Sass Guidelines by Hugo Giraudel. Along the way we realised we had a need for custom spacings in a lot of different places; to solve that we introduced a lot of utility classes in the project to sort things out based on the context.

Frameworks

We used the Foundation framework for basic layouts and grids. To start off the project with a well-tested and stable framework seemed like the right thing to do. While the project did rely on this framework, we noticed that a lot of custom CSS was written to fix things. As mentioned above, we also needed custom spacings here and there; a lesson learned from this is that a framework like Tailwind CSS would have suited this project better.

Style guide & component library

While back-and front-end started in parallel in this project, the front-end team was "blocked", since the back-end had a lot of architectural issues to sort out before starting the building phase. The solution to this was to build and maintain a style guide & component library where the front-end developers could build things in advance with dummy data. The style guide was built using KSS Node where you add specific comments in a CSS file that refers to a twig-file, which in turn picks up dummy data from a JSON-file.

View the style guide

Reactive search application

The search application is one of the project's core functions. On a content-heavy website like this one, the need for a rapid and functional search solution was a must. Henrik's main task was to make sure that the look, feel and layout matched with the rest of the website. This was mainly done by using the project's existing classes in a different context. He also took part in aspects of the React development and integration with the CMS.

View the search application