Site themes
filling A voiD
From the moment I was hired at Townsquare Media in 2011, I was tasked with designing a self-serve CMS tool and site themes. The first themes were simple page-based templates. We created several modules that would help promote our clients’ work. These included slideshows, galleries, location & map, and contact forms.
As we evolved the platform, we eventually built a list publisher. This tool allowed us to augment pages much further into unlimited blocks of content. From there we could change the presentation of the content with a simple change of a module type, from an article to a menu or to an event.
Original Beacon-Easton theme prototype I designed and built in HTML/CSS/JS.
An Evolution of Sorts
One of the prime missing components of our themes was native responsiveness. Armed with the new List Publisher, I took on the task to design a custom HTML/CSS framework that would make our system much more flexible and responsive.
In 2013 the Beacon-Easton Project was started. The concept was to build freeform pages with content blocks with the ability to be presented in many different ways and columns on the fly.
After creating the theme, I worked with my engineer to evolve the List Publisher into a Page Publisher, adding the column options. From there, we were off to the races. The theme utilized a 12-column grid structure, nested columns, and several breakpoints to provide the responsiveness we needed to stay competitive. Several child themes were created with the same structure but with header modifications.
Example of a Beacon theme template designed by the TSI support designers.
the next generation
In 2016, I took a lot of the feedback from the Beacon themes to create an even more flexible theme. That’s when the Charlotte theme was born. Using existing technology, I completely refactored the module code and markup.
I redesigned and rebuilt the custom CSS framework with the help of the Bourbon SASS library. This allowed for a cleaner typography scale, spacing system, and most importantly the use of Flexbox throughout. While the brunt of this work was done solo, I leaned on my engineers to handle any configurations needed to implement.
Example of a Charlotte theme template designed by the TSI support designers.
Theme modules designed
Headers
Footers
Navigations
Articles
Banners
Cards
Lists
Menus
Social Promos
Galleries
Hero Slideshows
Photo Grids
Parallax Heroes
Video Heroes
Map Locations & Hours
Services
Testimonials
Modals
Tabbed Sections
Blog Posts
Forms
design tools used
HTML
CSS
JS/jQuery
PHP
JSON
the work
As mentioned, I have been actively and passionately involved in the themes from the beginning. I have coded prototypes and frameworks, reverse engineered PHP modules, manipulated and added to JSON configs, utilized JS plugins, and much more.
Most of the theme work was in fact designed in code initially, given it was easier to manage type scales and the like thru code vs. tools like XD or Illustrator. This was before I started working in Figma.
10 years later…
Two themes continue to be the backbone of our product services: San Antonio (Beacon child theme) and Charlotte. 10 years and going, these themes may feel old but our support team has used our tools to continue to modernize them. Currently we utilize them for over 26k clients.