Here at CustomInk we are building the foundation necessary to move forward with creating a new, fully responsive CustomInk experience. Because we have such a large codebase, and customer experience is our #1 priority, we performed exhaustive research and became fully prepared in all departments before we even thought about writing a line of code.
Our UX team prepared by familiarizing themselves with the popular responsive grid systems and frameworks. They learned how to write the HTML and CSS of a page utilizing these frameworks, a skill they would soon use to mock out our new layouts in HTML and CSS- something never before done by a UX team at CustomInk.
On the technology side, we researched the many grid systems available to us, along with some popular SASS libraries and CSS naming conventions. Common themes in our research were simplicity and consistency. We were setting the stage for how CustomInk would move forward, and we had to do it well.
For our grid system we chose to use the Susy grid. For those not familiar with the Susy, it is a simple, standalone grid system that integrates smoothly with Breakpoint for powerful media-query controls.
For our mixin library we wanted just that, a mixin library. We thought about using Compass but it was much larger than what we needed. Bourbon - a lightweight SASS mixing library - was perfect for our needs.
Now we had the tools in place to move forward, but we needed to determine how to move forward. What type of naming conventions would we apply to our CSS to produce the simplicity and consistency vital to our implementation? First and foremost, we would need to namespace our styles. Goes without saying, right?
The next step would be determining a consistent naming convention to apply to our namespaced styles. After all, having consistency in convention would produce greater readability and an orderly structure for our classes. We took a deep-dive into BEM and SUIT and ultimately chose to move forward using the SUIT syntax.
From there we had the tools in place to begin building our new living style guide. This living style guide will be used by the UX team when mocking out new responsive layouts, and of course by our engineers to build our new responsive experience.