01 February 2024

A fine-tuned website for Hangar

Hangar web mac

Hangar is a highly esteemed design and branding agency renowned for its exceptional typography and unparalleled attention to detail. The team at Hangar has a keen eye for design and is committed to delivering top-notch services to its clients. Working closely on a daily basis, Vioside provides web development services to Hangar’s clients, matching the expected level of detail and quality. This service extended to the development of Hangar’s own website. Their website has been rebuilt from the ground up with a new level of exceptional design.

Maintaining a close working relationship has facilitated communication, enabling a deep integration between design and development. This website exemplifies the phrase, “Design is how it works”. With detailed use of the CSS grid system, the website has been constructed with a level of design and typography usually reserved for magazines.


Technology: SCSS, Twig, and JavaScript

Our technological approach was threefold, involving SCSS, Twig, and JavaScript - a trifecta that enabled us to build a responsive, dynamic, and engaging website. SCSS was used to build up how the website looks, and this technology helped us in writing cleaner and more maintainable CSS code. While we still try to keep things simple and clear using regular CSS classes, SCSS allows us to create reusable chunks of CSS with extra power. Twig is the templating engine used by Craft. It enables us to inject content added on the CMS by the client in a simple way, making markup as clean as possible. JavaScript brought interactivity to the website, enhancing the user experience by adding certain dynamic and visual updates while the user is (for example) smooth scrolling.

One of the standout features of the website is the use of the CSS Grid. This modern layout system enabled us to create complex and responsive designs with precision, ensuring the website’s layout adapts smoothly across different devices and screen sizes. This also enabled us to ground ourselves with the designs, which were also built using the grid system, thus ensuring that the end result reflects the design as accurately as possible.

Great typography is key for any website, and it was especially important for this one. We needed to find a way to match the typography with the grid system to proportionally match the layout, while still catering for responsiveness. Our method guarantees that the website’s text scales proportionally, maintaining readability and visual appeal on any device, thus boosting the site’s accessibility and user experience.

Hangar Page Insights

Performance Optimisation

Performance optimisation was a critical component of our development process, focusing on speed and efficiency to enhance the overall user experience.


Working with the amazing designers from Hangar was a great experience through and through. From having an open line of communication with constant feedback, to having detailed and pixel perfect designs allowed us to build a website which shines. This project stands as a testament to our dedication to creating custom, high-performing websites that resonate with our clients’ brand identities.

Latest Blog Posts //

Blog Image

>Read Now

News / Development

Apple WWDC ’24: A new era for apps!

Blog Image

>Read Now


Our first App Store experience was actually on iPod

Blog Image

>Read Now

News / Development

Set up your trader status on App Store