Gold Coast Commonwealth 2018

UI Developer / freelance.
Agency : Publicis: Firstfoot

Project Brief

Live website :

- The environment deployed : Linux, Docker, Drupal 8

- The technical stack that I used: Vanilla Javascript, jQuery, CSS3(Sass and Compass + Susy grid), and SMACSS & BEM style rules.

- Main task : UI development, UI cross browsing test, defects fix

- The project site launched around April 2016

The GC2018 project required a high depth of CSS3 work. Most of the grid fits are very customised and setup with the value of vh and vw. Responsive grid configuration uses foundation 6 or Bootstrap3 for devices, and the break point falls to xs, sm, md, lg. This project, however, uses a susy custom grid and all the view breakpoints are very specified for all browsers and devices. That was a hard working job.

Unlike other projects, this project relies entirely on Drupal's content generate flow. Which means I cannot setup particular classes or IDs on the template markups. Each of modules inherited from parent modules, parent modules cascading from their parent container and so on. What I did for targeting parent-child connections on elements and referred the SMACSS and BEM guide documents. This project was testing my problem-solving skills of CSS3.

The component animation, gradients, stylings are using compass functions.

Left : mobile menu / Right : mobile version of grid. For the detail check, I recommend you go to website.