With so many front-end frameworks in the wild, you might wonder why at Studio 24 we chose to invest time and energy into creating our own front-end starter kit – Apollo.
The clue is in the wording: front-end starter kit. We have worked with Bootstrap and Foundation, but we value being able to take a leaner approach, having more control over the markup and how we layer on CSS and JavaScript.
First developed in 2016, Apollo has been used on all manner of projects. It has helped make us more efficient and, with a focus on semantic HTML, create more accessible websites.
Of course, there is always room for improvement. In 2020 we started work on rebuilding the website for the World Wide Web Consortium (W3C) and providing an accompanying design system. This gave us the chance to take a deep dive and revisit the inner workings of Apollo.
We spent time researching current best practices and techniques. A fundamental change of approach, inspired by Springer Nature’s Frontend Playbook, essentially splits our CSS into two categories based on which browsers we choose to support: core – which is served to all browsers – and advanced – which is only served to those browsers targeted for JavaScript. This encourages developers to focus first on the essential HTML and minimal CSS for any item they are building, before adding further enhancements and interactivity.
We introduced webpack to modularize our JavaScript, which not only makes it more manageable for developers by splitting out discrete functionality into separate files which can be compiled later, but also makes it easier to add specific scripts only where they are needed rather than serving a monolithic JS file across all pages.
Working in the open placed our work in front of a far larger audience for critique. Feedback has led to direct improvements, such as removing unnecessary ARIA attributes. And the output of this work, in terms of components and templates, has been reviewed for accessibility by the Digital Accessibility Centre (DAC).
What we produced for W3C has been refined further, trimming out project-specific implementations for a more baseline approach suitable for kicking off all our future front-end work. The result was so evolved from where we started with Apollo that we decided it was time for a rebrand.
And so, Amplify came into fruition: a lightweight front-end starter kit designed to amplify quality, accessibility, and performance (as well as speaking to a fondness for loud guitar music in certain quarters!). Amplify also aims to more closely align design and development at the very start of projects, encouraging collaboration and providing a shared starting point for more efficient and enjoyable projects.
There is no question in my mind that working with W3C has been a huge catalyst for this work. It has given us the impetus and focus to make major improvements in a more compact timeframe.
As with Apollo, and in keeping with W3C’s spirit of an open Web for everyone, Amplify is open source. While primarily intended for use at Studio 24, it’s open to all. We hope there are useful things you can learn from it and we welcome any comments.