Due to workload and manpower, an outside firm was contracted to redesign countryfinancial.com. The result of the contract was a project that was built with a desktop-to-mobile approach. Our internal team decided we wanted to take our development a step further and refactor the CSS and HTML to reap the many benefits of a mobile-first, responsive design approach. We also wanted to create a living styleguide so that we could continue to showcase brand changes internally and to vendors that we will partner with in the future.
During the “redesign 2.0”, we wanted to create and maintain a styleguide. The styleguide needed to be minimal and not overly fancy, while showcasing the components we built. We also wanted the CSS and HTML to be visible for each component so that developers could see the underlying structure and easily copy/paste components into their working prototypes. We didn’t have the luxury of running the many popular ruby or node based styleguide generators. But we did have access to PHP, so we chose the excellent and minimal Styleguide Boilerplate by Brett Jankord.
This styleguide allowed us to not worry about the look and feel of the styleguide because that structure was already in place. We could leave those bits in the background and focus on importing our HTML snippets into the styleguide architecture. Marketing and Branding divisions are now using the styleguide we created as a living document that they can use while developing campaigns and continue with the company’s branding initiative. The styleguide also forced us to develop a language for our components which has been an invaluable and unforeseen outcome of the project.
There is still a lot of work to be done to optimize the site, but our team has set a solid foundation that is modular and easily extendable as we move forward. The styleguide helps us keep tabs on what we’ve already built and allows us to quickly build prototypes for development and testing of new components and templates. Using grunt allows us to quickly spin up local environments to develop those prototypes.